Jump to content

How to change position and size of menu bar

Recommended Posts

Site URL: https://www.thelibertyproject.org/

Hey, there! Im very new to CSS and was wondering if there was a simple way to move the menu bar to the very top of the page (even above the logo/sm icons), and when I scroll down, I would like the entire header to minimise into the strip of the menu bar alone (this would be sticky, I'm guessing) (sample of what I'm talking about:https://www.zendaya.com/

Thanks for your help in advance, it would mean the world if I could get this sorted ❤️

Link to comment

Hello! If you only want to use CSS, you can do something like the following. This will make only the menu bar sticky on desktop, and the whole header will still be sticky on mobile. Anything more advanced than that will probably require custom JS code. Hope this helps, and let me know if you want some customization past this solution!

Copy & Paste this into Design > Custom CSS:

.header-nav { 
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 0;
    background-color: #3d4435;
    margin: 0;
}
.header-display-desktop { 
    padding-top: 43px; 
}
@media (min-width: 769px) {
    .header {
       position: relative !important;
    }
}

 

Edited by Caroline_Smith
Link to comment
5 hours ago, MadihaSyed said:

Hey, thanks so much! Did the trick xD Would you also be able to help me change the font of the nav bar? I had a custom brand font that I would like to use, and I'm not sure what class to assign it to!

Here is a very well-written blog post that walks you through how to add custom fonts to Squarespace written by Squaremuse. I've used these instructions in the past and it worked like a charm !

https://squaremuse.com/blog/how-to-upload-custom-fonts-squarespace

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.