Stop Multiple Lines in Dropdown Menu on Squarespace 7.1

Did you create a website on Squarespace 7.1, and then realize that your dropdown menu items have long titles that split into multiple lines? Here’s how to fix that.

Squarespace Stop Multi-Line Menu.jpg

The CSS

Add in the CSS to DESIGN > CUSTOM CSS. It should automatically resize all dropdowns for you.

/* I like adding background colors to my dropdown but you can delete this line */
.header .header-layout-nav-right .header-nav .header-nav-item--folder .header-nav-folder-content{
  background-color: #f3f5fe;
}

.header-nav .header-nav-item--folder .header-nav-folder-content .header-nav-folder-item {
    white-space: nowrap !important;
}
Vigasan

Hey! I’m Vigasan and I love the Internet. I have a Bachelor of Science in Computing Systems with a double specialization in Computer Science and Software Engineering. I’ve been creating websites and working with social media since 2014 and have created over 200 Squarespace websites so far.

https://www.adlyticmarketing.com/
Previous
Previous

Floating Social Media Icons on Squarespace

Next
Next

Centered Text on Full-Width Slider Section on Squarespace 7.1