Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.
0 votes
in Q2A Core by
There's a line

<li class="qa-nav-main-$">

which I guess is a li under active state, but I'm not sure...

I'd like to customise my main-nav bar and I'd like to have a home icon under the Homepage link. I've managed to sprite it really well and I've got into this...

Anyone knows what does qa-nav-main-$ mean?

Thanks in advance!
Q2A version: last version
I have this problem too.

1 Answer

–1 vote

use Firebug(firefox plugin)  to inspect and see how you can change html & css elements.

this element shows upper navigation buttons. those bellow logo

/* Main, sub and category navigation */

.qa-nav-main {clear:both;}
.qa-nav-main-list {font-size:16px; list-style:none; padding:0; margin:0;}
.qa-nav-main-item,.qa-nav-main-item-opp {border-top:1px solid #1f2e2b; border-left:1px solid #1f2e2b; border-right:1px solid #1f2e2b;}
.qa-nav-main-item {float:left; margin-right:4px;}
.qa-nav-main-item-opp {float:right; margin-left:4px;}
.qa-nav-main-link {color:#FFF; display:block; padding:6px 10px; background:#293d39;}
.qa-nav-main-link:hover, .qa-nav-main-selected {background:#396e63; text-decoration:none;}
.qa-nav-main-hot .qa-nav-main-link {background:#f33;}
.qa-nav-main-hot .qa-nav-main-link:hover, .qa-nav-main-hot .qa-nav-main-selected {background:#f66;}

.qa-nav-sub {clear:both; float:left; padding-top:3px;}
.qa-nav-sub-list {font-size:12px; list-style:none; padding:0; margin:0;}
.qa-nav-sub-item {float:left; margin-right:2px;margin-bottom:2px;}
.qa-nav-sub-link {background:#cfd1c4; color:#396e63; font-weight:bold; padding:5px 8px; display:block;}
.qa-nav-sub-link:hover, .qa-nav-sub-selected {background:#9cdbce; text-decoration:none;}
.qa-nav-sub-link.qa-nav-selected {background:#396e63;}

.qa-nav-cat {margin:24px 0;}
.qa-nav-cat-list {list-style:none; padding:0; margin:0;}
.qa-nav-cat-list-1 {font-size:14px;}
.qa-nav-cat-list-2 {font-size:12px; margin-left:1em;}
.qa-nav-cat-list-3 {font-size:10px; margin-left:1em;}
.qa-nav-cat-list-4 {font-size:9px; margin-left:1em;}
.qa-nav-cat-item {margin:0.5em 0;}
.qa-nav-cat-link {font-weight:bold;}
.qa-nav-cat-selected,.qa-nav-cat-selected:hover {text-decoration:none; color:#000;}

Well, I already did firebug. This is a picture with what I'm asking.
So, every LI element of my UL has a class, corresponding to its purpose. The first element is actually a link to my homepage. And it doesn't have a normal class, it has this qa-nav-main-$, as the picture shows. How could I use this CSS class, with the dollar sign? Could the homepage LI not have any particular class? That's what I'm asking.