Support » Theme: Tiny Forge » How to Remove Navigation Menu Border
How to Remove Navigation Menu Border
-
I’m working on building an as-yet-unpublished site with a Tiny Forge child theme and want to remove the default lines above and below the navigation menu so that the menu blends seamlessly into the page background. I can’t for the life of me find the code for this border in the default Tiny Forge style.css.
Can anyone tell me what the code is or if it’s located in a different file, and where?
-
Can you post a link to the site?
Oh, it’s OK, I found the theme demo site:
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border: none;
}PS I found that CSS rule in seconds using the Firefox plugin called Firebug. It’s a great tool.
Thanks for the suggestion martcol, but it didn’t work. The .main-navigation ul.nav-menu rule exists only as a subset of “@media screen and (min-width: 600px)” (a rule I am not at all familiar with) and appears to have no effect on the website when I alter it in the child theme.
The site is http://alt-ternativeautoimmune.com, but the owner has requested it remain private until it is 100% finished.
The Tiny Forge theme is here: http://wordpress.org/themes/tiny-forge
So, a couple of solutions
1)
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border: none !important;
}2) at the bottom of your child CSS
@media screen and (min-width: 600px) {
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border: none;
}
}3) increase the specificity of the rule by adding other elements to the selector say something like:
div.menu-main-menu-container .main-navigation ul.nav-menu {
}Martin
The double curly braces are importantI meant to say suggestions (i hope they’re solutions!)
😉
#1 solved it! Thanks a billion, you’re a godsend!
- The topic ‘How to Remove Navigation Menu Border’ is closed to new replies.