Drop-Down Menu giving me some trouble - RokNavMenu for Joomla!

HTML & CSS
21

Try changing this (template.css, around line 10):

#fpssContainer104.fpss-template-sleek {
position: relative;
top: [COLOR="#FF0000"]53px[/COLOR];
z-index: 99;
width: 1030px;
height: 300px;
margin: 4px auto;
padding: 0;
overflow: hidden;
font-family: Tahoma, Arial, sans-serif;
}

to this

#fpssContainer104.fpss-template-sleek {
position: relative;
top: [COLOR="#0000ff"]40px[/COLOR];
z-index: 99;
width: 1030px;
height: 300px;
margin: 4px auto;
padding: 0;
overflow: hidden;
font-family: Tahoma, Arial, sans-serif;
}
22

BINGO! But it wasn’t in the template.css file. In the Joomla filesystem, it was /modules/mod_fpss/tmpl/Sleek/css/template.css.php. Rather irritating in the world of Joomla. THANKS!

OK, last things for this menu system, I think…

The problem with that menu is a the widths are written inline via the JS so you would be fighting it all the way if you tried to change them. Fluid width dropdowns are hard enough to do anyway and need a special construction to work so I think its too much trouble to change here. You could reduce the width if needed by using !important to over-ride the inline styling.

I don’t like the change to bold on hover as that will make the menu jump when the element gets bigger due to the bold text.

So then how should I tackle the width of the sub-menus? And I agree about the bold. Not to intrusive it seems, but bad precedent. How do I change that? Can’t find a bold or “strong” setting anywhere in CSS…

:frowning:

CB

23

I would leave the sub menus at a fixed width because it will be awkward to place the arrows and to get a full width background with the system you are running. Most dropdowns are fixed width so I don’t think its a problem. Otherwise the only other soution would be to apply widths to each as required which is also awkward.

You can remove the bold with something like this:


/* layout css -  add after line 122 */
#header ul li.parent > a {
font-weight:bold!important;
color:#000;
}
#header ul li a:hover {
font-weight: normal;
}
24

OK, I will leave them fixed in width. Gotcha. As far as the bold, I can certainly implement your solution, but I’m surprised there’s not some code to simply remove…?

25

Hi again, Paul.

So I went to layout.css to copy in your code and found on Line 122 the following:


#header ul li a:hover,
#header ul li a:active,
#header ul li a:focus
{font-weight:bold;}

As a test, instead of copying in your code, I simply commented out all that. Worked! No more bold on hover. All seems fine, but I wonder if there will be unintended consequences on a larger scale? Can’t imagine so, but I’m not the expert.

26

Yes I gave you the line that cancelled that out b ut you could of course remove it :slight_smile:


#header ul li a:hover {
font-weight: normal;
}

The extra code was just a suggestion to highlight the entries that had a submenu but not necessary.

27

G.N.A.R.L.Y.

Re-learning, this is as cool as I recall. Hey, here’s one… It’s been suggested to me (silly beta-testers) that the text in all the menus be “all bold all the time”. How might I accomplish that? I figure it’s worth a look.

28

You can probably do that with:


#header ul li a {
font-weight: bold;
}
29

NICE!

You guys are the best…