[Resolved] Header & Navigation Alignment / Breakpoints

[Stuart]

I have my Navigation inside the header, set to Float Right.

Here’s the website: http://powerhousewebcreations.com/connectfs/

When the screen width narrows down to approx 1000px, the navigation is forced below the logo but still remains floated to the right, with the logo floated to the left.

At this breakpoint I want the logo and navigation to be center aligned.

I also want to be able to apply some css styling at this breakpoint – padding/margins etc.

Can anyone help me out here?

Stuart

Hop

[Tom]

Hi there,

Give this a shot:

@media (max-width:1000px) {
    .site-logo {
        display: block;
        text-align: center;
    }
    #site-navigation {
        float: none;
        margin-top: 20px;
    }
    .inside-header {
        padding-bottom: 10px
    }
}

[Stuart]

Hi Tom

Thanks for the quick reply. Tried that and now the Navigation is off to the left, not center. See the image below

Any ideas? I don’t mind losing the search button if that makes it any easier.

[Tom]

What happens when you set your navigation alignment to center in Customize > Layout > Primary Navigation?

[Stuart]

Tried that and it didn’t change anything, still left aligned.

[Tom]

I’m still seeing it as aligned left in the code. Can you save it as aligned center and then let me know so I can see why it’s not working?

Thanks!

[Stuart]

That’s the Navigation Alignment now set to Center, and saved.

Thanks

[Tom]

Hmm strange.

Alright, add this CSS to your media query instead:

.main-navigation {
    text-align: center;
}

.main-navigation li {
    float: none !important;
    display: inline-block;
}

[Stuart]

Yep, that done the trick!

Thanks for the assistance Tom, and for your ongoing efforts with this theme.

Moved from Headway to GeneratePress + BB and so far i’m very impressed.

[Tom]

Awesome, glad I could help! 🙂

[Author]

Posts