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.
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! 🙂
In an iPad, there are still borders in the Navicon.
How can I remove them?
Thanks again.
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;
}
}
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.
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!
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!
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.
Yep, it worked, once more time you did it.
I’m glad that helped!
I’d never heard of the term “navicon” either, so thanks for sharing. 🙂
