[Resolved] Any menu "why"?

Home Forums Support Any menu "why"?

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #827778
    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

    #827874
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #827879
    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

    #827880
    David Victor

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

    https://davidvictor.com

    #827881
    Tom
    Lead Developer
    Lead Developer

    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?

    #827931
    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

    #827932
    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

    #827960
    Tom
    Lead Developer
    Lead Developer

    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.

    #828199
    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

    #828579
    Tom
    Lead Developer
    Lead Developer

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

    #828735
    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

    #828889
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #829569
    David Victor

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

    https://davidvictor.com

    #829594
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.