Logo position on mobile

ISAR3 · June 2021

Hi there,

I´m working on this site (http://kp.isar3.de – PW: Clemens1) and have a problem with the logo position on mobile:

I´ve set the mobile header to be "minimal" and "menu right / logo left" (https://prnt.sc/14qgt4b).

With this setting I get the following result:

# the logo is not centered verticaly

# the logo is not aligned with the content left (whereas the menu on the right is): https://prnt.sc/14qhi88

Turning of the "minimal" setting, I get a better vertical alignement (5px more upwards would be better) but the logo is centered and not aligned left anymore... https://prnt.sc/14qigmv

Ist there a way of getting both done? What am I doing wrong?

Would appreciate a good hint here.

Many thanks and best regards,

Daniel

Phil · June 2021

Hello,

Please, go to Betheme -> Theme options -> Global -> Logo, and check if you have Vertical align set to Middle.

You can also select the option Remove Left margin.

After that, check if the display is what you want to achieve, and let me know what the result is.

Thanks

ISAR3 · June 2021

Hi Phil,

the middle setting did the trick for the vertical alignment – thank you (see green in the screenshot)

Yet, I still have problems with the "left alignment" – alltough I have the "remove left margin" checked (see red in the screenshot).

Screenshot: https://prnt.sc/14w62q1

And this is how I would want it to look like (on all browser-widths below 768px): https://prnt.sc/14w72kd

I´ve tried it with a negative "left-margin"... but that will not help as I cant set in %. Do you have any ideas...(being that the setting is called "logo left / menu right" and not "logo center"?

Thanks in advance and

best regards, Daniel

Phil · June 2021

Please, try to use the following CSS code:

@media only screen and (max-width: 767px){
   #Top_bar #logo{
      margin-left: 0!important;
   }
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Thanks

ISAR3 · June 2021

Almost there, Phil – thank you...

yet there are still some 10 or so pixels missing: https://prnt.sc/14wb866

I really don´t get why they are there after eliminating the left margin... do you?

Best regards, Daniel

Phil · June 2021

Please, add the following code to the previous one between the media queries brackets. So it will look like this:

@media only screen and (max-width: 767px){
   #Top_bar #logo{
      margin-left: 0!important;
   }   
   #Top_bar .logo{
      text-align: left!important;
   }
}

If it will go too much to the left, add some margin-left to the first code.

Thanks

ISAR3 · June 2021

Woohow, Phil!

That did the job – many thanks! Mission accomplished.

Best regards,

Daniel

Logo position on mobile

Comments