Archived topic
Header Button and logo styling
5 replies · Started by racheljohn on January 26, 2021
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
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;
}
}
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?
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;
}Thanks so much for all the help!
No problem. Glad to be of any help. :)
