Brand logo and menu icon in the same line on mobile

Sparkling
1

Hi,

thank you very much for your great theme!

When I upload a brand logo/ header image it is not in line with the menu icon on mobile, even when I reduce the width of the brand logo:

IMG_0932
IMG_0932295×640 292 KB

Is there an option or CSS code that helps to have the brand logo and the menu icon on mobile in line?

Thank you very much in advance.

Kind regards
Kevin

P.S. As a new user in the forum I am not allowed to insert my website url. But you find it easily when you search for “Bürostuhl Experte” on Google.

2

Hi there

Yes we can help with this. can you please provide you all of your website with this problem?

Regards

3

Thank you for your quick reply.

I run 4 websites with this theme and the problem occurs on all of them, for example: https://www.buerostuhl-experte.de/

4

Hi there

Did you make any changes? this is what I have at this moment Screenshot by Lightshot

Regars

5

The screenshot in my first message was with a placeholder to demonstrate you the behavior on mobile. Right now I do not use a brand logo, only the text “Bürostuhl Experte”.

On this site with less traffic https://www.saege-experte.de/ you can see the behavior on mobile live.

6

Hi @Kevin1

Ok, got it, please add this CSS code in the Appearance > Customize > Additional CSS:

#logo {
    display: inline-block;
}

It should work :slight_smile:

1 Like
7

Great, the CSS is working. :slight_smile: Thank you so much!

When I upload a header/ logo with the recommended size 300 x 76 px it is in 2 lines on many mobile devices because of the logo width.

Therefore I uploaded a smaller logo with 270 x 69 px so that it is in 1 line: https://www.saege-experte.de/ (see mobile viewport). The menu icon is sticky on top of the blue bar and therefore not in line with the logo (I tested different logo sizes).

Is there also a CSS code to have the menu icon always in the middle of the header (= a bit lower) so that it is in line with the logo?

8

Hi @Kevin1

Cool, in this case try this CSS code:

.navbar-default .navbar-toggle {
    margin-top: 15px;
}

Regards

9

Excellent! Thank you very much again for your quick help.

Regards,
Kevin

10

Cool!

Nice to hear your problem is resolved Kevin :slight_smile:

​Let me know if you need further assistance

Regards