[Support request] Menu item seperator

[Erol]

Hi,
Is it possible to add a png image to act as menu item seperator to the right of top nav items but hide that separator image on the last menu item and hide it alltogether on mobile menu? If so what would the correct css to add be? Thanks.

[Tom]

No need to use an image, you can use some simple CSS:

.main-navigation .main-nav > ul > li:not(:last-child) > a {
    border-right: 1px solid #DDD;
}

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Erol]

Many thanks. Tu use this alternative I will first need to find out how to control the height of the menu items. As it is they are 100% height of the nav bar that makes the seperator as well full height but half the height normaly looks more like a seperator. I am new to generate and I will need to find out quite a lot of things before using this in a production site, or else I would be dropping here many more times 🙂

[Tom]

The height is controlled using GP Premium in “Customize > Layout > Primary Navigation”.

However, altering the height will change the height of the entire navigation.

If you need to use an image, just replace the border-right attribute with your background-image.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts