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
  • Views 631
  • 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

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.