- This topic has 22 replies, 3 voices, and was last updated 1 year, 9 months ago by
.
-
Posts
-
I created a merge header and shifted the site logo and header down so the logo is partially “flying” over the below content. So far so perfect, however I can’t find a way to decrease the space above the logo+header with let’s say 20 of 30 px so it moves up to the top menu bar?
Second, when scrolling down/up you see a shift in the logo+header compared to the header background, how to solve that?
The website is in development (release next week) but I whitelisted on URL so you can check.
Kind regards,
Marcel.
Customer Support
Hi Marcel,
You can try:
1. Add this CSS:.inside-header { max-height: 200px; }2. Remove the offset value from the header element.
Let me know how it works.
Hi Yin,
thanks!
It looks ok however the menu is almost not clickable, that area seems also shifted/decreased
Try add this CSS:
nav#site-navigation { position: relative; }This is it! Thanks Ying.
At last can you advise in when scrolling down/up you see a shift in the logo+header compared to the header background, how to solve that?
Customer Support
Hi Marcel,
Try adding this CSS:
@media (min-width: 1025px) { .main-navigation.navigation-stick.has-sticky-branding .inside-navigation.grid-container { padding: 0px 20px 0px 20px; } }This CSS would make the padding of the Sticky Nav and your nav bar similar on desktop.
Hope this helps!
Hello, we’re still struggling with the header height.
The site is live but the desktop header on mobile was too heigh so we switched to mobile header. Now there the header is much to heigh. What can we do to decrease that?
Hi Marcel,
Try reducing the top and bottom padding of your Header Element on mobile view. To do so, click on the mobile icon in the padding section, then modify the padding accordingly.
Kindly let us know how it goes.
Stupid me, it was there before the switch to mobile menu. I removed it there but it is still not good.
Try putting a value. For instance, if you want the top and bottom padding at zero, set it to zero on mobile.
have look, set it to 20 top 20 bottom but logo en menu is still too low. Maybe because of Yin’s code:
.inside-header { max-height: 150px; }or this one?
div .site-logo { padding-right: 0px!important; padding-top: 70px!important; }This is what I’m seeing from my end: https://share.getcloudapp.com/E0uyXxOx. The logo isn’t displayed.
Are you seeing something different? Can you clear all caching mechanisms you have if so?
Kindly let us know.
strange! in the configurator it is on and I can see it, but in a new private browser tab and not logged in it’s not.
see URL with screenshot
Try add this CSS:
nav#mobile-header .site-logo.mobile-header-logo { display: block; }
- You must be logged in to reply to this topic.