Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Secondary navigation header icons


Question

Site URL: https://tmforwomen.squarespace.com/

Hello, I have used the below code to add icons next to a couple of secondary navigation links I have in my header. I would like to change the 'Australia' link to a folder in order to have some drop down options, however when I have tried to do so, the icons get all messed up. Please help and thank you 🙂 

.Header-nav--secondary .Header-nav-inner {
  position: relative;
  margin-left: 0px!important;
  a:first-child:before {
    content: '';
    width: 30px;
    height: 35px;
    position: absolute;
    background: url(https://static1.squarespace.com/static/604c1cc6a735435de1a89915/t/6115de1730ff665c4ccd1a61/1628823064550/trancendental-meditation-for-women-australia-08.jpg);
    margin-left: -35px;
    background-size: contain;
    top: 1px;
  }
  a:last-child:before {
    content: '';
    width: 23px;
    height: 15px;
    position: absolute;
    background: url(https://static1.squarespace.com/static/604c1cc6a735435de1a89915/t/611626f4b2b060229a5c36cd/1628841716883/Australia_30_20_s+%281%29.png);
    margin-left: -33px;
    background-size: contain;
    top: 5px;
  }
}

How it should view

This is my aim (Australia here is a link to another page - I want to change this part to a folder)

 

Australia needs to be flag

Australia should be the flag icon.

 

Icons should not be seen in this dropdown

Icons should not be in the drop down.

Link to comment
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...