[Resolved] Menu questions

[Harris]

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
Harris

[Tom]

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.

[Harris]

Thanks Tom!

[Tom]

You’re welcome 🙂

[Harris]

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

[David]

Hi there,

are you using any font icon libraries like Font Awesome?

[Harris]

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.

[David]

The content property supports images e.g: content: url(image.jpg); link to it an appropriate sized image.

[Harris]

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?

[Tom]

You should be able to position it quite easily. Any chance you can show us what you have so far?

[Harris]

Hello Tom,

Its not online yet. I will update the topic once it will be.

Thanks a lot!

[Harris]

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

[David]

You can try some margin-top: -10px; on the content property to move them up.

[Harris]

Η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;
}
}

[David]

Instead try using top: 10px; – and yes in that CSS.

[Author]

Posts