Five Template - Customise Navigation Item

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!

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;
}

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?

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;
}

6 hours ago, tuanphan said:

Use this new code

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

 

Thank you so much, that is perfect, just how I wanted it to look, you are a star!