Add Bullets Between Inline Navigation

[piexec]

How could I add bullets colors #333 in between each menu link in the Inline Navigation Element?

[nabeel]

Hi there,

Thanks for writing in! You can enable the Graphic option for the menu items and change the base color to #333 (see screenshot)

To change the icon of each menu item, go to Appearance > Menus, expand each menu item and select Icon Primary from the dropdown list (see screenshot)

Hope this helps!

[piexec]

Yes, but I only want the bullet in between the menu items. Not to the left of every menu item. And as I add menu items, I’d love it if a new bullet would just appear every time through CSS and not manually adding it.

[ruenel]

Hello There,

Thank you for the clarifications. To resolve your issue, you can make use of this css code:

.x-navbar .desktop .x-nav > li:after {
    content: "\2022";
    position: absolute;
    top: 30%;
    right: 0;
    font-weight: bold;
}

.x-navbar .desktop .x-nav > li:last-child:after,
.x-navbar .desktop .x-nav > li:last-of-type:after {
    display: none;
}

Please let us know if this works out for you.

[piexec]

Actually its in the footer. See below video.
Can you also see what I’m doing wrong with regards to my my menu doesn’t adapt when it goes to mobile.

Thanks in advance!

[ruenel]

Hello There,

Do you want something like this?

You can make use of this code instead:

.x-bar-footer .x-menu > li {
    position: relative;
}

.x-bar-footer .x-menu > li:after {
    content: "\2022";
    position: absolute;
    top: 20%;
    right: -5px;
    font-weight: bold;
}

.x-bar-footer .x-menu > li:last-child:after,
.x-bar-footer .x-menu > li:last-of-type:after {
    display: none;
}

Please check your site now.

[piexec]

AWESOME!!!

Now what am I doing wrong with the mobile version? Why does the menu width not adapt to mobile size? See video below:

[christopher]

Hi there,

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

You will need to use another element in the Footer Builder to have a menu which adapts to the mobile view. I suggest that you use one of the Navigation Collapse or Modal elements in mobile view and use the hide during breakpoint option to hide one in desktop and show one in the mobile and vice versa.

Thank you.