Jump to content

Hamburger Menu Code Help

Recommended Posts

Site URL: https://www.reachnaz.com

I need my hamburger menu to be white. It is currently black. This is the code that I am using for the menu. What do I need to change or add to make the menu white and not black.

.header .header-burger{display:flex} .header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 100;
visibility: visible;
width: 30%;
margin-left: 70%;
box-shadow: -5px 5px 15px #000}
div.header-menu-nav-item a {
    font-size: 20px !important;
    padding: 10px;
}
.header-menu-nav-item {line-height: 20px!important;}
@media screen and (min-width:992px) {
.header-menu-actions {
    justify-content: center !important;
}
.header-menu-cta {
    position: relative;
    top: -100px;
}
}
@media screen and (max-width:991px) {
.header--menu-open .header-menu {
    width: 100% !important;
    margin-left: 0 !important;
}
}

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

I believe that the code turned my whole header white. I have my header invisible with a background video playing behind it, so I have the logo and hamburger menu white. So, I need the header completely transparent and only the logo and hamburger menu white.

Edited by wbbosworth
Link to comment

That code affect burger menu only. If it affect header, you should check all code, maybe you place code in wrong position, caused some other code didn't work properly

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

This is the code that is in CSS:

 

body:not(.header--menu-open) .burger-inner>div {
    background-color: white !important;
}
.header .header-burger{display:flex} .header-nav, .header-actions {display:none}
.header--menu-open .header-menu {
opacity: 100;
visibility: visible;
width: 30%;
margin-left: 70%;
box-shadow: -5px 5px 15px #000}
div.header-menu-nav-item a {
    font-size: 20px !important;
    padding: 10px;
}
.header-menu-nav-item {line-height: 20px!important;}
@media screen and (min-width:992px) {
.header-menu-actions {
    justify-content: center !important;
}
.header-menu-cta {
    position: relative;
    top: -100px;
}
}
@media screen and (max-width:991px) {
.header--menu-open .header-menu {
    width: 100% !important;
    margin-left: 0 !important;
}
}

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.