Jump to content

Hamburg Menu - CSS for adjusting

Recommended Posts

  • Replies 3
  • Views 917
  • Created
  • Last Reply

This is the code I used: The only issue I have is that when I click on the submenu,  the menu rolls to the left and you can still see the grey lettering over the images on the website. If you find a fix, I'd love to know what it is. 

//hamburger menu on desktop
/* 768 for tablet - desktop - 992 for desktop */
//hamburger menu on desktop

.header-burger { display:flex!important}
.header--menu-open .header-menu 
{opacity: .9!important;
  visibility: visible!important; 
  top: 0%; 
  left: 75%; }
.header-nav, .header-actions {visibility:hidden!important}

//media text resize
@media screen and (max-width: 960px) {
.header-menu-nav-item a {
    font-size: 24px!important;
  line-height: 24px!important;
  text-align: center!important;
 color: #000000;

.header-menu-nav-item a {
    font-size: 28px;
  line-height: 24px;
  text-align: left;
 color: #000000;

.burger-box div {
    display: visible;
    width: 50px;
    height: 32px;
    color: #ffffff!important;
    visibility: visible;
  .burger-box div {
    display: none;
.burger-box {
    background-image: url(https://image.flaticon.com/icons/svg/876/876207.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;

Link to comment


This topic is now archived and is closed to further replies.

  • 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.