Mega Menu assistance

[Fancyfrills]

I cannot figure out where I am going wrong with my mega menu. There are supposed to be 7 links go across horizontally, but they are all messed up. The 'Quick Links' and 'Shop' show up on the bar and the rest disappear, only to be found if you hover your mouse under the middle of the green mega menu bar. They were all on the green bar but somewhere after changing the logo in the upper left hand corner, they got messed up. I tried changing the logo back to what it was before and the menus are still messed up. When I take the logo out all together, the links start in the middle of the page instead of being left justified. My website is www.fancyinfrills.com. Here is the CSS programming for the mega menu:


#mega-wrapper {width: 980px;margin:0 auto;display:block;position: relative;z-index:9999;background: url(../images/menu-bk.png) repeat-x;margin-top:-60px;}
#mega-wrapper .mega-menu {list-style:none;width:680px;margin:0px auto 0px auto;height:82px;padding:0px 0px 0px 0px;margin-left:300px;position:relative;top:20px;}
.mega-menu li {float:left;text-align:center;position:relative;margin-right:5px;margin-top:6px;border:none;}
.mega-menu li.fullwidth {position: static !important;}
.mega-menu li:hover {background:#8dc63f;border:0px solid #444;border-bottom:none;margin-right:5px;}
.mega-menu li.nodrop:hover {background:#fff;border:1px solid #444;padding: 5px 10px 3px 10px;}
.mega-menu li.nodrop:hover a {padding: 0px;}
.mega-menu li a {color: #fffffd;outline:0;padding: 5px 10px 3px 10px;text-decoration:none;display:block;font-size:1.05em;font-family: verdana, arial, helvetica, sans-serif;}

.mega-menu li:hover a{color:#fffffd;text-shadow: none;position:relative;z-index:11;border-bottom:0px solid #444;padding: 5px 10px 3px 10px;}
.mega-menu li:hover div a {display:inline;}
.mega-menu li .drop {padding-right:17px;}
.mega-menu li:hover .drop {padding-right:17px;}

/* bof right aligned menu item */
.mega-menu .right {float:right;right:0;margin-right:5px;}
.mega-menu li.right:hover {margin-right:5px;}

/* bof drop down styles */
.mega-menu .dropdown_1column, .mega-menu .dropdown_2columns, .mega-menu .dropdown_3columns, .mega-menu .dropdown_4columns, .mega-menu .dropdown_5columns, .mega-menu .dropdown_customer_service, .mega-menu .dropdown_aboutus, .mega-menu .dropdown_info, .mega-menu .dropdown_fullwidth {margin:4px auto;left:-999em;position:absolute;background:#ecf6dd;border:1px solid #ccc;padding:10px;text-align:left;}

.mega-menu .dropdown_1column {width: 145px;}
.mega-menu .dropdown_2columns {width: 300px;}
.mega-menu .dropdown_customer_service {width: 605px;}
.mega-menu .dropdown_aboutus {width: 585px;}
.mega-menu .dropdown_info {width: 470px;}

/* bof drop down on mouse hover left aligned */
.mega-menu li:hover .dropdown_1column, .mega-menu li:hover .dropdown_2columns, .mega-menu li:hover .dropdown_customer_service, .mega-menu li:hover .dropdown_aboutus, .mega-menu li:hover .dropdown_info {left:-1px;top:25px;}

/* bof drop down on mouse hover right aligned */
.mega-menu li .align_right {}
.mega-menu li:hover .align_right {left:auto;right:-1px;top:25px;}

/* bof column sizes */
.mega-menu .col_1, .mega-menu .col_2 {display:inline;float: left;position: relative;margin-left: 10px;}
.mega-menu .col_1 {width:145px;}
.mega-menu .col_2 {width:300px;}
.mega-menu .col_cs {width:605px;}
.mega-menu .col_aboutus {width:585px;}
.mega-menu .col_3 {width:455px;}
.mega-menu .col_4 {width:610px;}
.mega-menu .col_5 {width:765px;}
.mega-menu .col_6 {width:920px;}

/* Use the firstcolumn class for the items that stick to the left edge of the dropdown */
.mega-menu .firstcolumn {margin-left: 0; /* Clearing margin & left */clear: left;}

/*bof content*/
.mega-menu p, .mega-menu ul, .mega-menu li, .mega-menu h2, .mega-menu h3 {font-size:14px;font-family:Arial, Helvetica, sans-serif;line-height:21px;text-align:left;}
.mega-menu p {font-size:12px;line-height:18px;margin:0; margin-bottom:10px;color:#444443;}
.mega-menu h2, .mega-menu h3 {border-bottom:1px solid #888;margin-top:7px;color:#444443;color:#ed3a84;}
.mega-menu h2 {font-weight:400;font-size:21px;margin-bottom:18px;padding-bottom:11px;}
.mega-menu h3 {font-weight:600;font-size:14px;margin-bottom:14px;padding-bottom:7px;}
.mega-menu li:hover div a {text-decoration:none;text-shadow:none;border:none;padding:0;}

/* bof images */
.mega-menu .imgshadow_light {background:#fff;padding:4px;border:1px solid #777;margin-top:5px;margin-left:20px;-moz-box-shadow:0px 0px 5px #666;-webkit-box-shadow:0px 0px 5px #666;box-shadow:0px 0px 5px #666;}

/* bof standard lists styles */
.mega-menu li ul {list-style:none;padding:0;margin:0 0 12px 0;}
.mega-menu li ul li {font-size:12px;line-height:24px;position:relative;text-shadow: 1px 1px 1px #fff;padding:0;margin:0;float:left;text-align:left;width:145px;}
.mega-menu li ul li a {padding:0;}
.mega-menu li ul li:hover {background:none;border:none;padding:0;margin:0;}

/* bof 2 levels drop down */
.mega-menu .levels, .mega-menu .levels ul {/* all lists */padding: 0;margin: 0;list-style: none;}
.mega-menu li:hover .levels a {display:block;}
.mega-menu .levels a {display: block;width: 10em;}
.mega-menu .levels a.parent, .mega-menu .levels a.parent:hover {}
.mega-menu .levels li {float: left;width:150px;}
.mega-menu .levels li ul {/* second-level lists */position: absolute;border:1px solid #666;background:#ecf6dd;top:-23px;margin:15px 0px 0px 4px;padding:6px;left: -999em;}
.mega-menu .levels li ul ul {top:-23px;}
.mega-menu .levels li:hover ul ul, .mega-menu .levels li:hover ul ul ul {left: -999em;}
.mega-menu .levels li:hover ul, .mega-menu .levels li li:hover ul, .mega-menu .levels li li li:hover ul {left: 142px;}

/*bof contact form*/
#contact_form label, #contact_form legend {font-size: 12px;font-family:Arial, Helvetica, sans-serif;color:#fffffd;}
#contact_form legend {margin-bottom:10px;}
#contact_form {display: block;margin-bottom:10px;}
#contact_form label {display: inline-block;float: left;height: 36px;line-height: 36px;width:80px;font-size:12px;}
#contact_form input, #contact_form textarea, #contact_form select {width:190px;padding: 5px;border:1px solid #0a0a0a;-moz-border-radius: 3px;-webkit-border-radius: 3px;-khtml-border-radius: 3px;border-radius: 3px;font-size:12px;}
#contact_form textarea {resize:none;}
#contact_form input:focus, textarea:focus, select:focus {border:1px solid #333;background-color:#fff;}
#contact_form input:hover, textarea:hover, select:hover {}
#contact_form .required {color:#c00;}
#contact_form .form_buttons {margin:4px 0 0 80px;}
#contact_form .special {display:none;}
#contact_form .error, #contact_form .sent {font-size:11px;padding:2px 5px 2px 5px;text-shadow:none;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius: 3px;}
#contact_form .error {background:#fbe5e2;border:1px solid #f2a197;color:#fff;}
#contact_form .sent {background:#e12f8c;border:1px solid #c6d880;color:#37620d;}
#contact_form input.button {width: 80px;margin-right:10px;cursor: pointer;background-color:#8bac1a;border:1px solid #0a0a0a;color:#fff;padding: 4px 7px 4px 7px;float:right;}
#contact_form input.button:hover {color:#444;background-color:#b3ce18;border:1px solid #000;}

/*bof menu colors*/
.menu_red {/*background: url(../images/menu-bk.png) repeat-x;*/}
#mega-wrapper .menu_red {border: 0px solid #015b86;border-top: 0px solid #029feb;}
#wrapper_menu_full .menu_red {border-bottom: 1px solid #525252;}
.menu_red li:hover div a {color:#444443;}
.menu_red li:hover div a:hover {color:#8dc63d;text-decoration:underline;}
.menu_red li ul li a:hover {color:#9a1213;text-decoration:underline;}

/*bof customer service*/
.mega-payments{float:left;}
.mega-confidence{float:right;width:60%;}
.mega-about{float:left;width:70%;}
.mega-right{float:right;position: relative;margin-left: 10px;width:145px;}

/*bof connect with us*/
.h-sm{height:15px;width:15px;margin-right:10px;margin-bottom:5px;vertical-align:middle;}

[Fancyfrills]

I currently have a mega menu setup on my site. I want to eliminate the dropdown menus though and just make each link on the menu a static link. I also want to space the links out so they are more spaced out and cover the whole bar. My website is www.fancyinfrills.com. I know where to go to make the change, I just don't know what I need to do to make the change. Thank you.

[stevesh]

Easiest way might be to just scrap the mega menu thing and use EZ page links in the header. You can style them to look like the menu you have now, and space them the way you want.

[Fancyfrills]

I'm pretty new with Zen Cart, so what kind of undertaking will that take? How do I remove the mega menu and put an EZ Pages header up there without messing up the format of the page?

[Fancyfrills]

Stevesh made a great suggestion. Now can anyone help me replace my current mega menu at www.fancyinfrills.com with an EZ pages header? I am using a template and cannot figure out how to remove the mega menu all together. Granted I am still pretty new with Zen Cart and I don't have a whole lot of programming background, outside of basic html stuff. Please keep that in mind. Thanks.

[SPH]

You're doing what I see alot of people doing: taking a nice template and wanting to virtually completely re-design it. I don't even see a rationale for your wanting to change things.

Can you make the current links "static" by removing the code generating the drop-down part in the tpl_drop_menu.php?

You might find it easier to begin with one of the many templates that do not use drop-downs and emphasise the EZpages across the top. You might even be able to use the color scheme of this template.

You might look at the templates/common/tpl_header file, using the Classic or another template's for comparison. In fact, you might just try the default tpl_header to see what happens. You can do this by putting a ~ after your file like: tpl_header.php~ That should default to the default header.

Even if you get rid of the menu on this template, you will probably have to get rid of the respective code in the stylesheets, so you're not using unnecessary stylesheet code.

I put this template on my sister's main site. I don't consider it a true mega menu; those I consider when the drop-down shows all categories and subcategories simultaneously. Really not appropriate to show a few products and categories; better if one is closer to Walmart.

EDIT: Or perhaps you can get or make arrangements with Picaflor to do the template header for you.

[Fancyfrills]

Alright, so it sounds like it will be easier to leave it as is, which is fine. How can I edit the number of dropdown menus for each menu? Right now the 'Home' menu has 6 menus the dropdown. I would like to replicate the 'Jewelry', 'Hairbows', and 'Tutus' menus to be just like the 'Home' menu is now but of course rename them and map them to different pages. How can I make that change? Thanks again.

[SPH]

You may be more advanced with these menus than I, as I mostly tend to use templates as is save for maybe some color changes.

However, when these menus first came out here at zencart on Brandon's Abbiamo Supremo template, I tested his template on my main site and quickly put the original css menu on it, which can be seen here:

http://nettuts.s3.amazonaws.com/819_...emo/index.html

Do you see the 4 Columns drop-down? I took that and hand-built my top-level categories and I thought it very workable. And I hand-built my Information/Customer Service links in the 3 Column drop-down. Or perhaps you could re-produce the 1 Column drop-down several times (but you'd have to name them properly.)

Here is the css mega menu page which might give more information on how to work with them; I understand that this is where Brandon and Picaflor got it and then developed their own styles:

http://net.tutsplus.com/tutorials/ht...rop-down-menu/

For Zencart, they included the standard categories and often manufacturer links.

Speaking of hand-building category links, you might be able to do this in your current Jewelry and Tutus drop-downs?

[SPH]

Here is an example of what I consider more of a true mega menu, on my site here currently showing Apple Zen template. I changed the template's default drop-down to this under Categories:

http://www.fashion-mart.biz/

But perhaps it's not perfect.

[micallen]

Piggybacking on this thread...
1. Is there a way to add 1 static link to the top menu bar?
2. Where would I go to delete 1 of the drop-down links all together?

Or better yet (http://www.southeastcell.com) How can I replace "Quicklinks" with a static link?

Thanks,
Micallen