Jump to content

Changing the background color of drop-down navigation on Ready template

Recommended Posts

I can answer the first question right now, have to research the second one for some code

/* Change the navigation drop-downs

 colour */

 #topNav nav .folder-collection ul

li a {
   background-color:#F4F4F4;
 }

Create your own color here: https://www.hexcolortool.com/#000000 use the number in the left box with the #.....

You should be able to adjust space between links wih site styles, just be aware that this will adjust any drop down at the same time, like a category drop down, to target just your drop down menu on the nav bar will require code that I have not found yet. 

https://support.squarespace.com/hc/en-us/articles/205816038-Styling-navigation

Edited by derricksrandomviews
Link to comment
6 minutes ago, djm said:

@tuanphan Sure thing. Here it is:

URL: https://nomadmassage.squarespace.com

PW: t6nQ=9Ln

Add to Home > Design > Custom CSS

.subnav {
    background: red !important;
}
.subnav div {
    padding-bottom: 20px !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi @derricksrandomviews

Thanks for this.

1. Unfortunately the code is not working for me. This is what I inserted into Custom CSS:

#topNav nav .folder-collection ul
li a {
   background-color: #E3EDEA;
 }

Is there something I’m missing?

2. I had tried this before, too. But the site style can only change the main navigation item spacing, not the spacing of the items inside the drop-down.

Link to comment
4 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS


.subnav {
    background: red !important;
}
.subnav div {
    padding-bottom: 20px !important;
}

 

So good. This both works perfectly. Thanks @tuanphan.

Just noticing another issue: some words are cut off. Any way of expanding the navigation width? Reducing the font size doesn’t help here...

Link to comment
18 hours ago, djm said:

So good. This both works perfectly. Thanks @tuanphan.

Just noticing another issue: some words are cut off. Any way of expanding the navigation width? Reducing the font size doesn’t help here...

Just checked quickly. Increase width seems time-consuming.

You can use this code to solve.

.folder-toggle~.subnav div span {
    word-break: break-word;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
13 hours ago, tuanphan said:

Just checked quickly. Increase width seems time-consuming.

You can use this code to solve.


.folder-toggle~.subnav div span {
    word-break: break-word;
}

Thanks. This works. But it breaks at really bad points. The words are in German. Any way around this?

Link to comment
11 hours ago, djm said:

Thanks. This works. But it breaks at really bad points. The words are in German. Any way around this?

Add this CSS

@media screen and (min-width:901px) {
.nav-open .sidetray-wrapper {
    min-width: 900px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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.