Thin white line in menu navigation
-
Hey guys π
A noob question. I need to get rid of this annoying white line in the menu navigation. Check it out: http://iseeu.nu/
Cheers!
-
Do not edit the Twenty Twelve theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes.
Thanks for the tip but I still have the white line.
To further elaborate on that, the site is only going to be created once, it’s a simple site. Should it require changes, I plan to create the site all over again from a new installation.
Anyone else?
What CSS have you tried?
I put the menu in its own div ‘my menu’. The I added the extra bit of CSS (see bottom). White line remains. Seems to be part of ‘menu-main-menu-container’ if inspect the code.
ORIGINAL CODE
.main-navigation .assistive-text:hover,
.main-navigation .assistive-text:active,
.main-navigation .assistive-text:focus {
background: #fff;
border: 2px solid #333;
border-radius: 3px;
clip: auto !important;
color: #000;
display: block;
font-size: 12px;
padding: 12px;
position: absolute;
top: 5px;
left: 5px;
z-index: 100000; /* Above WP toolbar */
}/* Navigation Menu */
.main-navigation {
margin-top: 24px;
margin-top: 1.714285714rem;
text-align: center;
}
.main-navigation li {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 12px;
font-size: 0.857142857rem;
line-height: 1.42857143;
}
.main-navigation a {
color: #5e5e5e;
}
.main-navigation a:hover {
color: #21759b;
}
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
}
.main-navigation ul.nav-menu.toggled-on,
.menu-toggle {
display: inline-block;
}CODE I ADDED
#menu-main-menu {
width: 570px;
padding-right: 0px;
}#site-navigation {
padding-left: 30px;
padding-top: 0px;
margin-top: 10px;
margin-bottom: -49px;
}.menu-main-menu-container {
margin-top: 0px;
padding-top: 20;
}#mymenu {
margin-left: 350px;
margin-right: 350px;
background: #5b5b5b; /* Old browsers */
background: -moz-linear-gradient(top, #5b5b5b 0%, #595959 12%, #474747 29%, #2c2c2c 64%, #1c1c1c 91%, #3a3a3a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5b5b5b), color-stop(12%,#595959), color-stop(29%,#474747), color-stop(64%,#2c2c2c), color-stop(91%,#1c1c1c), color-stop(100%,#3a3a3a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #5b5b5b 0%,#595959 12%,#474747 29%,#2c2c2c 64%,#1c1c1c 91%,#3a3a3a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #5b5b5b 0%,#595959 12%,#474747 29%,#2c2c2c 64%,#1c1c1c 91%,#3a3a3a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #5b5b5b 0%,#595959 12%,#474747 29%,#2c2c2c 64%,#1c1c1c 91%,#3a3a3a 100%); /* IE10+ */
background: linear-gradient(to bottom, #5b5b5b 0%,#595959 12%,#474747 29%,#2c2c2c 64%,#1c1c1c 91%,#3a3a3a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#5b5b5b’, endColorstr=’#3a3a3a’,GradientType=0 ); /* IE6-9 */
}Nevermind, solved..
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;These were the culprits. I figured they were caused by a single pixel element somewhere. My guess was right.
Thx guys π
The topic ‘Thin white line in menu navigation’ is closed to new replies.