In this Squarespace tutorial, In this video I show you how to create a cool menu folder drop down effect that highlights the folder navigation items on hover and changes their color in Squarespace 7.1 website.
The codes from this tutorial are below but a few important things to note:
This is for 7.1 sites, not verison 7! If you are on a brine site, try this tutorial instead:
There is more than one way to code a site, this is just my version :)
CSS changes the look of a site but not the way it works.
This code won’t “break” your site, and if you don’t like the look of it, just delete it and everything will go back to normal.
so, check this video step bt step until the end.
CSS Custom :<< All Square >>
.header-nav-folder-content {"style"}
--> style
1. background-color:#00FF00!important;
2. background:linear-gradient(to bottom, blue, pink);
3. border-radius:10px;
4. text-align:center!important;
5. border: .5px solid pink;
6. box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
7. padding:1.5rem!important;
===================================
CSS Custom :<< Text Square >>
.header-nav-folder-content a {"style"}
--> style
1. border-bottom:.5px solid #59f9f9
2. padding-bottom:1rem!important;
===================================
CSS Custom :<< Hover Square >>
.header-nav-folder-content a:hover {"style"}
--> style
1. border-bottom:.2px solid #59f9f9;
2. padding-bottom:0.3rem!important;
3. padding-top:0.5rem!important;
4. padding-left:0.4rem!important;
0 Comments