Highlighting Current Page with Superfish Menu Styles

  • Hi im not that very good in English, but i will try my best.
    What i want is to highlight the current page in the navigation. At the moment my code is:

    /* Superfish - Menu Styles */
			.sf-menu, .sf-menu * {z-index: 9999999 !important;}
			.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
			.sf-menu { margin-top:20px;}
			.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.2em; /* 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:12.8em; /* 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;}
			.sf-menu {float:left;margin-bottom:1em;}
			.sf-menu a {padding: 10px;text-decoration:none;}
			.sf-menu a, .sf-menu a:visited,.sf-menu a, .sf-menu a:link  { color: #333333; }
			.sf-menu li {font-size:18px;}
			.sf-menu li a:hover {border-bottom:4px solid #a2005a; color:outline:0;}
			.sf-menu li ul {background:#d2d2cf;border:1px solid #bbbbb8;opacity: .85;filter: alpha(opacity=85);	-ms-filter: "alpha(opacity=85)";-khtml-opacity: .85;-moz-opacity: .85;}
			.sf-menu li ul li {font-size:14px;}
			.sf-menu li ul li a:link,.sf-menu li ul li a:visited { color:#454545;}
			.sf-menu li ul li a:hover {border:0;background:#fff;}
			.sf-menu li ul li ul { background-color:#e2e2e2; border:1px solid #d1d1cc;opacity: .85;filter: alpha(opacity=85);	-ms-filter: "alpha(opacity=85)";-khtml-opacity: .85;-moz-opacity: .85;}
			.sf-menu li ul li ul li a:link,.sf-menu li ul li ul li a:visited { color:#000;}
			.sf-sub-indicator { padding:0; margin:0;}

    As you can see im using Superfish – Menu Styles to style my navigation.

    On the web i came accross this little piece of code (see below), but i dont know how to cooperate it with the current code (see above).

    /* Style the list element */
li.current_page_item{
background:#eee;
color:#777;
}

/* Style the link element */
li.current_page_item a{
text-decoration:underline;
}

    If anyone can point me in the right direction, i will be very thankfull

Viewing 14 replies - 1 through 14 (of 14 total)
  • Thread Starter abbelsap

    (@abbelsap)

    Anyone?

    Thread Starter abbelsap

    (@abbelsap)

    Nobody can help me out?

    .ssf-menu li.selected,
.ssf-menu li.current-cat,
.ssf-menu li.current-cat-parent,
.ssf-menu li.current_page_item,
.ssf-menu li.current_page_parent,
.ssf-menu li.current_page_ancestor {
background:#eee;
color:#777;
}

    I got this from the ssf-blue menubar templates, wich I’m using.

    Thread Starter abbelsap

    (@abbelsap)

    Thanks, got it working! However when i hover the current page, the title gets a second underline. Any thoughts on that?

    Add

    text-decoration: none;

    after

    color:#777;

    Thread Starter abbelsap

    (@abbelsap)

    Unfortunately that isn’t working for me.

    My current code for the nav is;

    /* Superfish - Menu Styles */
			.sf-menu, .sf-menu * {z-index: 9999999 !important;}
			.sf-menu, .sf-menu * {margin:0;padding:0;list-style:none;}
			.sf-menu { margin-top:20px;}
			.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.2em; /* 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:12.8em; /* 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;}
			.sf-menu {float:left;margin-bottom:1em;}
			.sf-menu a {padding: 10px;text-decoration:none;}
			.sf-menu a, .sf-menu a:visited,.sf-menu a, .sf-menu a:link  { color: #333333; }
			.sf-menu li {font-size:18px;}
			.sf-menu li a:hover {border-bottom:4px solid #a2005a; color:outline:0;}
			.sf-menu li ul {background:#d2d2cf;border:1px solid #bbbbb8;opacity: .85;filter: alpha(opacity=85);	-ms-filter: "alpha(opacity=85)";-khtml-opacity: .85;-moz-opacity: .85;}
			.sf-menu li ul li {font-size:14px;}
			.sf-menu li ul li a:link,.sf-menu li ul li a:visited { color:#454545;}
			.sf-menu li ul li a:hover {border:0;background:#fff;}
			.sf-menu li ul li ul { background-color:#e2e2e2; border:1px solid #d1d1cc;opacity: .85;filter: alpha(opacity=85);	-ms-filter: "alpha(opacity=85)";-khtml-opacity: .85;-moz-opacity: .85;}
			.sf-menu li ul li ul li a:link,.sf-menu li ul li ul li a:visited { color:#000;}
			.sf-sub-indicator { padding:0; margin:0;}

			.sf-menu li.selected,
			.sf-menu li.current-cat,
			.sf-menu li.current-cat-parent,
			.sf-menu li.current_page_item,
			.sf-menu li.current_page_parent,
			.sf-menu li.current_page_ancestor {
			border-bottom:4px solid #333333; color:outline:0;
			text-decoration: none;
}

    Second underline? Can I see an example?

    Off-topic:
    (Ik zie dat je in Nederland woont. Toevallig, ik ook!)

    Thread Starter abbelsap

    (@abbelsap)

    Off-topic
    Hehe cool. Heb meteen je site gechecked, hij breekt bij enkele pagina’s op Safari.

    (Copy and paste the links in your browser)

    Current page:
    https://img534.imageshack.us/i/schermafbeelding2010051gz.png/

    Current page + hover:
    https://img130.imageshack.us/i/schermafbeelding2010051.png/

    Hover:
    https://img210.imageshack.us/i/schermafbeelding2010051j.png/

    Off-topic
    M’n site is alleen getest in FireFox en ie. Ik ben niet echt bekend met Safari browsers. Heb hem gisteren nog door de W3C validator gehaald en de enige 19 errors, zijn van de embed code van youtube, dus zou niet weten waardoor m’n site off is in Safari.

    Ok, if I understand it correctly, you want your menu links to have a standard hover with border-bottom:4px solid #a2005a;
    And the current highlighted page with a fixed border-bottom:4px solid #333333;
    Then when you hover the current page you want it to change the fixed color #333333 to the standard hover color #a2005a.

    Well, justed tested it on my menu, and works perfect.
    so I don’t know why yours shows both.

    Do you only use a border-bottom to all your site links?

    My hover css looks like this:

    .ssf-blue li:hover, .ssf-blue li.wpm-hover,
.ssf-blue a:focus, .ssf-blue a:hover, .ssf-blue a:active {

    as you can see, I have no li a:hover

    Thread Starter abbelsap

    (@abbelsap)

    Thats correct, the code above only applies to the navigation. Standard links have a normal underline.

    Tested it again, but i get the same result as last time.. Maybe it has to do with the li a:hover?

    Try to change

    .sf-menu li a:hover {border-bottom:4px solid #a2005a; color:outline:0;}

    to

    .sf-menu li:hover, .ssf-menu a:hover {border-bottom:4px solid #a2005a; color:outline:0;}

    if that doesn’t work try

    .sf-menu li:hover {border-bottom:4px solid #a2005a; color:outline:0;}

    Let’s see what happens.

    Off-topic
    Trouwens nog, thanks for the heads up over de weergave van m’n website in Safari. Ik heb hem nu gefixt.

    Thread Starter abbelsap

    (@abbelsap)

    Off-topic
    Je site ziet er nu top uit!

    The second code you gave me works now, thanks! However when Im at a subpage, it wont highlight the nav? It only works on parentpages.

    Any thoughts on that? ??

    Off-topic
    Thanks!

    the subpages is probably between ul li, instead of just li. Like mine is.
    Add

    .sf-menu ul li:hover {border-bottom:4px solid #a2005a; color:outline:0;}

    Don’t know for sure it will work. But seems like it would.

    Just play around with it, but first make a backup of your stylesheet.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Highlighting Current Page with Superfish Menu Styles’ is closed to new replies.