-
I am having trouble achieving what I am after.
I would like a merged header which is sticky and shrinks on scroll. This setup is working well on desktop but has issues on mobile.
I have a merged header element site-wide set to Float Right.
The head is set to Use Navigation as Header and mobile header is off.
Desktop primary navigation has the menu item height set to 100px.
Mobile primary navigation has the menu item height set to 44px.
On mobile the non-sticky menu is smaller than the sticky version, and the logo is too small, but the menu item height is correct. The logo gest larger when scrolling down and the menu items are also too tall.
-
Hi there,
To clarify, would te logo on the non-sticky and sticky header be the same?
If so, if you have a logo added in Appearance > Customize > Layout > Sticky Navigation, can you remove it?
-
Yes. The logos should be the same, but there is no logo set in Appearance > Customize > Layout > Sticky Navigation.
I do see an option for menu item height in the sticky navigation options that I missed before. That is now set to the correct height, but now the logos in the sticky and non-sticky navigation are both too small.
-
Can you try adding this through Appearance > Customize > Additional CSS?:
@media (max-width: 768px){ .site-logo img { height: 100px !important; } }You can alter the 100px value to your liking.
-
Great, I thought there might be a setting for logo height and menu height that I had missed. That css is working.
-
You’re welcome!
- You must be logged in to reply to this topic.