Jump to content

Secondary navigation header icons

Recommended Posts

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
  • Replies 1
  • Views 402
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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.