Support » Theme: Gazette » Take out lines of Menu

  • Resolved pedrolaia

    (@pedrolaia)


    Hello…

    How can I erase the lines that are in the Menu ( the gray, vertical ones).

    thank you

Viewing 13 replies - 1 through 13 (of 13 total)
  • Moderator Kathryn P.

    (@zoonini)

    Going off the demo, this should remove the vertical lines between menu items:

    .main-navigation .nav-menu > li + li {
      border-left: none;
    }

    If you need further help, could you provide a link to your site? Thanks!

    Don’t edit the theme files directly, otherwise your changes will be overwritten every time the theme is updated.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS. You could also install a standalone custom CSS plugin if you prefer.

    Thread Starter pedrolaia

    (@pedrolaia)

    Hi Kathryn…

    The site is this one
    http://joaokopke.com/

    Your code did it, but there’s still a line between the Logo and the Menu. Is it possible to take it out?

    Thank you

    Hi @pedrolaia,

    Thank you for sharing the link to your site!

    The following custom CSS will hide the line between your logo and menu:

    body:not(.long-menu) .site-branding:before {
        display: none;
    }
    
    body:not(.long-menu) .main-navigation {
        border-left: none;
    }

    Hope that helps! 🙂

    Thread Starter pedrolaia

    (@pedrolaia)

    Worked like a charm!

    Thanks again!

    You’re most welcome!

    Thread Starter pedrolaia

    (@pedrolaia)

    In an iPad, there are still borders in the Navicon.

    How can I remove them?

    Thanks again.

    Moderator Kathryn P.

    (@zoonini)

    To remove the horizontal lines above each menu item on smaller screens, try:

    @media screen and (max-width: 840px) {
      .main-navigation li {
        border-top: none;
      }
    }
    Thread Starter pedrolaia

    (@pedrolaia)

    It didn’t work, maybe I didn’t explain well.

    Here’s a photo from my iPad
    http://www.joaokopke.com/Image.jpg

    Inside the blue circle, the navicon (it’s the technical name of it, right?) has borders in top, left and bottom. That’s the ones that I wanted to take them out.

    Siobhan

    (@siobhyb)

    Ah, got you! Thank you so much for clarifying and for the screenshot.

    The icon inside the blue circle is known as a hamburger button (I appreciate it’s not a very technical sounding name 😄) and you can remove its border using the following custom CSS:

    .menu-toggle {
        border: none;
    }

    Let us know how that goes!

    Moderator Kathryn P.

    (@zoonini)

    Thanks for the screenshot – that certainly makes it clearer. I’ve never heard the term “navicon” but it’s certainly nicer-sounding than “hamburger.” 😉

    Siobhan, thanks for providing the CSS!

    Thread Starter pedrolaia

    (@pedrolaia)

    About the term “Navicon”
    https://css-tricks.com/three-line-menu-navicon/

    Nav (navigation)

    Icon (Icon)

    I’ll test the code later and tell you something.

    Thread Starter pedrolaia

    (@pedrolaia)

    Yep, it worked, once more time you did it.

    Siobhan

    (@siobhyb)

    I’m glad that helped!

    I’d never heard of the term “navicon” either, so thanks for sharing. 🙂

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Take out lines of Menu’ is closed to new replies.