Help with Changing Header

Hi there, I am trying to create a dynamic Header on my website to look similar to the one attached, Essentially I want to have 2 headers, One when you are at the top of the page the shows the list of links with the full logo, and then when you scroll down it becomes a smaller logo and the links disappear into a clickable button which brings the links back up. the default options in squarespace are not very dynamic and I can't get any code to work for it, I have seen something about editing the JSON but that would mean messing with the developer options. 

Is there any way to achieve this with squarespace?

It looks complex, you can consider a simpler version

Before scroll: Show Logo + Navigation list

Scroll down: Show smaller logo + Change navigation to burger icon (click burger icon >> Show burger overlay menu, same as mobile, but we will reduce menu width)

What do you think? If you agree, I can give the guide

Yeah that sounds like exactly what I am trying to do that would be great

On 9/25/2023 at 9:58 PM, RVanZ said:

Yeah that sounds like exactly what I am trying to do that would be great

You can share your site url, we can give code for your case

www.midwestconstruction.co.uk

password: testingtesting123

Thanks so much

On 9/27/2023 at 10:50 PM, RVanZ said:

www.midwestconstruction.co.uk

password: testingtesting123

 

Thanks so much

Thank you. I see current layout, nav items on both sides of logo, when scroll down, still keep logo center + change nav to burger and burger on right of header or left?

I have it like this at the moment cos I couldn't get the layout right, But it would look good with the current layout if the logo went to the left when you scroll down and then into a hamburger on the right of the header

Is that possible? 

Thanks 

On 10/2/2023 at 3:55 PM, RVanZ said:

I have it like this at the moment cos I couldn't get the layout right, But it would look good with the current layout if the logo went to the left when you scroll down and then into a hamburger on the right of the header

Is that possible? 

 

Thanks 

Can you enable this Fixed Header? Then we can test code easier

I have done that now, Thanks

Add this code to Website Tools (under Not Linked) > Custom CSS

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

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

.shrink .header-nav,.shrink .header-actions {
    visibility: hidden !important
}
@media screen and (min-width: 768px) {
.shrink .header-menu {
        left:unset;
        width: 25%
    }
}

It works well, The only thing is that when you click through the options with a nest it pushes the original options across the screen, I am thinking I can increase the width of the menu to accommodate the menu coming across - But Is there a way to change the color of the menu so I can make it semi transparent so it doesn't overtake everything on the screen?

Also, When I am in a nested list and I click another nested list without clicking back - it puts one on top of the other, Is there way to make the first nest disappear when you click the next one?

Is it also possible to make the links in the menu a bit smaller?

Thanks so much for your help