- This topic has 20 replies, 3 voices, and was last updated 6 years, 11 months ago by
.
-
Posts
-
Hello,
Two questions about the menu.1. How can I add dashes between the menu items in main horizontal menu?
2. How can I call the (ajax) search functionality by clicking in an icon placed in the header widget (but not in the menu)?Thanks
HarrisLead Developer
Hi there,
1. You could try something like this:
.main-navigation .main-nav > ul > li:not(:last-child) a:after { content: " - "; position: relative; right: -20px; }2. I don’t believe this is possible, unfortunately.
Thanks Tom!
You’re welcome 🙂
Hello,
To go a little bit further with that, can the dashes be replaced with a small image or an icon and how?
Thanks
HarrisCustomer Support
Hi there,
are you using any font icon libraries like Font Awesome?
Yes I am using font awsome but it does not include the icon I want to use.
So I will need to add either a custom svg or a png.The content property supports images e.g:
content: url(image.jpg);link to it an appropriate sized image.Thanks David!
I guess I will have to properly adjust the
right: -20px;
in order to match it with the image size.Can I somehow position the image in order to vertically adjust it with the text? Or is the “position relative” enough?
You should be able to position it quite easily. Any chance you can show us what you have so far?
Hello Tom,
Its not online yet. I will update the topic once it will be.
Thanks a lot!
Hello,
I added the image. Can you please help me position it like that
https://i.gyazo.com/d9fb4ac2772293f3635d9adfd189b52d.png
related to the menu items (text)?Thanks
You can try some
margin-top: -10px;on the content property to move them up.Ηello,
Is that the selector I have to add the margin to?
.main-navigation .main-nav > ul > li:not(:last-child) a:after(it’s the one containing the content property)
If so, I am adding it like that but it doesn’t seem to move (I actually want to move it down).
@media (min-width: 768px) { .main-navigation .main-nav > ul > li:not(:last-child) a:after { margin-top: -20px; content: url(https://deyaph.gr/deyaph/wp-content/uploads/2019/04/Dash.png); position: relative; right: -11px; } }Instead try using
top: 10px;– and yes in that CSS.
- You must be logged in to reply to this topic.
