Logo position on mobile

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

Comments

  • 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

  • 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

  • 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

  • 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

  • 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

  • Woohow, Phil!

    That did the job – many thanks! Mission accomplished.

    Best regards,

    Daniel

Sign In or Register to comment.