[Resolved] Using top bar but it brings down logo and menu in Mobile

[Kasper]

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

[David]

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.

[Kasper]

Hi David

Once agin brilliant. Cropped the logo and followed your guide.

Best support ever.

Thank you so much

Have a great day

/Kasper

[David]

Glad to be of help

[Author]

Posts