-
Hi,
I have created an element block to create a header for a specific webpage.
The design works beautifully for desktop but not for mobile.Is there a way to bring the alphabet of the header below the logo (just for mobile), and leave it on the same line (for desktop)?
Or is it possible to assign this header block for desktop only and create a new design for mobile only? -
Hello Abmmgb,
It’s possible. There’s no need to create a new Block Element for mobile.
Try adding this through Appearance > Customize > Additional CSS:
@media (max-width: 768px){ .gb-container.gb-container-7c837147 { flex-wrap: wrap; } .gb-container.gb-container-338cc91f { flex-basis: 100%; } } -
Added this & works, however I notice that although I disabled the primary navigation (and it is disabled on desktop) it still appears and interferes on mobile with my header.
-
How did you try to disable it specifically?
-
Via the page settings (where the header block is set to be displayed)
-
Can you create a Layout Element to disable the mobile header for that page? Reference: https://docs.generatepress.com/article/layout-element-overview/#disable-element
-
Disabling it with a layout element worked!
The only thing not working is the header being full width on mobile. I have checked the container settings multiple times but couldnt see the issue.
Is it possible the CSS might need to be ammended?
-
This is sorted now 🙂
-
Glad you resolved it! 🙂
- You must be logged in to reply to this topic.