- This topic has 22 replies, 3 voices, and was last updated 2 years, 3 months ago by Fernando.
-
AuthorPosts
-
July 5, 2022 at 7:10 am #2273694Marcel
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.
July 5, 2022 at 9:43 am #2273987YingStaffCustomer SupportHi 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.
July 5, 2022 at 9:49 am #2273994MarcelHi Yin,
thanks!
It looks ok however the menu is almost not clickable, that area seems also shifted/decreased
July 5, 2022 at 10:40 am #2274043YingStaffCustomer SupportTry add this CSS:
nav#site-navigation { position: relative; }
July 5, 2022 at 2:07 pm #2274196MarcelThis 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?
July 5, 2022 at 6:07 pm #2274288Fernando Customer SupportHi 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!
July 14, 2022 at 12:18 am #2282264MarcelHello, 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?
July 14, 2022 at 12:28 am #2282272Fernando Customer SupportHi 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.
July 14, 2022 at 12:46 am #2282277MarcelStupid me, it was there before the switch to mobile menu. I removed it there but it is still not good.
July 14, 2022 at 12:49 am #2282279Fernando Customer SupportTry putting a value. For instance, if you want the top and bottom padding at zero, set it to zero on mobile.
July 14, 2022 at 12:51 am #2282281Marcelhave 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; }
July 14, 2022 at 12:53 am #2282282Marcelor this one?
div .site-logo { padding-right: 0px!important; padding-top: 70px!important; }
July 14, 2022 at 1:06 am #2282289Fernando Customer SupportThis 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.
July 14, 2022 at 2:17 am #2282345Marcelstrange! 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
July 14, 2022 at 11:49 am #2282897YingStaffCustomer SupportTry add this CSS:
nav#mobile-header .site-logo.mobile-header-logo { display: block; }
-
AuthorPosts
- You must be logged in to reply to this topic.