MadihaSyed Posted March 12, 2022 Share Posted March 12, 2022 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
Caroline_Smith Posted March 12, 2022 Share Posted March 12, 2022 (edited) 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 March 12, 2022 by Caroline_Smith Feel free to email me with any customization inquiries or questions you may have! Free Squarespace Resources: DevTools Minicourse, 11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator Link to comment
MadihaSyed Posted March 13, 2022 Author Share Posted March 13, 2022 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! Link to comment
Caroline_Smith Posted March 13, 2022 Share Posted March 13, 2022 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 MadihaSyed 1 Feel free to email me with any customization inquiries or questions you may have! Free Squarespace Resources: DevTools Minicourse, 11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator Link to comment
MadihaSyed Posted March 13, 2022 Author Share Posted March 13, 2022 Thanks a ton! Works like a charm xD Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment