Dot between menuitems

Hi Wilfred,

Not quite sure what you meant by "the selected item is an image"?

Try this CSS for the dot and the border:

@media (min-width: 769px) {
    .main-navigation .main-nav > ul > li:not(:last-child) {
        position: relative;
    }

    .main-navigation .main-nav > ul > li:not(:last-child) > a:after {
        content: " \25CF";
        display: block;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 10px;
    }
    .main-navigation {
        border-top: 2px solid #000000;
        border-bottom: 2px solid #000000;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Can you provide a link to your site if this doesn't work?

Thanks for your reply. The border-top/border-bottom is a better solution then the background image I used. But the first solution didn't work. I show you what happened:

I use a background image for Navigation Item Current and Navigation Item Hover (that's what I meant with 'the selected item is an image'). So the character needs to be between the menu items (don't know if it's possible)

So those menu items are actually images? If so why not inserting as normal menu items?
The code should work if you are setting the menu up normally:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/

Can you provide a link to your site or it's on local host?

No menu items are normal items, but I have solved it.

Added a few lines :)

@media (min-width: 769px) {

   .main-navigation .main-nav > ul > li {
        position: relative;
	padding-left:10px;
	padding-right:15px;
    }

    .main-navigation .main-nav > ul > li:not(:last-child) > a:after {
        content: " \25CF";
        display: block;
	color:#000;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 10px;
    }
    .main-navigation {
        border-top: 2px solid #000000;
        border-bottom: 2px solid #000000;
    }
}

Glad you got it working :)

You can also try to adjust the padding using in Customizer > Layout > Primary Navigation > Menu Item Width.

Normally you could do that but I have set this to 4px because of the Navigation Item Hover background image which needs to span 4px before and 4px after the item. The background image is just a simple PNG image (10px width and 27px height) with 7px top in transparent - rest is black.

Sounds good. Glad you found a solution :)

Hi Leo, can you give me the right CSS styling I must use if I want a dot only beside the current page menu item?
Thank you :)

Hi Katia,

This topic is out of date, the solution is no longer the best solution.

Can you open a new topic? thanks!

Yes, I'll do, thank you Ying