ThemeShaper Forums » Thematic

[closed]

Remove Grey Border Color from Navigation

(11 posts)
  • Started 3 years ago by misterzombie
  • Latest reply from akvistad
  • This topic is resolved

  1. misterzombie
    Member

    Hey everyone, I feel as if I've exhausted all options with trying to remove the grey border around the navigation menu.

    I pulled up the #access style cascade and went through changing the colors to how I saw fit but when it came to the grey outline I just can't seem to find the code. I used Firebug to see if I could narrow it down with no luck.

    I have removed or placed "none" next to all of the border-color tags and they STILL show up. What's going on?

    Here is my code:

    /* NAVIGATION
-----------------------------------------------------------*/
.skip-link {
    display:none;
}
#access {
	background: #f4992e;
	font-size:13px;
	height:32px;
	overflow:visible;
	z-index:100;
	border-top: 1px solid #facc97;
}
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** THEMATIC SKIN ***/
.sf-menu {
	float:left;
}
.sf-menu a {
	background: #f4992e;
	padding:9px 13px;
	text-decoration:none;
}
.sf-menu .current_page_item a,
.sf-menu .current_page_ancestor a,
.sf-menu .current_page_parent a {

}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:			#666;
}
.sf-menu li {
	background:		#f4992e;
}
.sf-menu li li {
	background:		#f4992e;
}
.sf-menu li li li {
	background:		#9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background:     #facc97;
	outline:		0;
}
.sf-menu ul {

}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	top:32px; /* overriding essential styles */
}
.sf-menu ul ul {
    margin-top:0;
}
.sf-menu ul a {
    background:#f4992e;
}
.sf-menu ul a:hover {
    color: #FF4B33;
}

    It also doesn't help I don't know what every tag does really so it is a lot of trial and error/change and refresh. For example the "sf-menu li" type tags, I changed colors on that and I didn't notice any difference either. They used to be #fff.

    Is there a way to have a CSS Dictionary for thematic? What each default tag is and if changed what it does? I think that could be really useful for beginners or anyone using Thematic.

    Posted 3 years ago #

  2. misterzombie
    Member

    It took me awhile, but the issue was that instead of saying border-bottom/top/left/right: none;, I was just deleting the line. So it was going back to the default style.css

    Added "none" to all the border styles and it removed them.

    Posted 3 years ago #

  3. misterzombie
    Member

    Okay so as I stated above I had managed to fix the border issue, but now there is a 1px space between the main tab and the drop down. How do I move that up a notch so it will be one solid box when you scroll over it?

    And is there a way to place an arrow next to drop downs to notify that it is a drop down? I was thinking of some kind of background image but not sure how to go about doing it.

    Posted 3 years ago #

  4. Chris
    Moderator

    Hi,

    could you please drop a link for that 1px problem?!

    Chris

    Posted 3 years ago #

  5. yahyaayob
    Member

    Hi Chris, I am facing the same problem too.

    http://www.watchwerkz.com.sg/wp

    Posted 3 years ago #

  6. helgatheviking
    Moderator

    I was going to start a thread on this, but figured I would just bump this one instead. I am having the same issues. That 1px space shows up if I set the borders to 0... or if I monkey with the font-size or padding of the links in .sf-menu a . But what I'd really like to know is how what misterzombie asked about getting an arrow/marker next to the parent items to signify a drop down. The default wp menu doesn't put any special class on the

  7. that contain the
      sublists.

      Cheers.

Posted 3 years ago #

  • em hr
    Moderator

    Hi,

    I'm not sure what exactly the problem is here without seeing a link to the issue in question but maybe this'll help.

    My favorite tool for debugging css is firebug with firefox. Grab it and you'll be able to see all the styles applied inherited and overruled to any element on the page.

    Often if there is a style applied that cannot be found on any stylesheet, It has been applied by the browser ( the user agent stylesheet ).

    Helga- I'm not sure there is a need for specific classes to deeply nested items since the parents or ancestors of the current page are always identified with current-page-parent or current-page-ancestor.

    This is an extreme example but you could use: .current-page-ancestor li li li li li {background:red} to style deep in a nested list.

    -Gene

    Posted 3 years ago #

  • helgatheviking
    Moderator

    Well I am I not super concerned w/ that 1 renegade pixel. I have firebug and so will find it eventually.

    I wish I could link to you my theme, but it is still only in local development.

    here is the menu output that I grabbed:

    <div class="menu">
<ul class="sf-menu">
	<li ><a href="http://localhost/proresumebuilder" title="Home">Home</a></li>
	<li class="page_item page-item-2"><a href="http://localhost/proresumebuilder/about/" title="About">About</a></li>
	<li class="page_item page-item-58"><a href="http://localhost/proresumebuilder/blog/" title="Blog">Blog</a></li>
	<li class="page_item page-item-19"><a href="http://localhost/proresumebuilder/services/" title="Services">Services</a>

<!-- This li is parenting a dropdown list... wouldn't it be cool if it had an arrow next to it? -->

		<ul><li class="page_item page-item-93"><a href="http://localhost/proresumebuilder/services/consultation/" title="Send Me Your Info for Your Free Consultation">Send Me Your Info for Your Free Consultation</a></li>
		</ul>
	</li>

	<li class="page_item page-item-25 current_page_ancestor"><a href="http://localhost/proresumebuilder/testimonials/" title="Testimonials">Testimonials</a>
		<ul><li class="page_item page-item-123"><a href="http://localhost/proresumebuilder/testimonials/woot/" title="Woot">Woot</a></li>
			<li class="page_item page-item-125"><a href="http://localhost/proresumebuilder/testimonials/bacon/" title="Bacon">Bacon</a></li>
			<li class="page_item page-item-127"><a href="http://localhost/proresumebuilder/testimonials/chomp/" title="chomp">chomp</a></li><li class="page_item page-item-129 current_page_ancestor current_page_parent"><a href="http://localhost/proresumebuilder/testimonials/blurb/" title="blurb">blurb</a>
				<ul><li class="page_item page-item-131 current_page_item"><a href="http://localhost/proresumebuilder/testimonials/blurb/roar/" title="roar">roar</a></li>
					<li class="page_item page-item-133"><a href="http://localhost/proresumebuilder/testimonials/blurb/kitty/" title="kitty">kitty</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li class="page_item page-item-23"><a href="http://localhost/proresumebuilder/contact-us/" title="Contact Us">Contact Us</a></li>
</ul>
</div>

    current-page-parent or current-page-ancestor are only used when you are actually on a page that is nested in the menu. If you are on the home page, there is not a special class (w/o me selecting the particular page-item-# for the li in question) that denotes Hey roll over me b/c I have a sub menu! Sorry, but that is the best i can explain it. :)

    Posted 3 years ago #

  • Chris
    Moderator

    Hi,

    try this one:

    .sf-menu {line-height: 1.1;}

    .. works for the above mentioned link.

    Chris

    Posted 3 years ago #

  • helgatheviking
    Moderator

    True enough that works. And here I was thinking I was so cool for discovering that there is a slight height discrepancy between the #access and

    .sf-menu li:hover ul, sf-menu li.sfhover ul

    stylings. Maybe more like I created a discrepancy when I set the standard sf-menu a link borders to 0. The #access font-size is 14px, plus padding of 9 top and bottom so that equals 31px. But the hover position of the submenus is top:32px. So if you don't have a border you end up w/ a pixel gap. Upping the font a pixel or dropping the 'top' location a pixel both work too.

    #access {
    height:32px;
    font-size:13px;
    }

    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
    top:32px; /* overriding essential styles */
    }

    .sf-menu a {
    border: 0;
    padding:9px 13px;
    }

    Posted 3 years ago #

  • akvistad
    Member

    I am grateful for this thread! It has taken hours for me to figure this out as well and now I have clearly pinpointed the problem.

    The code to change is in the default.css file--I copied all of that code into my child theme style sheet so that I could modify it. So, in your own child theme style sheet this is what you need to add:
    In the Thematic Skin section, add:
    border: none;

    in 2 places:
    .sf-menu
    .sf-menu a

    .sf-menu - this removes the right border only
    .sf-menu - this removes all the other borders

    Posted 3 years ago #

    • RSS feed for this topic

    Topic Closed

    This topic has been closed to new replies.