Jump to content

Want to make dropdown menu always visible

Go to solution Solved by SaranyaDesigns,

Recommended Posts

Hi there, 

I'd like to make this website show one of the two drop down menus at all time (not just on hover) - so if a page on the Svenska side is active, the Svenska menu remains visible, and if a page on the English side is selected the English menu is showing. Is this possible?

https://www.isaholmgren.com/biografi

Screenshot attached of how I would like it to appear. 

Thanks for your help! 

Screen Shot 2023-11-15 at 1.12.05 PM.png

Link to comment

Thanks so much, I really appreciate the help! 

The code you shared made it so the Swedish side was always visible even if you were on an English page, so I modified it so they were both visible (by taking out "first-of-type"). But with both the original code and the change, the links in the menu that it shows aren't clickable unless you move the cursor over them from above (through the word Svenska or English) - if you just hover over the links, they aren't active. Do you know if there is a way around that?

https://www.isaholmgren.com/biografi

Link to comment
  • Solution

@feedbacksolo weird, ok try adding this as well to prevent them from overlapping each other:

.header-nav .header-nav-item--folder, .header-nav-folder-content {
	min-width: 100px !important;
}

and then update the original code I gave you to include the following:

.header-nav-list .header-nav-item:first-of-type .header-nav-folder-content {
	opacity: 0.7;
	pointer-events: auto;
}

 

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.