I would like to add a flag icon behind a menu item text in a Salient menu. Please click the hamburger menu icon to display the dropdown/offscreen menu and see my problem. I am currently trying to implement a spanish flag icon behind the menu item 'Folleto técnico'.
To achieve that : - i created a custom css class : esflag
- its code is :
.esflag { height: 10px; width: 15px;
content:url(":../es.png ");
display: block;
}
- it deletes the menu item text in place : Folleto técnico, and only displays the spanish flag icon.
Try adjusting the CSS to this and let us know how it goes. Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Hello.
I would like to add a flag icon behind a menu item text in a Salient menu. Please click the hamburger menu icon to display the dropdown/offscreen menu and see my problem. I am currently trying to implement a spanish flag icon behind the menu item 'Folleto técnico'.
To achieve that :
- i created a custom css class : esflag
- its code is :
.esflag {
height: 10px;
width: 15px;
content:url(":../es.png ");
display: block;
}
- it deletes the menu item text in place : Folleto técnico, and only displays the spanish flag icon.
What can i do/add to make this work ?
Attached files: Screenshot 2023-08-02 181331.png
Hello,
There thank you for reaching out to us.
Try adjusting the CSS to this and let us know how it goes. Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.esflag:after { height: 10px; width: 15px; content:url(":../es.png "); display: block; }Alternatively, you can add an icon in the salient menu settings as shown in this guide https://themenectar.com/docs/salient/salient-menu-options/.
I hope that all helps.
Thanks,
I had trouble making these :before and :after work on my end.
It seems working fine now. Thx for the quick answer !
Closed.