[Resolved] Header Button and logo styling

[racheljohn]

I am trying to add a custom button only on mobile next to(not in) the mobile nav icon and having trouble figuring out how to do that. and the second issue is I can’t seem to get the mobile logo to be any bigger ( its tiny) I don’t want it a whole lot bigger but still want it to be a little more visible

[Elvin]

Hi there,

You can create a Hook Element or a Block Element to place your button in and use generate_inside_mobile_header hook to place your button beside the mobile nav icon.

You can adjust the logo’s size on mobile by using this CSS:

@media(max-width:768px){
.main-navigation.mobile-header-navigation .site-logo.mobile-header-logo, .main-navigation.mobile-header-navigation .site-logo.mobile-header-logo img {
height: 95px;
}
}

[racheljohn]

Worked great! one last thing I messed with aligning right but its not working and I just centered it for the moment but would love for it to be right next to the mobile menu icon?

[Elvin]

Worked great! one last thing I messed with aligning right but its not working and I just centered it for the moment but would love for it to be right next to the mobile menu icon?

You can add in a header-btn class to the Container Block you’ve added within the Block Element.

You then add this CSS:

.header-btn{
margin-left:auto;
}

As for its vertical alignment, you’ll have to edit that within the Container Block’s settings.

We then try to reduce the padding for the menu icon with this CSS:

#mobile-header.main-navigation .inside-navigation button.menu-toggle {
    padding: 0 20px;
}

[racheljohn]

Thanks so much for all the help!

[Elvin]

No problem. Glad to be of any help. 🙂

[Author]

Posts