[Resolved] I need some help w/ layout+styling of nav bar, breadcrumbs, content

Home Forums Support [Resolved] I need some help w/ layout+styling of nav bar, breadcrumbs, content

Home Forums Support I need some help w/ layout+styling of nav bar, breadcrumbs, content

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #382449

    Hey guys,

    I’m building a master website that I can save as a Flywheel Blueprint to make new site builds way faster. In trying to get that done, however, I’m having some trouble getting everything to look right. I could really use some help, and I’m probably missing something really obvious, but I’m stumped.

    Here’s the site URL for your reference: https://www.stonecrestleadership.com?bypass=prototype.

    Here are my specific issues/questions:

    1. My site title, the left edge of the navigation bar, breadcrumbs, and content are staggered all over the place instead of aligned left together along the same vertical plane. I want all my site pages to be full-width, but NOT have the navigation bar start 1/4 of the way across the screen while the breadcrumbs and main content area are flesh left with no white space at all. Please help me with how to control the site-wide display so it’s more attractive and professional; I can’t seem to figure out where these controls are, and I don’t think I should have to use custom code or even CSS to get the desired results.
    2. I am using Breadcrumbs NavXT. I know that’s not your plugin, so I don’t expect you to support it, but do you know offhand where/how to style the output? I want to shrink the text size.
    3. I put the breadcrumbs code in the “Inside Content Container” block of the GP Hooks screen,
      and the plugin appears to be working correctly. I want to add white space above and below the breadcrumbs so it’s not crowding the navigation bar or content, however; how would I do that?

    Thanks in advance for your help!

    GP Premium 1.4.3
    Lead Developer
    Lead Developer

    Hi there,

    1. Currently, it looks like you’re using the full width option in the Page Builder Container meta box – you’ll want to disable that and just set it to Default.

    Then you’ll want to set your inner header and navigation widths to match:

    If you set everything to contained, all of your elements will be as wide your container width and will match up: https://docs.generatepress.com/article/container-width/

    2 + 3: Wrap your breadcrumbs code in a container like this:

    <div class="breadcrumbs">
        Breadcrumb code in here

    Then add this CSS:

    .breadcrumbs {
        margin: 20px 0;
        font-size: 17px;

    Let me know if this helps or not ๐Ÿ™‚


    Thanks Tom; those tweaks made a huge difference. It almost looks perfect! The only issue left is that my menu is full-width (as it should be), but not aligned with the logo and content area. I want the navigation bar element to stretch to the far left and right edges of the screen, but have the first navigation item left-aligned with the logo and content.

    I set the Primary Navigation’s Navigation Width to “Full,” and the Inner Navigation Width to “Contained,” but it’s not displaying correctly. What am I missing, and how do I fix this?

    Lead Developer
    Lead Developer

    Ah, you could try this:

    @media (min-width: 769px) {
        .inside-navigation {
            padding-left: 40px;

    That fixed it; thanks! My site alignment & layout looks terrific now! All that’s left is to put in the content and set colors. Thanks for your excellent and timely support, Tom. I have been very impressed with your responsive, professionalism, and expertise. I’m a VERY happy customer; keep up the great work!!

    Lead Developer
    Lead Developer

    Awesome! Really glad I was able to help ๐Ÿ™‚

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.