[Resolved] Dot between menuitems

[Wilfred]

I want to have a dot between menu items:

I have the menu now like the example only without the dot. Is it possible to do this? The selected item (like example) is an image and also the 2 lines above and below the menu.

I also looked at this solution: https://generatepress.com/forums/topic/separators-in-menunav-bar/ but that doesn’t work because of the selected item (image)

[Leo]

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?

[Wilfred]

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)

[Leo]

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?

[Wilfred]

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;
    }
}

[Leo]

Glad you got it working 🙂

[Leo]

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

[Wilfred]

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.

[Leo]

Sounds good. Glad you found a solution 🙂

[katia]

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 🙂

[Ying]

Hi Katia,

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

Can you open a new topic? thanks!

[katia]

Yes, I’ll do, thank you Ying

[Author]

Posts