Archived topic

mobile header image using off canvas menu

5 replies · Started by Cynthia on February 27, 2022

Viewing posts 1–6 of 6

February 27, 2022 at 1:35 pm #2135788

I am trying to get the mobile logo to display (proper proportion not stretched) like a full width header with the hamburger sitting below but I don't think I am adjusting these css elements correctly. I have off canvas set to mobile and mobile header turned on.

If I turn on "use navigation as header" then it messes up my desktop header/menu layout.

.navigation-branding img, .site-logo.mobile-header-logo img{
width:350px;
height:80px; << setting this value does nothing
padding:0px;
margin:0px;
}
.navigation-branding, .site-logo.mobile-header-logo{

}

.main-navigation .site-logo.navigation-logo img, .mobile-header-navigation .site-logo.mobile-header-logo img, .navigation-search input[type="search"]
{
height:80px; << this height value made it a bit more proportionate but I'd like to just use "auto"
}

February 27, 2022 at 1:49 pm #2135795

Hi Cynthia,

Can you remove all the CSS you added for the mobile logo first?

February 27, 2022 at 5:53 pm #2135958

OK I removed it. It is now different.

February 27, 2022 at 6:43 pm #2135988

Hi Cynthia,

Thanks for removing the current code. With that, here is a CSS code you can try:

.site-logo.mobile-header-logo {
    margin-left:0;
    width:100%;
    height:auto;
}

.site-logo.mobile-header-logo img.is-logo-image {
    width: 100%;
    height: auto;
    padding:0;
}

Hope this works! Kindly let us know how it goes! :)

February 28, 2022 at 1:10 pm #2137075

That worked. Thank you!!

February 28, 2022 at 5:09 pm #2137205

You’re welcome Cynthia! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. :)

This archived topic is closed to new replies.

Start building better websites today.