-
Hi
I need to recreate the sticky topbar and header similar to the one below (both desktop and mobile versions). It wasn’t made with GP/GB, but the new one will be. New staging is also below.
I thought it would be easy enough to use a GP element for the topbar header, a standard mobile menu, and some sticky toggles.
But I have had endless trouble with the two bits (topbar & header menu), leaving gaps (e.g. above), where you can see the scrolling content and other issues.
I have tried several snippets of CSS from prior topics, but with no luck. Any help would be great.
Cheers
Shaun -
Hi there.
Please, do the following:
1. Remove the following CSS:
header.site-header { position: sticky; top: 58px; z-index: 10000; }2. Go to Appearance->Customize->Layout->Sticky Navigation and set it to
On. Select the logo for the sticky navigation.
3. If you have Mobile Header to
Onfrom Appearance->Customize->Layout->Header, you need to enable Sticky from there, too. -
Thx George
Unfortunately, that didn’t help. See the short video below to see what I mean.
-
Please, remove this CSS:
nav#sticky-navigation { top: 55px !important; }Also, you need to upload a Sticky Navigation Logo.
If you have Mobile Header to
Onfrom Appearance->Customize->Layout->Header, you need to enable Sticky from there, too.
-
Thx George
It looks a bit jumpy (changing from the header to the sticky navigation).
But my biggest issue is that the topbar still isn’t sticking.
Whether it is a sticky header or nav, I need them to stick together (seemingly as one block) with the topbar. See the new video below for a fuller explanation.
-
Hi there,
Can you try this?
1. Select the root container of the topbar, set its position to sticky, inset > top to 0, z-index to 100000.
2. Add this CSS:
nav#sticky-navigation { top: 58px !important; }Let me know if this helps!
-
Thx Ying
I added the CSS, but don’t see the options to set the position as described (see image below)
Cheers
Shaun -
It looks like you are still using v1 blocks, so the display option does not exist.
In this case, add a css clss to the root container of the topbar, eg.
sticky-topbar.
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/Then add this CSS:
.sticky-topbar { position: sticky; top:0; z-index:10000; } -
Thx Ying
The topbar sticks for a bit as I scroll, but then gets covered by the sticky Nav (see new video below).
-
Hi Shaun,
Try adding this CSS as well:
nav.is_stuck { margin-top: 58px !important; } -
Thx Alvind
That worked. Now I need to get it working on mobile. At present, I have the sticky head/nav working fine on mobile. But no top bar.
To complicate matters, I need a different topbar, as there is less room and too much info as is. See image below for a screenshot of my draft mobile topbar.
I need some guidance with this. I set it (outer container) to hide on desktop/tablet, but it still showed. I have since reverted the element to draft status.
Cheers
Shaun -
Can you temporarily publish the Mobile Top Bar element so I can take a look?
-
Done – I also put a temp login link below
-
The reason the Hide on desktop and tablet setting wasn’t working is that the mobile top bar shared a similar unique class ID with the desktop top bar. I fixed this by duplicating the mobile top bar, which regenerated a new unique class, so it should work correctly now.
-
Thx Alvind, that’s awesome
-
No problem 🙂
- You must be logged in to reply to this topic.