- This topic has 16 replies, 3 voices, and was last updated 7 years, 5 months ago by
.
-
Posts
-
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.
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.
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.
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 🙂
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-315792. 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.
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?
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.
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?
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.
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.
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.
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.
position: fixedis far from perfect unfortunately. We’ll be migrating to a vanilla JS script that usesposition: stickywhere 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: fixedglitch.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: stickyinstead. 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; }“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.
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?
- You must be logged in to reply to this topic.
