Jump to content

Need to move the hamburger icon and give it some padding so it's not pressed against the side.

Go to solution Solved by tuanphan,

Recommended Posts

site: https://atotalfireprotection.com/

I already am using some custom CSS I got from you guys to make the header look like it does. I also put in a max-width break point (1110 px) because the Call For Free Quote button was covering some of the navigation menu at narrower resolutions. So there's a certain width where the site header won't convert to the mobile menu, but will replace the menu with a hamburger icon.

Here it is normal:

dasktop.thumb.png.4f00727dd8988531e91a34f2f1c40983.png

And here it is after the break point, before going to mobile view. I need that hamburger icon centered with the title/logo, and also it needs some padding so it's not pressed up against the edge.breakpointhamburger.png.04c1e0f818fb61b8bcbbce9a00f56013.png

Here is the some of custom css I'm using that you guys already graciously provided me with.

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    flex: 0 0 100%;
}
.header-layout-branding-center-nav-center .header-actions--right {
    flex: 0 1 15%;
    max-width: 0%;
}
.header-display-desktop {
    align-items: flex-end;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
    text-align: left;
}
@media screen and (max-width:1110px) {
 /* hide navigation */
    .header-nav {
    display: none;
}
/* Hide header button */
.header-actions {
    display: none;
}
/* show burger */
.header-burger {
  display: flex;
  
}
/* Show overlay mobile menu */
.header--menu-open .header-menu {
opacity: 1;
visibility: visible;
}
}

Thanks ❤️

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.