Jump to content

Adjusting width of dropdown menu

Recommended Posts

Hi there, I was wondering can anyone help me with adjusting the width of the dropdown menu? In addition, how can I adjust 
to make the background of the dropdown menu transparent/different color?

I've tried research and finding on my own but I can't find anything! Currently I'm on version 7.1 so there isn't a specific template i think. My website isn't full done yet, but here it is www.lacylashes.com 

 

Here is what I mean, I have attached a photo

Thanks!

Screenshot 2019-11-18 10.41.30.png

Edited by kvn0221
Adding website
Link to comment

Use either this piece of code to your custom CSS.

Use the rgba color if you want to add transparency to the background, adjust the alpha value from 0 (transparent) to 1 (opaque).

If you want to use a solid color, use the bottom piece of code and replace the #FFFFFF to the hex color you wish to use instead.

/** TRANSPARENT BACKGROUND **/

.header-nav-folder-content {
    background-color: rgba(203,242,246,.6);
}

/** SOLID WHITE BACKGROUND **/

.header-nav-folder-content {
    background-color: #FFFFFF;
}

 

Link to comment
On 11/19/2019 at 2:07 AM, kvn0221 said:

Hi there, I tried these codes and it didn't affect the navigation bar at all 😞

 

Add !important at the end to the color code, it should work.

for transparent background:

.header-nav-folder-content {
    background-color: rgba(203,242,246,.6)!important;
}

for white background:

/** SOLID WHITE BACKGROUND **/

.header-nav-folder-content {
    background-color: #FFFFFF!important;
}

 

Edited by lu.diehl
typo
Link to comment
  • 4 months later...

Hi! This what I used to make dropdown have opacity, change color, be centered & change width

 

.header-nav .header-nav-item--folder .header-nav-folder-content {
    width: 60px;
}

/* Change dropdown menu background */
.header-nav-folder-content {
   background: rgba(255,255,255,0.5) !important;
}

.header-nav-folder-item {
    text-align: center;
}

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.