Archived topic

line under each menu in my mobile menu

5 replies · Started by Beatriz on March 17, 2022

Viewing posts 1–6 of 6

March 17, 2022 at 12:39 pm #2158416

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.

March 17, 2022 at 1:28 pm #2158447

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 :)

March 17, 2022 at 6:05 pm #2158572

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 :-)

March 17, 2022 at 6:37 pm #2158587

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. :)

March 18, 2022 at 10:05 am #2159354

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

March 20, 2022 at 5:06 pm #2161438

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

This archived topic is closed to new replies.

Start building better websites today.