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

[Matthew]

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!

[Tom]

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:
https://docs.generatepress.com/article/header-layout/
https://docs.generatepress.com/article/navigation-layout/

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
</div>

Then add this CSS:

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

Let me know if this helps or not 🙂

[Matthew]

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?

[Tom]

Ah, you could try this:

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

[Matthew]

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!!

[Tom]

Awesome! Really glad I was able to help 🙂

[Author]

Posts