Jump to content

Five Template - Customise Navigation Item

Recommended Posts

Site URL: https://aircare-systems.com/

I hope someone can help. I am adding multiple languages to my Five template but want to change something on the main navigation where the language options are. At the moment I have a folder marked PL on the navigation. This folder has the drop downs to the translated pages. I either want to replace the text with an icon png I have drawn which highlights the PL, or change the background of the PL text to be a red square.

Can anyone advise please? I have spent most of the day searching the web but the code I have injected just doesn't work!

Link to comment
  • Replies 4
  • Views 373
  • Created
  • Last Reply

Top Posters In This Topic

Try adding to Design > Custom CSS

nav#main-navigation>ul>li:nth-child(7) a {
    background-color: red;
    color: white !important;
}
nav#main-navigation>ul>li:nth-child(7):before {
    background-image: url(https://cdn.pixabay.com/photo/2021/12/11/07/59/hotel-6862159__340.jpg);
    display: inline-block;
    background-size: contain;
    content: "";
    width: 30px;
    height: 30px;
    background-position: center center;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
8 hours ago, tuanphan said:

Try adding to Design > Custom CSS

nav#main-navigation>ul>li:nth-child(7) a {
    background-color: red;
    color: white !important;
}
nav#main-navigation>ul>li:nth-child(7):before {
    background-image: url(https://cdn.pixabay.com/photo/2021/12/11/07/59/hotel-6862159__340.jpg);
    display: inline-block;
    background-size: contain;
    content: "";
    width: 30px;
    height: 30px;
    background-position: center center;
}

 

Thank you so much, I have tried both and prefer the first style. However, I would prefer the drop down to stay as the original, ie not blocked in red. Is there way of simply having the little red box as a background to the PL but everything else staying as it was?

Link to comment
On 1/5/2022 at 5:46 PM, CWTurkey said:

Thank you so much, I have tried both and prefer the first style. However, I would prefer the drop down to stay as the original, ie not blocked in red. Is there way of simply having the little red box as a background to the PL but everything else staying as it was?

Use this new code

nav#main-navigation>ul>li:nth-child(7)>a {
    background-color: #c00000;
    color: #fff !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.