Horizontal separator for phone menu used in all website

Hi there,

you can use this CSS to apply a color border to each menu item:

.main-navigation .main-nav ul li a {
    border-bottom: 1px solid #ddd;
}

In regards to a transparent background - i would advise against this from an accessibility point of view, as your background image will show through making the menu items harder to read.

That was great mate, but I miss understood the client, is just 1 bar from the tittle of the website to the menu like this store in the phone version of the website: https://theodorawarre.eu/

The ideia the the menu to be transparent only when it's closed, and when it's open the background goes to white. Any way I can do that?

Thanks for the help

Hi,

To clarify: You want to keep the white background on the header but make the expanding menu items transparent?

If so, you should be able to set the transparency settings of sub menu items's background color on Appearance > Customize > Colors > Primary Navigation > Sub menu items.

There's a alpha value slider on the color picker.

First I would like a bar between the header and the expanding menu when the menu is open.

Second I would like to have the header transparent only when the menu is closed and when you open it it should change to white so I can see the menu clearly.

Thanks

That example site is using an Off Canvas Panel, which you can enable on GP:

https://docs.generatepress.com/article/off-canvas-panel-overview/

is that part of the requirement ?

No, the menu needs to be the one It's in use in noemina.com

Are you referring to a border like this?
https://www.screencast.com/t/impbMtYGe

If so this should work:

@media (max-width: 768px) {
    .main-navigation {
        border-bottom: 1px solid #000;
    }
}