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

HTML & CSS
1

Hi all,

Good to be back!!! Been a looooooooooooong time since I did any web-work and hit SitePoint as a result.

I am working on a new site for our local youth baseball league. End result won’t be insanely fancy. Test site is here:

http://joomlatest.chrisbartlett.net/

What I am trying to do is get an operational drop-down menu at the top. You can see it in all it’s not-so-operational glory. LOL! To do this, I installed a module called RokNavMenu:

If you would, please look at the two attached screenshots. One is the menu when set to “default”. This is actually the look I prefer, but as you can see in “Contact” for example, the sub-menus appear without need to hover to get them. The 2nd screenshot is with the style set to “Fusion”. This actually works (sort of), but as you can see, the whole thing gets thrown to the right.

I cannot seem to find any way IN the Joomla Administrator to edit CSS or any of the files associated with this module, but via FTP, I found this CSS file related to “Fusion”.


body {font-family:Helvetica,Arial,sans-serif;font-size:12px;}

/* CORE */

.menutop,.menutop * {margin:0;padding:0;}
.menutop {float:left;position:relative;padding-bottom:2px;}
.menutop li {list-style:none;position:relative;width:100%;height:25px;float:none;}
.menutop li a.item {cursor:pointer;}
.menutop li span.item {cursor:default;outline:none;}
.menutop li .item {display:block;float:left;display:block;margin:0;height:25px;line-height:25px;}
.menutop li li .item,
.menutop li .item, .menutop li.active li .item {display:block;margin:0;text-decoration:none;float:none;}
.menutop li .fusion-submenu-wrapper, .menutop li ul {float: none;left: -999em;position: absolute;z-index: 500;}
.menutop li:hover li ul, .menutop li.sfHover li ul {top: -999em;}
.menutop li:hover ul, .menutop li.sfHover ul {top: 0;}
.menutop li li {position:relative;float:none;}

/* Drop Downs */
.menutop ul {width:175px;position:relative;}

/* Level 1 */
.menutop li .item {text-decoration:none;display:block;padding:0 15px;background:#ddd;border-color:#eee #ccc #ccc #eee;border-style:solid;border-width:1px;color:#333333;text-decoration:none;}

.level1 .f-mainparent-itemfocus .item {background:#ccc 100% 100% no-repeat;border-color:#ddd #bbb #bbb #ddd;border-style:solid;border-width:1px;}

.menutop li:hover > .item {background-color:#ccc;border-top:1px solid #ddd;border-left:1px solid #ddd;border-right:1px solid #bbb;border-bottom:1px solid #bbb;}
.menutop li:hover > .daddy:hover {background-image:url(../images/top-light.png);background-position: 100% 100%;}

/* Level 2 */
.menutop .level2 li > .item {background:#ccc;border-color:#ddd #bbb #bbb #ddd;border-style:solid;border-width:1px;}
.menutop .level2 li:hover > .daddy, .menutop .level2 li > .daddy {background-image:url(../images/level2-parent.png);background-position:100% 50%;background-repeat:no-repeat;}

.menutop .level2 .f-menuparent-itemfocus .item, .menutop .level2 li:hover .item {background:#bbb;border-color:#ccc #aaa #aaa #ccc;color:#333;}
.menutop .level2 .f-menuparent-itemfocus .daddy, .menutop .level2 li:hover .daddy {background-image:url(../images/level3-parent.png);background-position:100% 50%;background-repeat:no-repeat;}


/* Level 3 */
.menutop .level3 li > .item {background:#bbb;border-color:#ccc #aaa #aaa #ccc;border-style:solid;border-width:1px;}
.menutop .level3 li:hover > .daddy, .menutop .level3 li > .daddy {background-image:url(../images/level3-parent.png);background-position:100% 50%;background-repeat:no-repeat;}

.menutop .level3 .f-menuparent-itemfocus .item, .menutop .level3 li:hover .item {background:#aaa;border-color:#bbb #999 #999 #bbb;color:#333;}
.menutop .level3 .f-menuparent-itemfocus .daddy, .menutop .level3 li:hover .daddy {background-image:url(../images/level4-parent.png);background-position:100% 50%;background-repeat:no-repeat;}

/* Level 4 */
.menutop .level4 li > .item {background:#aaa;border-color:#bbb #999 #999 #bbb;border-style:solid;border-width:1px;}
.menutop .level4 li:hover > .daddy, .menutop .level4 li > .daddy {background-image:url(../images/level4-parent.png);background-position:100% 50%;background-repeat:no-repeat;}

.menutop .level4 .f-menuparent-itemfocus .item, .menutop .level4 li:hover .item {background:#999;border-color:#aaa #888 #888 #aaa;color:#333;}

/* regular hover */
.menutop li:hover .item:hover, .menutop li.active .item:hover  {background-color:#2c87c0;border-top:1px solid #138fdc;border-left:1px solid #138fdc;border-right:1px solid #0d5f92;border-bottom:1px solid #0d5f92;color:#fff}
.menutop li:hover .daddy:hover, .menutop ul li.active:hover > .daddy:hover {background-image:url(../images/hover-parent.png);background-repeat: no-repeat;background-position: 100% 50%;}

/* seperator hover */
.menutop span.item:hover,
.menutop li:hover span.item:hover {background-color:#666;border-top:1px solid #777;border-left:1px solid #777;border-right:1px solid #555;border-bottom:1px solid #555;color:#fff}
.menutop li:hover span.daddy:hover {background-image:url(../images/sep-parent.png);background-repeat: no-repeat;background-position: 100% 50%;}

/* Root Items */
.menutop li.root {width:auto;float:left;height:30px;}
.menutop li.root > .item {float:left;width: auto;height:30px;line-height:30px;}
.menutop li.root:hover > .daddy:hover {background-image:url(../images/top-light.png);background-position: 100% 100%;}
.menutop li.root > .daddy, .menutop li.root:hover > .daddy {background-image: url(../images/top-dark.png); background-position: 100% 100%; background-repeat: no-repeat;}

/* Active Items */
.menutop li.active > .item {background-color:#EE501C;border-color:#F86134 #D24916 #D24916 #F86134;color:#fff;}
.menutop li.active > .daddy {background-image:url(../images/active-parent.png);background-repeat: no-repeat;background-position: 100% 50%;}
.menutop li.root.active > .daddy, .menutop li.root.active:hover > .daddy {background-image:url(../images/top-light.png);background-position: 100% 100%;}


/* No JS */
.menutop li:hover > .fusion-submenu-wrapper, .menutop li:hover > ul {left:170px;top:0;}
.menutop li.root:hover > .fusion-submenu-wrapper, .menutop li.root:hover > ul {top:32px;left:0;}
.menutop li:hover ul,
.menutop li.sfHover ul {left: 0;top:32px;}
.menutop ul {width:175px;}
.menutop li li:hover > ul, .menutop li li.sfHover > ul {left:175px;top: 0;}

.menutop .level2 li {position:relative;float:left;width:100%;}

/* Fusion Pill */
.fusion-pill-l {height: 35px;margin:0 0 0 12px;top:6px;width:50px;position:absolute;left:0;}
.fusion-pill-r {margin-left: -12px;height: 35px;}

/* Fusion JS */
.fusion-js-container {display:block;height:0;left:0;overflow:visible;position:absolute;top:0;z-index:600000!important;background:transparent !important;}
.fusion-js-subs {display:none;margin:0 0 0 -2px;overflow:hidden;padding:0 2px;position:absolute;}

It’s been nearly 7 years since I played with CSS code, and while this is not completely foreign to me, it’s certainly not as obvious as it used to be. Truth be told, I don’t even know if the trouble I’m having is even CSS-related. But I suspect so.

Can someone give me a hand, please? Ultimately, what I would like is for the “Default” style to work. But anything functional will do. Thanks!!!

Chris

2

Hi Chris,

I can’t help you with joomla but you can get the menu working by adding this css somewhere after the original styles:


#header ul{padding:0}
#header ul.menu{text-align:left}
#header ul.menu li{float:left;}
#header ul.menu li ul{
left:-999em;
right:auto;
top:100%;
width:auto;
}
#header ul.menu li:hover ul{
left:auto;
}
#header ul.menu li li{
float:none;
display:block;
width:auto;
}
#header ul.menu li li a{
display:block!important;
float:none;
width:auto;
}
#header ul.menu li:hover > a{background:#0D4C89;color:#fff}

Hope it helps anyway :slight_smile:

3

Well I’ll be damned. After all this time, you’re still here! Hi Paul!

Thanks for the reply, I greatly appreciate it.

Just inserted your code at the end of what I posted (which is the stylesheet for the menu module). It does seem to be working! Have a look-see. Now I’m just wondering why the entire menu is up and to the right on the page… In Joomla, this should be right above the red block starting on the left. But that’s not working.

Would you have any idea, based on the code, why it’s ending up where it is? Damned if I can figure it out.

CB

4

Its position is set by this code:

#header ul {
display: block;
margin: 0px 0px 1px 0px;
text-align: right;
list-style-type: none;
padding: 10px 0px 10px 0px;
[COLOR="#FF0000"]position: absolute;
top: 0;
right: 0px;[/COLOR]
}

You could instead do this:

#header ul {
display: block;
margin: 0px 0px 1px 0px;
text-align: right;
list-style-type: none;
padding: 10px 0px 10px 0px;
[COLOR="#0000ff"]position: absolute;
left: 10px;
top: 50px;[/COLOR]
}

or just add this at the bottom of your style sheet:

#header ul {
left: 10px;
top: 50px;
}
5

Awesome! Your first suggestion worked beautifully, Ralph. The CSS you mentioned was in a file in Joomla called “layout.css” in the Beez_20 template (in case anyone else ever runs into this).

Thanks, guys! Now that I am slowly returning to the world of web design, I’ll be back.

I remembered this forum was the best, and yep… It still is.

Thanks!

CB

6

UGH!

I broke it again…

7

It seems the class “menu” in the HTML has been changed to “menutop”.

#header ul.menu[COLOR="#FF0000"]top[/COLOR] li ul{
left:-999em;
right:auto;
top:100%;
width:auto;
}

Bad idea to change class names at this stage. :slight_smile:

8

Interesting… I never changed that, so I can only assume something in Joomla! dynamically altered it. Never found anything to fix it, but there is setting in the module to enable javascript. That was set to “no”. I do know it typicalls wants to be set to “yes”, so i did that and it’s back working.

Odd.

Thanks, fellas!

CB

9

Hi again, guys.

Just thinking about styling, and on of the things I’d like to do is center the little downward-facing arrows. See how they are in the bottom right now? I’d like 'em centered. I think the code that is doing this (several instances) is:

background-position: 100% 100%;

I’ve tried a few changes to no avail. Any ideas, please? Thanks!

And also, what part of the CSS code is setting the height of the top-level menues? There’s a lot of dead space in there and I’d like to make them shorter to fir better. The sub-menus seem to be only as high as necessary, and I like that. Apologies, all; I’m RE-learning!

LOL

CB

10

You could try making these changes:

.menutop li.root > .item {
float: left;
width: auto;
[s]height: 30px;
line-height: 30px;[/s]
}


#header ul li a:link, #header ul li a:visited {
text-transform: uppercase;
[s]padding: 10px;[/s]
padding: [COLOR="#FF0000"]4px[/COLOR] 10px;
display: inline;
}

.menutop li.root > .daddy, .menutop li.root:hover > .daddy {
background-image: url(../images/top-dark.png);
[s]background-position: 100% 100%;[/s]
background-position: 100% [COLOR="#FF0000"]50[/COLOR]%;
background-repeat: no-repeat;
}

You will then have to do some repositioning of the menu, and make few changes to the .active class, but that will get you closer to what you want. :slight_smile:

11

Hmmmmm… Tried that, but couldn’t even find the code:


#header ul li a:link, #header ul li a:visited {
text-transform: uppercase;
padding: 10px;
padding: 4px 10px;
display: inline;
}

Well, perhaps I’ll get back to that. Here’s a more general question… These are… “Boxy”. Any way to round the top corners at all? I don’t know, just kinda “pretty them up” a tad…?

12

Looks like they are in the personal.css file.

Any way to round the top corners at all? I don’t know, just kinda “pretty them up” a tad…?

It’s easy to do with CSS3 rounded corners, but it will require more than that, as you’ll need to move them apart etc. or it will not look good. Personally, I’d say leave it for now, but it you do want them to look different, it might be worth doing a mockup first in something like Ps to establish the look you want.

13

OK, I’ll leave it for now and will have a look at the personal.css file. Will research rounded corners as well and get back to y’all. THANKS!

14

Hi again,

OK, something new… If you would be so kind, please look again at http://joomlatest.chrisbartlett.net/

There USED to be a fontsize editor at the top right. I was able to get rid of that in a js file. What I’d like to do is “lift” the whole site. Does that make sense? Basically, all that whitespace at the top is pointless. I’ve tried a few things but am having trouble, mainly due to the menu getting all out of whack when I change some things. There are multiple CSS files in play here and I’m not sure which one (or several) controls what I want to do.

Could I ask your expert eyes, please? Thanks!

CB

15

In your personal.css file, change this:

#all #header {
padding-top: [COLOR="#FF0000"]8.0em[/COLOR];
}

to something like this:

#all #header {
padding-top: [COLOR="#FF0000"]4em[/COLOR];
}

and change this:

#header ul {
display: block;
margin: 0px 0px 1px 0px;
text-align: right;
list-style-type: none;
padding: 10px 0px 10px 0px;
position: absolute;
left: 10px;
[COLOR="#FF0000"]top: 50px;[/COLOR]
}

to this

#header ul {
display: block;
margin: 0px 0px 1px 0px;
text-align: right;
list-style-type: none;
padding: 10px 0px 10px 0px;
position: absolute;
left: 10px;
[COLOR="#FF0000"]top: 0;[/COLOR]
}
16

I do believe that did it! Awesome! THANKS! Lovin’ it… Hours of Google searching and reading Joomla docs and forum posts to no avail (although I did get close). one post here… FIXED.

You guys rock.

CB

17

Glad to be of service. :slight_smile: It was just a CSS issue, really, so it would be hard to Google a specific situation like this. That’s what we’re here for. :slight_smile:

18

Hi again, Ralph (and Paul and everyone else)!

So I’ve been playing with the spacing/styling of this menu now for a few days. I’ve found a tiny bit of success, but only in styling. I’ve been able to edit some colors, etc.

Spacing issues??? EPIC FAIL.

Grrrrrrrrrr… I could use a little help here. I don’t want to get long-winded, so here’s the skinny:

  1. The top level menu. Too tall. Too much padding around the text inside the boxes. As an example, the sub-menu height is perfect. Left & right padding is also a bit much. Help!
  2. Text inside the top menus is centered. Perfect. Text inside the sub-level menus seems centered also, but there, I don’t want that. I want it on the left. And I’d like no (or very little) left/right padding in there. Help!
  3. Sub-menu width. Seems fixed at 200px. I found how to edit that (sorta, but it’s clunky), but shouldn’t it be percentage based on the text in the menu? Hate having a fixed width. Would rather have the width be as wide as the longest menu item necessitates. Does that make sense? Help!

THANKS! I am having no luck here and help would be most appreciated.

CB

19

Hi Chris,

You can over-ride some of the styles like this:


#header ul,
#header ul.menutop li,
#header ul.menutop li a{
padding:0;
height:auto;
}
#header ul.menutop li a,
#header ul.menutop li.active a{
padding:0 5px;
height:auto;
}
.fusion-js-subs li{
text-align:left;
padding:0;
}
.fusion-js-subs li a{
padding:0 5px!important;
}

Just adjust the padding to suit.

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.

20

Hi Paul,

Your code addition worked beautifully reducing the padding and giving the menus a very nice size. I don’t think I’ll even edit. And the left alignment of the text in sub-menus is perfect. :slight_smile: THANKS!

One unexpected result was the menu “lifting” up all the way to the top of the site. I was able to drop it down (desired) by changing:

#header ul {
display: block;
margin: 0px 0px 1px 0px;
text-align: right;
list-style-type: none;
padding: 10px 0px 10px 0px;
position: absolute;
left: 10px;
top: 0px;

To

#header ul {
display: block;
margin: 0px 0px 1px 0px;
text-align: right;
list-style-type: none;
padding: 10px 0px 10px 0px;
position: absolute;
left: 10px;
[COLOR=#0000cd]top: 10px;[/COLOR]

Now what I need to do is raise up the slideshow to meet the bottom of the top-level menu. Earlier in this thread, if I am re-reading correctly, this was suggested:

#all #header { padding-top: [COLOR=#FF0000]8.0em[/COLOR]; }

to something like this:


#all #header { padding-top: [COLOR=#FF0000]4em[/COLOR]; }

Well, I have it at 4.9em right now. Changed to 2.9em to try, but that didn’t lift the slideshow, rather, it seems to cut some of it off at the bottom.

Any ideas?

THANKS!