Top Bar menu items

I have a menu positioned on the topbar-r position. How can I add a separator ( | ) to show between the menu items?

Thanks.

You can try this:

.topbar-l .nav-item + .nav-item {
    border-left: 2px solid #AA1424;
}

.topbar-l .nav-item {
    padding: 0 10px;
}

and adjust the padding + color as you wish.

Works like a charm! Thanks.

You're welcome 😉

Hi Saguaros,

I have another enquiry on the top bar position.

I have a menu positioned on the topbar-l and the search form positioned on the topbar-r position, as shown below.

Now, when I go to the mobile view, the menu disappear while the search form still shows.

How can I make the topbar-l position show on the mobile view please?

You can access Layout settings in template >> edit the topbar block and remove the d-none class of the topbar-l element:

I think it will require some custom style for this part when you enable it on mobile view 🙂

YEEES! It shows! Thanks.

Great to hear that 😉