[Resolved] Set Navigation Drop Point on Sticky header/menu

Home Forums Support [Resolved] Set Navigation Drop Point on Sticky header/menu

Home Forums Support Set Navigation Drop Point on Sticky header/menu

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #873861
    lunatrix

    I have a sticky header set and when I look at the site on a tablet, it is still too wide to switch to the hamburger menu, but the last (far right) menu item is on the line below. How can I either (a) make it switch to the hamburger menu, or (b) drop the whole nav menu below the logo? I only want this to happen for smaller screens.

    Thanks!

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #873885
    Leo
    Staff
    Customer Support
    #873901
    lunatrix

    Hi Leo,

    Yes, I tried that already and it only works for the desktop width. Part of the issue might be that I am doing some non-standard layout with the sidebar (https://generatepress.com/forums/topic/set-min-width-for-mobile-layout/), but I don’t think the sidebar positioning should really have an effect on the drop point.

    I’m seeing this behaviour between widths 769px to 1024px.

    #873910
    Leo
    Staff
    Customer Support

    Can you link me to the site in question?

    Let me know.

    #873913
    lunatrix

    I’m afraid I can’t – it’s on my local dev machine and is not accessible to the outside world.

    Is it possible to force the hamburger menu for screens that are smaller than 1025px wide?

    #873914
    Leo
    Staff
    Customer Support

    Are you using the mobile header feature?

    #873922
    lunatrix

    Found it. I have enabled the mobile menu, but for devices with a width between 769px and 1024px, with a sticky header, the menu does not switch to the hamburger menu, and the menu is also not dropping below the logo (the main menu is set to float to the right). It drops correctly until I start to scroll and the header switches to the more compact sticky header. Once it switches to sticky the menu is no longer dropping below the logo.

    #873929
    lunatrix

    I feel this is an issue with the way the sticky header/menu works. I am also seeing the same sort of behaviour on smaller screens with the hamburger menu. Before scrolling, the hamburger menu is positioned below the logo, but as soon as the sticky header engages, the hamburger menu jumps to the right. I expect it is the same thing that is happening with the non-hamburger menu, but in that case the menu is too long to fit on one line so it pushes some of the menu items to the next line.

    #873931
    Leo
    Staff
    Customer Support

    I’m not saying you need to use the mobile header navigation. We can change the breakpoint with or without mobile header, just need to use different methods.

    Would definitely be easier if you can duplicate the problem on a live server so I can provide the best solution possible.

    #874306
    lunatrix

    I disabled the sticky header, and then followed the instructions here:

    https://generatepress.com/forums/topic/sticky-top-bar-and-main-navigation/

    I am only using the sticky header on desktop now, and I am happy with my results. Thanks for your time!

    #874440
    Leo
    Staff
    Customer Support

    Awesome!

    Let me know if you need another look 🙂

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.