Align coded mobile menu icon with site logo in site header

I have created a custom hamburger and forced that menu on desktop too which so far works as I would like, however, the actual icon is sitting too far down the site. I would ideally like it to be in line with the logo but it doesn't show a block ID or section ID when using the SS ID finder. Anyone have any ideas how I can get it to line up?

Can you share your website URL? Thanks!

@Ziggy sorry, I thought it was included. 

https://maroon-daffodil-yrle.squarespace.com/

Can you set and share a site wide password too? Thanks!

https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords

@Ziggy I have changed the URL: https://ftws-progress.squarespace.com/ 

password: happy123

Thank you

Try this Custom CSS:

.burger-box {
    width: 120px;
    height: 120px;
}

The width may well override the 100px width property you already have, but I think the 120px works better.

Let me know if that works for you!

Thank you so much @Ziggy You are a star!

@Ziggy that worked amazing but I have since noticed when clicking on the hamburger icon that my menu is non-existent and I have a scroll bar built into the slide in menu section. Would you happen to know why? 

No, I'm not sure, the width seems to be set to 40%, which might be the problem.

@media screen and (min-width: 768px) {
 .header-menu {
    width: 100%;
 }
}

@Ziggy changing to 100% didn't help either. It still doesn't show the navigation links and has the scroll bar still to the right. 

What code did you use to achieve the mobile menu on desktop?

24 minutes ago, Ziggy said:

What code did you use to achieve the mobile menu on desktop?

/* Force burger on desktop */
  .header-burger {
    display: flex !important
}

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

.header-nav,.header-actions {
    visibility: hidden !important
}
@media screen and (min-width:768px) {
  .header-menu {
        right:unset;
        width: 100%;
    }
}
// CUSTOM HAMBURGER
/* Non-active burger */
.burger-inner:after {
    content: "";
    background-image: url(https://static1.squarespace.com/static/64274acdbbbb8e1c6b6d2120/t/642ab7fb3cda6b0a2c49f422/1680521211290/%2C%2C.png);
    background-size: 120px;
    background-repeat: no-repeat;
    background-position: right;
    background-color: transparent !important;
    display: block;
    width: 140px;
    height: 120px;

}
.burger-inner>div {
    display: none !important;
}
/* Burger when active */
body.header--menu-open .burger-inner:after {
    background-image: url(https://static1.squarespace.com/static/64274acdbbbb8e1c6b6d2120/t/642ab7fb3cda6b0a2c49f422/1680521211290/%2C%2C.png) !important;
}
.burger-box {
    width: 120px;
    height: 120px;
}
@media only screen and (min-width:768px) {
  .header .header-announcement-bar-wrapper {
    padding-left:2vw;
  }
  .header .header-burger {
    width:10vw;
  }
}

Can you re-share the password?

password is: happy123

Password no longer works, which is why I was asking for it again, can you check it and reshare the password? Thanks.

@Ziggy I have just reset it again to happy123. It should work. If it doesn't let me know and I will change it to something else.

Gemma 

Thanks.

I can't see any navigation links on the page or in the code, how many do you have in the pages menu?

@Ziggy 5 Including the homepage and blog, they did use to show up but I'm not sure what happened.

Sorry to confirm, but the links are definitely in the Main Navigation section in the Pages menu?

26 minutes ago, Ziggy said:

Sorry to confirm, but the links are definitely in the Main Navigation section in the Pages menu?

@Ziggy - Nope. I am an absolute muppet, so sorry! They were in the not linked section! 

Though, I do still seem to have that scroll bar on the far right which I can't seem to get rid of.

1 hour ago, FTWSGEM said:

Though, I do still seem to have that scroll bar on the far right which I can't seem to get rid of.

You can try adding this Custom CSS:

.header-menu-bg {
    overflow: hidden;
}

@Ziggy doesn't seem to have made a difference 

Maybe with this:

.header-menu-bg {
    overflow: hidden !important;
}

On 4/7/2023 at 10:22 AM, Ziggy said:

Maybe with this:

.header-menu-bg {
    overflow: hidden !important;
}

No, this still doesn't work 😞