Black Friday Sale! Get up to $40 off GP Premium!Learn more

[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
    Posts
  • #382449
    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!

    GP Premium 1.4.3
    #382606
    Tom
    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:
    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 🙂

    #383463
    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?

    #383570
    Tom
    Lead Developer
    Lead Developer

    Ah, you could try this:

    @media (min-width: 769px) {
        .inside-navigation {
            padding-left: 40px;
        }
    }
    #383950
    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!!

    #384044
    Tom
    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.