Dot seperators menu items

[simonpurdon]

Hi, wish to replicate the dot seperators in the menu as in above: https://www.julian.com/

I’d also like to remove the double down chevron icon for the drop down, please advise how to do this?

I’d also like to move the dropdown beneath its father item. Currently when its hovered its below and to the left, I want all the text items to line up vertically with eachother.

Thanks for the help.

my site: https://simonblogs.com

[Prasant]

Hello Simon,

Thanks for writing in!

@simonpurdon

Hi, wish to replicate the dot seperators in the menu as in above:

Please add following CSS under X > Theme Options > CSS. It will also replicate the double chevron icon:

.x-navbar .desktop .x-nav li>a>span:after{content: "\f111" !important;}

@simonpurdon

I’d also like to move the dropdown beneath its father item. Currently when its hovered its below and to the left, I want all the text items to line up vertically with eachother.

Please add following CSS under X > Theme Options > CSS:

.masthead-inline .x-navbar .desktop .sub-menu {
    left: 0 !important;
    right: auto !important;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[simonpurdon]

Thanks, but this just replaced the chevron down with a big dot.

I want to:

1. Remove the chevron down arrow all together. I have resolved this.

2. Insert dot separators between each menu item as in the example here: https://www.julian.com/. The dots should ideally be sized the same as in the example, not big like the Font Awesome dot.

3. Is there a way to have the sub menu items line up side by side instead of being stacked vertically?

[jade]

Hi Simon,

@simonpurdon

Insert dot separators between each menu item as in the example here: https://www.julian.com/. The dots should ideally be sized the same as in the example, not big like the Font Awesome dot.

Please add this code in the Global CSS:

.x-navbar .desktop .x-nav > li:not(:last-child) > a:not(.x-btn-navbar-woocommerce):after {
    content: '•';
    position: absolute;
    right: 0;
}

@simonpurdon

Is there a way to have the sub menu items line up side by side instead of being stacked vertically?

Please try this code:

.desktop .menu-item.x-active>.sub-menu {
    display: flex;
}

.desktop .menu-item.x-active>.sub-menu li:before, 
.desktop .menu-item.x-active>.sub-menu li:after {
    display: none;
}

.desktop .menu-item.x-active > .sub-menu li a {
    padding-right: 15px;
}

Hope this helps.