[Resolved] Any menu "why"?

[David Victor]

I’m having a problem with my website where when I shrink the page size (to tablet size, for example) my mobile menu appears (as I want) but it seems to shove itself down a line. Try it for yourself and see how the main navigation menu looks fine on desktop, but when you shrink it down, the hamburger drops down a line. I’d like it to sit in the top right. I tried “float right” but then the entire header disappeared in the preview.

Sorry for my ignorance.

https://davidvictor.com

[Tom]

Hi there,

Right now you have this CSS:

.main-navigation .menu-toggle, 
.main-navigation .mobile-bar-items, 
.sidebar-nav-mobile:not(#sticky-placeholder) {
    display: block;
}

Try this instead:

.main-navigation .menu-toggle, 
.main-navigation .mobile-bar-items, 
.sidebar-nav-mobile:not(#sticky-placeholder) {
    display: inline-block;
    clear: none;
    width: auto;
    float: right;
}

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David Victor]

Darn it…when I put that in, ALL my navigation went away. And even though I un-did it, and saved it, the navigation is still missing on the sub-pages. Help!

https://davidvictor.com

[David Victor]

Yes, all the header stuff, including menu disappeared, even with the undo…check/refresh the page. Doh!

https://davidvictor.com

[Tom]

The site is missing the header element now. That CSS isn’t able to remove HTML elements from the page. Maybe you made another change to remove the header?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David Victor]

I can’t imagine what..! I simply replaced the CSS with the CSS you suggested. Where would I go to look for a missing header? My Layout -> Header still shows Header Presents “Current”, Header Width “Full”, etc., etc.

https://davidvictor.com

[David Victor]

I see what I did…still not sure why it affected it, I set “Navigation Location” from “Below Header” (where it was) to “Float Right”. Setting it back brought the header back. So that’s good, but I still have my original problem…thanks for any help you can provide!

https://davidvictor.com

[Tom]

Did you only replace the CSS I mentioned? It looks like your menu items are no longer disappearing at 1050px, and there’s no media query around the CSS I suggested.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David Victor]

I didn’t realize you were asking me to replace a specific portion. Could you possibly give me the whole enchilada since I blasted it?

Thank you!

https://davidvictor.com

[Tom]

I’m not sure what CSS you had added originally. Did you get it from a specific support topic/documentation article?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David Victor]

I think I got it from one of my threads on this forum. Could we start over please?

I’d like a menu with text on desktop, then I’d like the hamburger at lower resolutions. I’d also like the menu not to “wrap” on desktop…no matter the media query, I’d like the menu to be at the top right at all times.

Can you provide me with the right CSS?

Thank you!

https://davidvictor.com

[Tom]

Try adding this CSS:

@media (max-width: 1055px) {
    .main-navigation .menu-toggle,
    .main-navigation .mobile-bar-items,
    .sidebar-nav-mobile:not(#sticky-placeholder) {
        display: inline-block;
        clear: none;
        width: auto;
        float: right;
    }

    .main-navigation ul,
    .gen-sidebar-nav {
        display: none;
    }

    [class*="nav-float-"] .site-header .inside-header > * {
        float: none;
        clear: both;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[David Victor]

That works perfectly! THANK YOU very much! Really appreciate the extra support Tom!

https://davidvictor.com

[Tom]

Awesome, no problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts