Pure CSS Mega Menu

[jt3c]

Can the menu items be centered easily? I can move them around with margins in the appropriate line of css, but would like to have them automatically center so that if/when I add other items I don't have to go back and change the margin settings.

Thanks, JT

[picaflor-azul]

Can the menu items be centered easily? I can move them around with margins in the appropriate line of css, but would like to have them automatically center so that if/when I add other items I don't have to go back and change the margin settings.

Thanks, JT

If you post a link to your site, I can take a look.

Thanks,

Anne

[jt3c]

Well, I have it only on a local server at this point. Was just coming back to post that I spoke too soon and can't seem to center the menu items with margin or padding.
Here's a screen shot if it'll help:

Not sure that that came through.

Anyway, in the css the "float: left;" in the following line is causing all links to justify to the left side of the menu bar.

.mega-menu li {float:left;text-align:center;position:relative;margin:6px 20px 0px 0;border:none;}

I want to center them. Can't float:center, so is there a way to do it some other way? As mentioned above I've messed with margins and padding in a variety of places but can't get the items to center on the bar with the same relative margins/padding amongst themselves. This would basically end up with roughly 300px to the left and right of the whole group of links and whatever is the default in relation to each other.

Any help is greatly appreciated as I'm obviously still a relative noob.
JT

[jt3c]

PS. REALLY love the menu, thanks ever so!!! JT

[picaflor-azul]

Well, I have it only on a local server at this point. Was just coming back to post that I spoke too soon and can't seem to center the menu items with margin or padding.
Here's a screen shot if it'll help:

Not sure that that came through.

Anyway, in the css the "float: left;" in the following line is causing all links to justify to the left side of the menu bar.

.mega-menu li {float:left;text-align:center;position:relative;margin:6px 20px 0px 0;border:none;}

I want to center them. Can't float:center, so is there a way to do it some other way? As mentioned above I've messed with margins and padding in a variety of places but can't get the items to center on the bar with the same relative margins/padding amongst themselves. This would basically end up with roughly 300px to the left and right of the whole group of links and whatever is the default in relation to each other.

Any help is greatly appreciated as I'm obviously still a relative noob.
JT

I am sorry, but if I can see the site on a live server I can use firebug to help you. I can't do this on your local server ;-)

Thanks,

Anne

[beco1979]

Great module and the template 14916 I purchased last night is great! How do you adjust the number of letters that appear in the dropdowns - mainly the "Brands" Single column? I know it is in the stylesheet_mega_menu but what and where do I put in to stretch the number of characters/pixels of text that are shown? I'd really appreciate a pointer on this as I usually can figure these things out...?

[picaflor-azul]

Great module and the template 14916 I purchased last night is great! How do you adjust the number of letters that appear in the dropdowns - mainly the "Brands" Single column? I know it is in the stylesheet_mega_menu but what and where do I put in to stretch the number of characters/pixels of text that are shown? I'd really appreciate a pointer on this as I usually can figure these things out...?

Do you want to show more characters of the manufacturers names, or do you just want to increase the width of the drop down to show the names on one line?

Thanks,

Anne

[beco1979]

Hi Anne,
Thanks for your reply, I want to increase the number of characters shown in the brand/manufacturers menu.
At the moment it shows"amazing brandna.." But I would like it to be the full word " amazing brand name". Can this be easily done?
Thanks again,
Beco

[dw08gm]

Well, I have it only on a local server at this point. Was just coming back to post that I spoke too soon and can't seem to center the menu items with margin or padding.
Here's a screen shot if it'll help:

Not sure that that came through.

Anyway, in the css the "float: left;" in the following line is causing all links to justify to the left side of the menu bar.

.mega-menu li {float:left;text-align:center;position:relative;margin:6px 20px 0px 0;border:none;}

I want to center them. Can't float:center, so is there a way to do it some other way? As mentioned above I've messed with margins and padding in a variety of places but can't get the items to center on the bar with the same relative margins/padding amongst themselves. This would basically end up with roughly 300px to the left and right of the whole group of links and whatever is the default in relation to each other.

Any help is greatly appreciated as I'm obviously still a relative noob.
JT

If I understand you correctly, you want to centre the entire menu within the header. I share your grief. So many bells and whistles but no sweet solution for this.

One albeit messy and approximate way to do it is by editing the menu wrapper in stylesheet_mega_menu.css.

#mega-wrapper {
width: 980px; /*change 980px to an em value (eg 50em) that is only a few ems wider than the greatest width of your menu at various zooms. Applying an background colour will let you see the result. Too small a value and the menu may wordwrap.*/
margin:0 auto; /* auto must remain as it centralises menu.*/
display:block;
position: relative;
z-index:9999;
background:#ff0; /* Optional. For checking width. Can be retained if desired. */
padding-left:2em; /* this is the trick. Adjust this value until the menu looks near enough centred at various zooms. */
}

There are other ways to do this, (eg changing display:block; to display:table; etc) but I have yet to get them to work as desired.

Hope this helps.

[picaflor-azul]

If I understand you correctly, you want to centre the entire menu within the header. I share your grief. So many bells and whistles but no sweet solution for this.

One albeit messy and approximate way to do it is by editing the menu wrapper in stylesheet_mega_menu.css.

#mega-wrapper {
width: 980px; /*change 980px to an em value (eg 50em) that is only a few ems wider than the greatest width of your menu at various zooms. Applying an background colour will let you see the result. Too small a value and the menu may wordwrap.*/
margin:0 auto; /* auto must remain as it centralises menu.*/
display:block;
position: relative;
z-index:9999;
background:#ff0; /* Optional. For checking width. Can be retained if desired. */
padding-left:2em; /* this is the trick. Adjust this value until the menu looks near enough centred at various zooms. */
}

There are other ways to do this, (eg changing display:block; to display:table; etc) but I have yet to get them to work as desired.

Hope this helps.

One way to easily do this would be to add a margin-left to the .mega-menu li. You would need to play with the numbers until you get one that will center all of the links within the #mega-wrapper.

.mega-menu li {float:left;text-align:center;position:relative;margin-right:20px;margin-top:6px;margin-left:60px /*or whatever number of pixels works*/ ;border:none;}

Thanks,

Anne