[Support request] Un-hacky Sticky Menu for Header + Nav on Desktop?

Home Forums Support [Support request] Un-hacky Sticky Menu for Header + Nav on Desktop?

Home Forums Support Un-hacky Sticky Menu for Header + Nav on Desktop?

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #528935
    Paul

    Hi, I already tried this solution: https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579

    But apart from it being hacky (I mean making a header sticky is pretty basic functionality, so having to add it like that is hacky IMO). Anway, apart from that, it’s also not working right for me…

    See the screenshot here: https://cl.ly/19340U0N3L17

    The thing that doesn’t work right is the menu disappearing under the admin bar. I don’t want a sticky menu at the cost of having a broken menu for admins.

    How can I have a fully working sticky header + nav, without other things breaking?

    And also, assuming a fully working solution is possible, could you please instruct me on how to add the before and after header parts at the linked solution with a function instead of the GP hook interface? I prefer this so I can keep all my modifications centralized, instead of spread all over the place.

    Thanks, Paul

    P.S. Just to clarify. I want the same thing as “Sticky Mobile Header” (which is an option in the customizer), but then for desktop.

    GeneratePress 2.0.2
    GP Premium 1.6
    #529207
    Leo
    Staff
    Customer Support

    Hi there,

    Looking at your current layout, I believe this is what you are after: https://docs.generatepress.com/article/navigation-logo/#navigation-as-header

    Let me know.

    #529953
    Paul

    Hi Leo, those instructions are not clear to me:

    1. Set your navigation location to Below Header or Above Header in Customize > Layout > Primary Navigation.

    Ok, check

    2. Remove your site title/tagline/logo from the header in Customize > Site Identity.

    Ok logo gone, but wait, I isn’t this about “use your navigation with your navigation logo (set to sticky + static) as your header”? Then why am I removing my logo?

    3. Set your Navigation Logo Position to Sticky + Static.

    Great, where do I do that? This is not clear and I can’t find this.

    4. Set your Sticky Navigation Transition to None.

    Ok, check

    Also I have Layout > Header > Mobile Header set ton On and Sticky, but it’s not sticky at all. I think this used to work before, not 100% sure, but now it definitely isn’t sticky anymore.

    And also, when I go to Layout > Sticky Navigation, setting it to on, this only works on desktop, even when I specifically set it on for mobile.

    It’s confusing and a bit frustrating.

    #530145
    Leo
    Staff
    Customer Support

    2. Site logo is one in the header which is different than the navigation logo which is what you need.

    3. Scroll up to the first section in the link I provided above. It’s all there.

    You have LOTS of console errors showing: http://www.screencast.com/t/rYEsmUmM

    I would recommend #1 here to see which plugin is causing this: https://docs.generatepress.com/article/debugging-tips/

    It could solve the options not working issue as well.

    Let me know 🙂

    #530185
    Paul

    Thanks Leo, thanks. I guess I was a bit impatient, missing a few things. Probably has to do that with my other theme this is a quick one click setting.

    I looked up the error you referred to, it seems to be a Chrome bug related to embedding youtube videos, it only shows on pages where I embed youtube vids: https://github.com/CookPete/react-player/issues/288

    When you look at my GP site that I linked to earlier in the site URL field, you’ll see that it’s still not working.

    There are several issues:

    1. It’s still not sticky even though I followed all steps now.
    Edit, this is fixed now. It was due to the code I added in the Before and After Header hooks in this solution here: https://generatepress.com/forums/topic/how-can-i-create-a-fixed-header-and-top-menu-in-the-generate-press-theme/#post-31579

    2. The logo doesn’t show on mobile.

    3. The menu is center aligned instead of right aligned on mobile.

    4. The menu is glitchy and jittery when first scrolling down from the viewport top. I compared it with the same kind of menu from my other website with a different theme, and it doesn’t have this.

    P.S. I tried disabling all plugins other then GP, issues still persist.

    #530515
    Leo
    Staff
    Customer Support

    2. There isn’t a mobile logo showing because you are using the mobile header without uploading a logo:
    https://docs.generatepress.com/article/mobile-header/

    3. Once you upload the mobile header logo it should fix this issue as well.

    4. We will take a closer look at this issue. Are all the code you’ve added before to create a fixed header removed?

    #530641
    Paul

    2 & 3. Ah ok, didn’t realize I had to set the logo there too. That works, 2 & 3 are resolved now.

    4. Yes, all the code I added before to create a fixed header has been removed.

    #530646
    Tom
    Lead Developer
    Lead Developer

    Hmm, something is conflicting with the sticky navigation transition.

    Here’s an example of how it should function: http://tomusborne.com/demo/

    You said you turned off all of the other plugins, so that would exclude a conflict (I assume you cleared your browser cache etc..)

    Do you have any scripts added inside hooks?

    Can you try with any custom CSS removed?

    #530649
    Paul

    I tried disabling all plugins before as well as removing all custom css, except the necessary css for this to work, clearing cache etc. There are no scripts inside the hooks other than the code for the author box in functions.php.

    Either way, the page you link to as an example of how it should function has the same problem, see this video recording of it: https://cl.ly/0j0a3E2V252c

    First I scroll down using the mouse wheel, that results in the nav bar flickering, then I scroll down using the browser bar to the right, which results in the nav bar jittering.

    #530651
    Paul

    P.S. Just tested it in Chrome, there the problem doesn’t seem to exist. In the video above I use Firefox, so it seems the menu isn’t working smoothly cross-browser.

    #531273
    Tom
    Lead Developer
    Lead Developer

    What version of Firefox is that? I’m not seeing the same thing in 59.0.1.

    Your video is showing a different issue than what I’m experiencing on your website. The navigation on your website seems to lag, even in Chrome.

    #531315
    Paul

    That’s Firefox 59.0.1. (64 bit), also tried on another laptop from a friend which has Firefox 58.02 installed, same thing, although more jittery only, didn’t notice an obvious glitch/flash like on my laptop using 59.0.1.

    Tried disabling all FF addons on my laptop also, still persists.

    #531458
    Tom
    Lead Developer
    Lead Developer

    position: fixed is far from perfect unfortunately. We’ll be migrating to a vanilla JS script that uses position: sticky where possible very soon.

    However, I can’t replicate a constant glitch on any of my test installs. Here’s a video in the latest Firefox: https://www.screencast.com/t/yE2XcXrEqUH

    That small flash that happens sometimes is thanks to position: fixed.

    However, the issue I’m seeing on your website (the original question of this topic) has nothing to do with this position: fixed glitch.

    It happens for me in Chrome, and is pretty significant. You can see the classes being added lagging while in developer tools. There has to be something specific to your site causing this.

    You could try ditching the built in sticky navigation, and use position: sticky instead. Browser support isn’t amazing, but it will give you the smoothness you’re looking for.

    #site-navigation {
        position: sticky;
        top: 0;
    }
    
    .admin-bar #site-navigation {
        top: 32px;
    }
    #532042
    Paul

    “However, the issue I’m seeing on your website (the original question of this topic) has nothing to do with this position: fixed glitch. It happens for me in Chrome, and is pretty significant.”

    Any chance you can make a quick video of that? I don’t experience any issues in chrome myself, so would be good to see what you mean, so I can factor that into my decision process when it comes to debugging, and deciding which way to go as it relates to the different menu setups discussed.

    I don’t experience any lagging myself, just the jitter which is a minute kind of lag I guess.

    “You could try ditching the built in sticky navigation, and use position: sticky instead.”

    Thanks, I’ll consider it as an option. I wonder why though, on my other website with another theme the sticky menu works perfectly. Plus I wonder why GP has a sticky header for mobile option (including the logo + nav) but not for desktop …

    I don’t remember if the sticky mobile header has the same issue as this current setup, meaning the flicker and jitter, but it’s much easier to setup than this method of a sticky nav + logo is, to achieve what seems to be the same result.

    #532078
    Paul

    I just did some more debugging on the site, using different themes and seeing if the menu works well there.

    1. I tried with Astra Pro, same issue as with GP, glitch and jitter.

    2. I tried with the Newspaper theme from MyThemeShop, no issue at all, works perfectly.

    Can you see which method the newspaper theme uses for the sticky header / menu + logo?

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