I am hitting a brick wall on my own... I am trying to modify my current theme to fusion and want to use a custom image for the background of the nav bar. I've got that but the spacing for each category is off and I can't find where to change it.

If you can help for free or fee, please do!

Here is a screenshot of where I am so far:
http://mommytips.com/navhelp.png

The blue text is the suckerfish menu that comes with Fusion. I need to get the items aligned on top of the correct image tab and then make the text dissappear for the top level so that when you hover over the image, the submenus pop up.

Any takers?

Comments

brentratliff’s picture

brentratliff commented

You can select the top level menu items with the following selectors.


.primary-menu-inner ul.menu li a:link, .primary-menu-inner ul.menu li a:visited {

}

in your style.css, themename.css, or local.css if you are overriding a current sub theme. Padding and width values can be changed.

jeremycaldwell’s picture

jeremycaldwell commented
Status: Active » Fixed

Thanks brentratliff, that is the correct method of targeting those elements within your theme.

tamitha’s picture

tamitha commented

I have tried all sorts of setting in that section of the CSS with no luck. Specifically - I need to move everything to the left about 30px and I need for the top level nav text to be invisible. Any hints?

THANKS!

brentratliff’s picture

brentratliff commented

Try this to move it over:

#primary-menu.block ul {
margin-left:-30px;
}
tamitha’s picture

tamitha commented

That did it perfectly! (I had something conflicting with it at first) But that code worked perfectly for aligning it. THANKS!

Anybody have a clue how to get the top level text to disappear? Everything I've tried affects both the top & sublevel - making them both disappear.

jeremycaldwell’s picture

jeremycaldwell commented

Hi tamitha, if you get the top level to disappear you then need to bring back the second and third level menu items. A change to the CSS cascades to the primary menu as well.

#primary-menu.block ul {
  margin-left: -30px;
}

#primary-menu.block ul li ul {
  margin-left: 0;
}

Try that bit of code. I'm using brentratliff's code for the top level and then specifying what to do with the second level. So top level is -30px to the left and then the second level is 0px to the left. Hope that helps!

brentratliff’s picture

brentratliff commented

Tamitha,

If you're still having trouble selecting the top level only (I haven't had a chance to look at it), you can use the Menu Attributes module (http://drupal.org/project/menu_attributes) to add a class to your upper level menus and then hide them with css. You will have to add the class in the Menu Attributes module settings for each top level item but I can't imagine they'll change frequently.

tamitha’s picture

tamitha commented

No luck with the CSS change (I'm going to try that module next)

I tried using the text-align: -9999 to get the top level to go away and 0px to get the 2nd to reappear - but no go. They are still linked together - I get them to both go away or both appear.

.primary-menu-inner ul.sf-menu li {
padding:0;
padding:0;
width:125px;
height:39px;
display:block;
float:left;
text-indent: -9000px;

}

.primary-menu-inner ul.sf-menu ul.links li a {
display:block;
width:125px;
height:39px;
margin: 0 8px 0 8px;
outline:none;
text-indent: 0px;

}

This is now live at www.mommytips.com if you want to play around with Firebug.

THANKS for all the help!

tamitha’s picture

tamitha commented

I installed the mod - gave one of my top-level's an id and then set that id in the CSS as:
.hidden-menu ul {
display: none;
}

then i tried

.hidden-menu {
display: none;
}

and I'm not seeing any effect. In Firebug, I don't see that ID attached to the menu item "Just for Moms". I'm sure I have something majorly wrong.

Thanks in advance for the help.

brentratliff’s picture

brentratliff commented

It may be as easy as '#' instead of '.' if you gave it an id instead of a class. If not, let me know. The class/id should be visible in the markup even if the css is incorrect.

tamitha’s picture

tamitha commented

That did the trick! I got the top level text to go away with
text-indent:-9000px;

BUT then, it goes away in the submenu and the icon for the top level is not clickable (it just calls the subcategories). So the text goes away - but there's no way to click the primary level category.

Surely, I'm not the only person to use images for the top level categories? It seems like this would be a more common request. Maybe I should look at using a different menu script?

Thanks so much for all the help - you guys rock!

brentratliff’s picture

brentratliff commented

I'm not sure I would use the text-indent method. Check out this podcast on image replacement. http://mustardseedmedia.com/podcast/episode1. I think the height:0, overflow:hidden method will work better.

tamitha’s picture

tamitha commented

That did work - but still the problem of not being able to click the icon for the primary. Thanks for that info.

jeremycaldwell’s picture

jeremycaldwell commented

I'm a big fan of the "text-indent" method but like brentratliff said, there are other methods.

After a few seconds looking at your site I tried this in FireBug and it seemed to work correctly. Give this a try if you would like.

#primary-menu ul.menu li a:link,
#primary-menu ul.menu li a:visited {
  text-indent: -9000px;
}

#primary-menu ul.menu li ul.menu li a:link,
#primary-menu ul.menu li ul.menu li a:visited {
  text-indent: 0;
}

Again I'm setting something for the top level then undoing it for the second level and all levels under it.

tamitha’s picture

tamitha commented

That's It! Thanks so much for putting a stop to my banging my head on the desk. lol

I would like to put in a suggestion for an easier way to use images in the top level nav for the future of this great theme!

Thanks, guys!

jeremycaldwell’s picture

jeremycaldwell commented

Cool, glad it worked :)

tamitha’s picture

tamitha commented
brentratliff’s picture

brentratliff commented

Eternalistic, Nice. I have to admit, that method is efficient :)

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.