Trouble styling the Superfish navbar

Ok so now back to my brown menu example above. I’m having troubble styling this thing and getting it to behave the way I want. I have it poping the menu out to the side now, using margins, but I’m having a few problems;

  1. my z-index doesn’t seem to be working. I tired adding one to the ul of 200000, but it still displays the menu under my other content.

  2. It creates a big space that I dont want under the list item when rolled over. I also want the current item to show lighter brown when its the active menu item. I tried using the perc-navbar-vertical .current li, but it doesn’t seem to be displaying correctly, so I’m not applying it right or something?

  3. Now that I have the menu poping out to the side, you can’t rollover the submenu items. When you move over off the parent the submenu hides.

It feels like this menu is trying to respond like a verticle menu rather then a verticle rollover menu?

Please help =)

Thanks
Sandy

Note: This topic was created from a reply on the Bazaar Nav widget activity topic.

Ok so I lost my references to the super fish style sheet. That was my problem.

Here for anyone elese

/* Import css files for all widgets*/

/*Navigation imports*/
@import “…/…/widgets/navBar/css/superfish.css”;
@import “…/…/widgets/navBar/css/superfish-navbar.css”;
@import “…/…/widgets/navBar/css/superfish-vertical.css”;
/*Image widget imports*/
@import “…/…/widgets/image/tinyLightbox/jquery.tinyLightbox.css”;

/* Import css file ends here*/

Now to change all the styles to look the way I want =). At least the functionality is working now.

Sandy,

Thanks for the follow-up! I’m sure other customers will find this useful down the road …

Ok so I can style the li items for the top level nav, and the background of the ul for the drop downs so far. What I’m having problems with is accessing the right path for the li items of the drop down. I’m unsure what syntax to use to get the right slector working? (I’m trying inspect element Chrome tools. Will get fire bug next.)

What works (top level menu items)

.mainNav li.topNav.sfHover ul - background of the drop down
.mainNav.perc-navbar ul.sf-menu li a - top level menu items

What I tried;

.mainNav li.topNav.sfHover ul li - not responding really. The width:100% seems to respond, but the background:none; isn’t working, or something else is over riding it.

I guess I just want to check that I’m on the right path to accessing this element? Any ideas. I’ll keep playing, when my brain isnt so tired.

Breack Down

"mainNav " - region name

“topNav” - class I’m adding in CM1 in navagtion section, so I can control which level items show up in my nav widget. Stops other childern showing up in my widget from other sub sections, that have childern on the same level.

"sfHover " - something to do with super fish ,not sure exactaly how it fits in, on hover I guess.

Thanks
Sandy

Hi Sandy,
Yes, you are on the right path…your descendant selectors are looking good, just keep in mind region name is associated with an Id rather than a class. The CSS you have written would require the class of “mainNav” to be applied either to the region containing the navigation widget or applied as a class on the “style” tab on the navigation widget (which I believe you have already done).

As for the background of the submenu li’s, are you still seeing the default blue background, or is it the background that you are using for the ul?

-Jon

Ok, I know I’m writiing class “.mainNav” when what I really have is id “#maniNav” but when I made my regions and I added a root css class with the same name as my ID it seems to pick up the styling that I have written in my ID for that region. Does that make sense? Maybe this is what is messing me up? Now that I’m thinking about it, I may be doing an extra step here. All I really need to do is name the region the same name as my ID, the class I’m adding to the regin in CM1 maynot be doing anything since I havent written a class for the region?

What I’m trying to do now is keep placement css (responsive stuff) for the region in the ID, and things like #newsStory img, so img default display within a region and stuff like that coded to the id tags using the #.

For all Nav stuff , I have taken everything related to ul, li, a off the IDs in my style sheet, and have just been writting that part with classes like I have above. (Maybe we can review in coaching to see if I have things setup optimally.)

Anyway here is what my menu looks like, I want to change the menu items from grey to no bg color (so my green background shows), and white text, and a bottom border dividing each one. Then rollover, the BG will go dark grey with white text. (The rollover is working, it appears that it is inherted from the top level rollover.) I just can’t seem to change the display of the menu item before its rolloved over.

Hi Sindy like you website I would like to know how did you configure your nav bar to be responsive , Im using superfish and having a hard

Hi,

I know it has been a long time since I did this and I had to get my coach to help me. Here are my classes if that helps. (I’ll try and paste them in sometimes the code doesn’t come in great)

So basically I put in 2 different regions or divs. One that holds the packed up hamburger icon, and one that holds the nav widget (that is basically made up of li tags).

Then when on full screen CSS query I hide the hamburger div and show the main one. On Cell phone query I show the hamburger one and hide main one.

Then on my hamberger icon its an html 5 button, I added a little called onclick to a js script that looks for the id name of my nav region and shows and hides it. Then I resrtlyed the nav li tags to be 100% each with a background color.

The tricky part is figuring out he correct superfish classes to use to access the right level of nav widgets. Hopefully my code helps a little.

The audience bar is what I have in the red bar at the top of my site. MainNav is the black text that sits above the banner

/******************************** super fish classes for drop down menus for CM1 ***************************************/

.audienceMenu.perc-navbar ul{float:right;}

.audienceMenu.perc-navbar ul.sf-menu li, .audienceMenu.perc-navbar ul.sf-menu li:hover, .audienceMenu.perc-navbar ul.sf-menu li:visited
{
background:none;
border:none;
width:auto;
color:#FFFFFF;

font-size:1em;
font-family: HelveticaNeueLTStd-Cn;
font-style: normal;
font-weight: normal;
}

.audienceMenu li a /*have to do this to get around levels in CM1 nav*/
{
display:none;
color:#FFFFFF;
text-decoration:none;
width:95.5%;
}

.audienceMenu li.utility a, .audienceMenu li.utility a:focus, .audienceMenu li.utility a:hover, .audienceMenu li.utility a:visited, .audienceMenu li.utility a:active
{
display:block;
background:none; /*these properties are overwritting super fish styling*/
border:none;
width:auto;
color:#FFFFFF;
}

.audienceMenu li.utility.webmail a, .audienceMenu li.utility.webmail a:hover, .audienceMenu li.utility.webmail a:active, .audienceMenu li.utility.webmail a
{
background-image:url(/Assets/OldsCollege/images/templateImages/icons/webmailIcon.png);
display:block;
width:50px;
height:30px;
margin-bottom:-6%;
margin-right:2%;
margin-left:-20%;
color:rgba(255,0,0,0);/*want it to hide text*/
}

.mainNav.perc-navbar ul
{
float:right;
border:none;
}

.mainNav.perc-navbar ul.sf-menu li
{
background:none;
border:none;
width:auto;
color:#000;

font-family: HelveticaNeueLTStd-Cn;
font-size: 1.2em;
font-style: normal;
font-weight: normal;
}

.mainNav.perc-navbar ul.sf-menu li ul li { font-size: 1.1em;}

.mainNav.perc-navbar ul.sf-menu li a:hover
{
background:#666666;
color:#FFFFFF;
margin-left:-0.5%;
}

.mainNav.perc-navbar ul.sf-menu li a, .mainNav.perc-navbar ul.sf-menu li a:active
{
color:#000000;
border:none;
}

.mainNav li.topNav ul /*drop down menu BG*/
{
display:block;
width:270%; /*using to fatten menu for short terms like FAQ*/
max-width:250px;
background:#3d3c3c;

-webkit-border-radius: 5px;
-webkit-border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius: 5px;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
border-radius: 5px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;

padding-left:0;
padding-right:0;

-webkit-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.5);
-moz-box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.5);
box-shadow: 4px 4px 5px rgba(50, 50, 50, 0.5);
}

.mainNav li.topNav.sfHover ul li/*drop down menu item */
{
display:block;
width:92%;
margin-left:3.5%;
background:#3d3c3c !important; /* !important makes it work, doesn’t seem to be effecting other areas*/
color:#CCCCCC !important;/*NOT responding!!!*/
border-bottom:1px solid #4b4b4b;
}

.mainNav li.topNav.sfHover ul li a/*drop down menu item */
{
color:#CCCCCC

}

.mainNav li.topNav.sfHover ul li a:hover /*drop Down Menu ITEM Hover*/
{
display:block;
background-color:#666666;
width:100%;
color:#FFFFFF;
}

.mainNav li.topNav.sfHover ul li
{
display:block;
background-color:#999;
}

.mainNav li.utility a
{
display:none;
}

Thanks Sandy I will try this out and let you know how I get on. If I find any other tricks I will let you know

Kind regards

Kenrick