Mega Menu assistance

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 https://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;}

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 https://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.

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.

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?

Stevesh made a great suggestion. Now can anyone help me replace my current mega menu at https://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.

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.

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.

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_megamenu/demo/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/html-css-techniques/how-to-build-a-kick-########-css3-mega-drop-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?

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.

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

SPH,

Thanks for the help. I think using the template as is will work best for me right now. The only problem with that is whenever you hover over the 'About Us' and 'Shipping' tabs, the run offscreen. Is there anyway to center these? Thank you.

You're welcome. As for centering the drop-down, here is this template I put on my sister's main site:

findmypromdress com

Looks like the logo pushes the menu into place, and your logo looks higher and no longer pushing the menu in place. Can you put the logo back where it originally was?

Otherwise, I'm not yet that skilled with css or these menus. Perhaps you can indicate in the style sheet for the menu to float right or maybe even center it.

Has Picaflor been able to offer assistance?

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

Have you tried Picaflor's support thread on this template?

Take a look at step 14 of her readme on this template, it shows how to turn some things off in the menu.

Also, you might take a look at the tpl_drop_down.php file. You might be able to remove un-needed code and replace with another, hand-made link.

If you go to the original css menu links I posted up above, and download the demo, you will see how links are made, in particular it's 4 Column. BTW, all of the demo's links are to be replaced with your own, hand-made links.

EDIT: Here's a portion of Picaflor's step 14 instructions re the menu:

Hide any of the Drop Downs

You can hide any of the drop down menus by going to includes/templates/abbington_mega/css/stylesheet_mega_menu.css

Add a display:none; to the class for the drop down you want to hide. So, for example, if you wanted to hide contact us you would add this to the bottom of the file:

.contactus-li{display:none;}

The classes for the drop down menus are as follows:

.quicklinks-li
.categories-li
.manufacturers-li
.aboutus-li
.information-li
.contactus-li
.customerservice-li

whenever you hover over the 'About Us' and 'Shipping' tabs, the run offscreen. Is there anyway to center these? You can address these submenus with CSS to position them farther left as required. If I can see the site live, I can tell you what CSS to use.

Fancyfrills,

If you want your logo where it is, another possible solution is to find the code controlling the width of the drop-downs in question and perhaps making them narrower. Don't know how it might look, though.

Also, when playing with the Abbiamo template, I remember putting blank drop-downs to push (I think it was) the Contact Us over to the right more, to avoid a similar problem. But that might not look good either, for you.

gjh42:

You can address these submenus with CSS to position them farther left as required. If I can see the site live, I can tell you what CSS to use.

Yes, now some real help!!!

gjh42,

The site is https://www.fancyinfrills.com. Thanks.

SPH:

Have you tried Picaflor's support thread on this template?

Take a look at step 14 of her readme on this template, it shows how to turn some things off in the menu.

Also, you might take a look at the tpl_drop_down.php file. You might be able to remove un-needed code and replace with another, hand-made link.

If you go to the original css menu links I posted up above, and download the demo, you will see how links are made, in particular it's 4 Column. BTW, all of the demo's links are to be replaced with your own, hand-made links.

EDIT: Here's a portion of Picaflor's step 14 instructions re the menu:

Hide any of the Drop Downs

You can hide any of the drop down menus by going to includes/templates/abbington_mega/css/stylesheet_mega_menu.css

Add a display:none; to the class for the drop down you want to hide. So, for example, if you wanted to hide contact us you would add this to the bottom of the file:

.contactus-li{display:none;}

The classes for the drop down menus are as follows:

.quicklinks-li
.categories-li
.manufacturers-li
.aboutus-li
.information-li
.contactus-li
.customerservice-li

SPH... Thanks !!! A little tricky, because at one point, my whole site disappeared with the exception of my header pic. Funny how a few spaces where spaces don't belong can cause that much chaos !!

Thanks again. Mission accomplished. I just need to tweak the box size (or eliminate the drop down) for the link: Forums.
http://southeastcell.com

You're welcome!

And I've brought my site completely down with a single mis-placed apostrophe! '