Jump to content

customise drop down menu for secondary navigation links when menu is vertically stacked

Recommended Posts

hi there, i've achieved a vertically stacked menu but i'm struggling to achieve the desired 'drop down' secondary menu look. 

attached is what it currently looks like, and the desired look.

 

- remove current moon icon only on the drop down folder menu links and replace with the small icon circle style: https://www.thestyledsquare.com/navigation-circle-hover-effect-plugin

- remove small icon circle from the main menu menu links

- currently the box won't stay active if you move the cursor away from 'offerings'

- offerings link hover stroke effect to extend to the box

www.moonlitdesign.uk/home-old

 

CURRENT CODE:

 

//navigation moon icon//

/*BASIC STYLES FOR ALL LINKS*/
.header-nav-item a::before,
.header-menu-nav-item a::before {
  content: '';
  background-size: contain !important;
  background-repeat: no-repeat !important;
  flex-direction: column;

}

.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item:nth-child(1) a::before {
  background: url('https://static1.squarespace.com/static/61aa04c639b60c4711dd2d19/t/65e0b869f4fe0936cab39abb/1709226089614/Asset+23.png');
    height:25px;
  width: 10px;
}


//////

// CIRCLE NAVIGATION HOVER EFFECT

.header-nav-item {
a {
color: #2b2b0d !important;
&:before {
content: '○ ';
font-size: 1.1em;
}
&:hover:before {
content: '● ';
}
 
}
}

///////

//drop down menu styling//

/* Folder dropdown style */
.header-nav-folder-content {
    background: #E8E8DD !important;
    border-radius: 15px;
  border: 1px solid #1d1d1d;
}


.header-nav-folder-content {
    left: 100px !important;
  margin-top:-30px;
}

//dropdown menu hover and active //

.header-nav-folder-item--active .header-nav-folder-item-content {
  background: none !important;
  text-decoration:line-through;
}

///////


//menu hover effect//

.header-nav-item--active a:hover {
text-decoration:line-through;
  
}


.header-nav-item--active {text-decoration:line-through;

//active state//

div.header-nav-item--active a {
    background-image: none !important;
}

///////
 

 

 

image.png.c1a32f4b04ec01bc430ee6e2d159dad3.png

image.thumb.png.0628bb0886f153e1866e4602227b5656.png

Edited by moonlitdesign
Link to comment
  • Replies 0
  • Views 996
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

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.