Menu questions

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
Harris

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.