[Pbalazs89Participant]

Hi there,

I’m working on a site and would like to have a similar menu:

http://demo.oceanthemes.net/archi/header-bottom-light/

here, there are these orange dots between the nav items. Is there a way to have this effect with X?

Thanks!

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.x-navbar .desktop .x-nav>li:after {
    font-family: "FontAwesome";
    content: "\f111";
    position: absolute;
    right: -3px;
    top: calc(50% - 8px);
    font-size: 8px;
}

Hope that helps.

[Pbalazs89Participant]

Hi there, I added the code but unfortunately it does not make anything happen. Do I need to install some sort of plugin, or should this work out of the box?

[JadeModerator]

HI there,

Would you mind providing the URL of your site so that we can check it?

Thank you.

[Pbalazs89Participant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

Please update your code in customizer to :

.x-navbar .desktop .x-nav>li>a>span {
border:none;
}

.x-navbar .desktop .x-nav>li:after {
    font-family: "FontAwesome";
    content: "\f111";
    position: absolute;
    right: -3px;
    top: calc(50% - 8px);
    font-size: 8px;
}

Hope it helps.

[Pbalazs89Participant]

Thank you so much!

[ChristopherModerator]

You’re welcome.

[Pbalazs89Participant]

Sorry, one more quick question:

How do I remove the last dot, after kapcsolat? (there is no need for one after the last menu item)

Thanks!

[LelyModerator]

Hi There,

Please use this custom CSS to remove the dot at the last item in the menu:

.x-navbar .desktop .x-nav>li:last-child:after {
    content: '';
}

Hope this helps.

[Pbalazs89Participant]

Great thanks! I need to up my game. 🙂

[LelyModerator]

You’re welcome!

Cheers!

[Author]

Posts