Jump to content

Hamburger menu in Mobile Does Not Work

Recommended Posts

Hello SquareSpace community,

This is my story: On Desktop, I wanted to have the hamburger menu instead of the regular menu to give a cleaner look to my site, and I wanted that hamburger to be positioned on the left side to keep the right upper corner clean for my call to action (Reserve Now).

Anyway, I read several forum entries until I finally found the CSS code that gave my desktop menu exactly the look I wanted (see code below)... but then I discovered that this line of code: .header-burger {position: absolute;} blocked the functionality of my Mobile menu 😪 ... but if I remove that line, my menu in Desktop goes to the right. I feel between the sword and the wall.

>> The URL of my unpublished site is: https://cow-spinach-t55c.squarespace.com

>> The viewer password is: Majahuitas2023$

 

// Mobile menu on Desktop//
.header-burger {position: absolute;}

.header-nav{
  display: none;
}

.header-burger {
  display: flex;
}

.header--menu-open .header-menu {
visibility: visible;
  opacity: 1;
}

@media screen and (min-width:800px) {
.header--menu-open .header-menu {
    bottom: unset;
    height: 100%;
    left: 0px;
    right: 70%;
    top: 0px;
}
.header-menu-nav-folder.header-menu-nav-folder--active {
    overflow: hidden;
}
.header-menu-nav-folder-content a {
    margin-top: 0px;
    margin-bottom: 0px;
}
}
.header-menu-nav-item a {
  font-size: 15px;
  letter-spacing: 2px;
  line-height: 4;
  text-align: left;
}
.header-title-logo { 
    text-align:center;
      margin-left:50%;
}


 

Link to comment
  • Replies 1
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

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.