Archived topic
Using top bar but it brings down logo and menu in Mobile
3 replies · Started by Kasper on February 7, 2023
Looks ok on desktop: https://www.supermacservice.dk/ with the opening hours and telephone number in the top, but when i look at in on mobile, the logo and menu is pushed down.
I am not sure how to fix this
Thanks
Kasper
Hi there,
your site is using a Header Element ( in Appearance > Elements ) to merge the site header / top bar with your content.
So you need to give it more space:
1. In Customizer > Layout > Header, switch to mobile view and reduce the Top and Bottom Padding.
2. The Top Bar Padding can be reduced by adding this CSS:
@media(max-width: 768px) {
.top-bar .inside-top-bar {
padding: 10px 5px 0;
}
.top-bar .inside-top-bar p {
margin-bottom: 0;
}
}3. You may also want to consider cropping your logo as it has a lot of negative space above and below the image, which is adding more height to the header.
4. Edit the home page, select the top most Container Block and in Mobile increase the Top Padding.
5. Repeat #4 for the Page Hero in Appearance > Elements.
Hi David
Once agin brilliant. Cropped the logo and followed your guide.
Best support ever.
Thank you so much
Have a great day
/Kasper
Glad to be of help