[Resolved] line under each menu in my mobile menu

Home Forums Support [Resolved] line under each menu in my mobile menu

Home Forums Support line under each menu in my mobile menu

  • This topic has 5 replies, 3 voices, and was last updated 2 years ago by Fernando.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2158416
    Beatriz

    Hi, I have tried a lot with the code and I can’t do what I need to do.

    I would like to add a line under each menu in my MOBILE menu, I have tried this, but it does not work:


    @media
    (max-width: 768px) {
    .inside-header{
    flex-direction:row;}

    .main-navigation ul il {
    border-bottom:1px solide #C4C4C4;
    }

    .main-navigation .main-nav ul li a, .menu-toggle, button.menu-toggle,
    button.menu-toggle:hover,
    button.menu-toggle:focus {
    background-color:#FFFAB3;
    }
    .menu-toggle{
    line-height:3em;
    }
    }


    I would also like to know how I can add a border line to my desktop menu box.
    thanks for your help.

    #2158447
    Ying
    Staff
    Customer Support

    Hi Beatriz,

    Any chance you can link us to the site in question and point us to where we should be looking at?

    You can use the private information field.
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Let me know 🙂

    #2158572
    Beatriz

    Merci Ying,
    here below I leave the link, I would like to have in the mobile menu white background and links separated by lines and leave only the toggle menu in yellow.

    And for the second question, the link number two presents a page without banner, so I would like a line of separation in my menu bar.

    Thank you 🙂

    #2158587
    Fernando
    Customer Support

    Hi Beatriz,

    With regards to the first issue, here is a CSS you may try:

    @media (max-width: 768px) {
        .main-navigation .main-nav ul li a {
            background-color:rgb(255,255,255);
        }
        .main-navigation .main-nav > ul > li > a {
            border-bottom: solid 1px black;
        }
    }

    With regards to the second issue:

    @media (min-width: 769px){
    .search nav#site-navigation:after {
        content: "";
        display: block;
        margin-top:5px;
        border-bottom: 1px solid rgb(0,0,0);
    }
    }

    Adding these through Appearance > Customize > Additional CSS should work.

    If anything doesn’t adhere to your preference, may you kindly send a screenshot of a layout of what it should look like?

    Kindly let us know how it goes. 🙂

    #2159354
    Beatriz

    Hi Fernando, it’s perfect, thank you very much !

    #2161438
    Fernando
    Customer Support

    You’re welcome Beatriz! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.