[Support request] Horizontal separator for phone menu used in all website

[Noemina]

Hi mates, can you please help me with a horizontal separator for the menu in this website?
https://noeminamelides.com/

And another thing that I have no ideia how to go about it, (and if it is going to look good,) there’s any way to put this menu, the all background transparent until a person clicks on the menu icon or passes over it?

Thanks alot, Great Work

[David]

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.

[Noemina]

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

[Elvin]

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.

[Noemina]

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

[David]

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 ?

[Noemina]

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

[Leo]

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

[Author]

Posts