Horizontal Divider - Navigation Inline (Flex)

[Finlando]

Dear Support Team,

Is there a way to add a horizontal separator between the menu items? (

You can find the Inline Navigation under the slider (second section, atMedia 481px - 979px)

Thanks a lot in advance!

[basanta]

Hi Finlando,

Thanks for writing in and the URL!

Can you please add this code to the Element CSS of the inline navigation.

@media (max-width: 979px){
$el .x-anchor {
border-bottom: 1px solid #666 !important;
}
}

Hope this helps!

[Finlando]

Hi @basanta!

Thanks a lot for Your help.

There is no effect with this code snippet.

[paul.r]

Hi,

Please remve that css code and add this in Theme Options > CSS

.mini-menu-section-desktop-notebook .x-menu-inline>li {
    border-bottom: 1px solid #000;
}

.mini-menu-section-desktop-notebook {
   border-bottom:0;
}

Hope that helps

[Finlando]

Hi,

It works, but this is not acting like a separator. I need an hr tag.

Thanks a lot in advance.

[jade]

Hi Finlando,

Would you mind clarifying what you mean by you need an hr tag?

The code @paul.r provided will add a black border separator to the section that is targetted with the CSS selector.

If you want the separator thicker, you may adjust the value of the bottom border in the code.

Hope this helps.

[Finlando]

Hi Jade,

If we work with a bottom border for each single element, it kreates small gaps…:

This is beacaus I use a border-right with the same color as the background of the element (to prevent double borders). Thats why I need a separator between the 8 menu items.

[rad]

Hi @Finlando,

Since they are menu items, then you can’t add HR line between them. You can’t group them and another element outside <li></li>.

How about applying the border to <li></li> instead on <a>? I tried that and it seems to be better but yes, a lot to fix since it will be custom CSS as the border will not change automatically based on screen width. Though the gap is hardly noticeable in my view, it looks like the inset shadow effect that adds depth to the design.

You also have existing custom CSS, I like to check it without them (just disable it temporarily) as changing the border from <a> to <li> is not takin effect (just on 3 items). Still, I could only recommend a direction but I can’t offer full customization.

Thanks!