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

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

Home Forums Support Horizontal separator for phone menu used in all website

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1535818
    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

    #1535963
    David
    Staff
    Customer Support

    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.

    #1557041
    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

    #1557369
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1567993
    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

    #1568314
    David
    Staff
    Customer Support

    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 ?

    #1570825
    Noemina

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

    #1570985
    Leo
    Staff
    Customer Support

    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;
        }
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.