-
Hello Again,
my customer asks me, if it is possible to change just the (mobile-non-sticky) Logo. He wants to have there the long one (like it is used in the desktop-version). Sticky mobile should stay the small one, like it is actually.
Thank you for looking it up,
Jenny -
Hi there,
You can refer to this topic:
https://generatepress.com/forums/topic/mobile-header-different-logo-with-sticky-enabled/ -
I know, but i need
> Desktop – non sticky = long logo
> Desktop – sticky = long logo
> Mobile – non sticky = long logo
> Mobile – sticky = short logocan you have a look again, please?
-
Hi there,
it would require adding an extra image in there and then we can use some to hide one of them.
To begin:
1. in Appearance > Elements -> Add New –> Block
2. in the element settings sidebar set the Hook to:inside_mobile_header
3. Set the Priority to4
4. set the Display Rules Location to the Entire Site
5. In the editor add an Image Block for the Long Mobile Logo
5.1 set the Image Link to the home page.
5.2 in Advanced > Additional CSS Classes field add: long-mobile`
6. Publish the elementDo that and clear any caches so you should see the two logos on mobile.
Then let me know so I can work on the CSS for it. -
Great, that worked. But now i see 2 Logos, the sticky one and the unsticky one 🙂
Can you help me again? -
Try adding this CSS:
nav.is_stuck .gb-container-901248b3 { display: none; } nav.is_stuck .mobile-header-logo{ display: block; } .inside-navigation .mobile-header-logo { display: none; } -
Great – thanks for your Help :)!
-
You’re welcome!
- You must be logged in to reply to this topic.