[Support request] 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.

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.

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 ?

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