Move Desktop Hamburger Menu Further Left

Hi,

I would like to move the hamburger menu so it's central to the pink side block.

Also, is there a way to make the lines of the hamburger menu slightly thicker?

Password: Password123

Thanks!

Can you share your website URL? What code did you use for the menu?

Hey,

The URL is: https://moose-banjo-8fc4.squarespace.com/

 Password123

The code I've used on the site so far is:

// Hamburger Menu for desktop //
@media screen and (min-width:768px) {
 /* 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;
}
}

// Header - Show social icons //
.header-actions.header-actions--right {
    display: flex !important;
}

.header-nav {visibility:hidden!important}
  
  .header .header-burger {
    order: 1 !important;
}

.header-title-nav-wrapper {
    order: 2;
}
.header-actions.header-actions--right {
    order: 3;
}

  .burger-inner>div {
      background-color: #e82a2a
      !important;
  }

.header-menu-bg {background: #ede0c7!important;
}

//Hamburger Menu Text//
.header-menu-nav-item a {
    color: #e82a2a!important;
}

//Hamburger Menu Socials//
.header-menu-actions a {
    color: #e82a2a!important;
}

.header--menu-open .header-menu a {
  margin: 0;
  padding: 10px 20px !important;
  line-height: 1 !important;
}

// Shrinking Logo On Scroll - 7.1 //

.header.shrink img {
    max-width: 120px;
    transition: all 0.2s ease-in-out
}

.header img {
    transition: all 0.2s ease-in-out
}

section[data-section-id="63fe4ff991a66f3ef8935a4e"]{
  background-color:#f8b7b7;
  @media(min-width:767px){
    .section-border{
      width:90%;
      margin-left:10%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }
  }
  @media(max-width:767px){
    display:block;
    .section-border, .content-wrapper{
      position:relative;
    }
    .section-border{
      height:200px;
    }
  }
}

Try adding and adjusting this Custom CSS:

@media only screen and (min-width:768px) {
  .header .header-announcement-bar-wrapper {
    padding-left:0vw;
  }
  .header .header-burger {
    width: 10vw;
  }
}

Depending on how you have the website set up you may want to target this CSS to just the homepage.

Let me know if that works for you.

@Ziggy That's worked perfectly!

Thank you so much 🙂