[Support request] Mobile Logo Size and Placing navigation to right of Logo

Home Forums Support Mobile Logo Size and Placing navigation to right of Logo

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #972410
    Gabriel

    I am struggling with figuring out how to adjust the size of my mobile logo. It is simple and straight forward for the main header image, but does not seem to be so for the mobile. Please help.

    Also, I am trying to get my logo to sit to the left of my navigation bar. I have tried to do this in the navigation menu… tried using header as navigation, which would work, but I can’t increase the size of my logo. Tried going to Elements and creating a header there, but can’t figure out how to adjust the placement of my navigation, and I don’t want it way at the top of the screen.

    Thanks,

    Gabriel

    #972462
    David
    Staff
    Customer Support

    Hi there,

    Logos uses in the Mobile Header and in desktop Navigation as header are defined by the height of the menu items that is set in the customizer.

    Alternatively you can use this CSS to set a specific height just for the logo:

    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 80px;
    }

    For the desktop you can either use the Navigation as Header and increase the Menu Item height ( Or i can provide some CSS ). Or you can set the Customizer > Layout > Primary Navigation –> Navigation Location to Float Right.

    #972533
    Gabriel

    When I am adding CSS as above, do I just stack that below the other CSS I have pasted in below Simple CSS or Additional CSS?

    #972534
    David
    Staff
    Customer Support

    Thats correct add it to the very bottom of the stack as standard, if it doesn’t work try adding it to the top of the stack which would suggest that there is some broken CSS in your stack. If some CSS is not written correctly, any CSS below it may not work.

    I suggest that you choose either Simple CSS or Additional CSS to add all of your CSS too – don’t split it between the two.

    Simple rule with CSS – it stands for Cascading Style Sheets. So if there are two CSS rules the one below it will overwrite the one above it eg.

    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 80px;
    }

    Followed by:

    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 180px;
    }

    The second one will overwrite the first.

    #972535
    Gabriel

    Very helpful. Thanks. I will give it a go.

    #972556
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.