Jump to content

Help with Changing Header

Recommended Posts

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?

 

 

Link to comment
  • Replies 10
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 

Link to comment
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

image.png.d33d91ad6b88adfad7228b5a0bc4ad93.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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%
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

Screenshot 2023-10-09 133352.png

Screenshot 2023-10-09 132919.png

Edited by RVanZ
Added Context
Link to comment

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.