CSS Dropdown menu for the header- With Categories!

I got the previous issue to work fine - I saw the solution buried in the posts here. Thanks!

The background of the menu still seems to extend a bit too far to the right, and even though I attempted to play with the CSS I still can't get it to look correct. Any suggestions are welcome.

Added a screen shot to illustrate:

Regards,
Matt

noleafclover614:

I got the previous issue to work fine - I saw the solution buried in the posts here. Thanks!

The background of the menu still seems to extend a bit too far to the right, and even though I attempted to play with the CSS I still can't get it to look correct. Any suggestions are welcome.

Added a screen shot to illustrate:

Regards,
Matt

It's not actually an extra "button", its just left over space. This is also answered within the thread, do a thread search (use the "search this thread" button that is next to the thread tools button) for "percentage width s".

remove the space before the "s". (this way I can tell people to use that search string, without adding a result)

Thanks so much, I was able to find the information and fix my problem. Thank you for maintaining this thread for so long, you are awesome man.

--Matt

Hello again!
I got the issue sorted out in firefox, but in IE it looks rather strange now. Check out the pic...

Any thoughts?

noleafclover614:

Hello again!
I got the issue sorted out in firefox, but in IE it looks rather strange now. Check out the pic...

Any thoughts?

when you centered the menu, what percentage did you use? You can use the exact percentage, you have to round down a smidge so it doesn't break in IE

Here, I have included the code from my CSS: ( I believe I used 16.667% )

body {  
	behavior: url(includes/csshover.htc);
	}
	
/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/

/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/ 

/*red */
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}


/*grey 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
	
#dropMenuWrapper {
	width:100%;
	height:2.17em;
	margin:0;
	font-size:1em;
	}
	
div#dropMenu {
  	width:70em;
  	margin:0 auto;
    text-align:center;
	z-index:1000;
	position:relative;
	}

div#dropMenu ul {
	margin: 0; 
	padding: 0;
	}
	
div#dropMenu li {
	position: relative; 
	list-style: none; 
	margin: 0; 
	float: left; 
	line-height: 1em;
        width:16.667%;
	}
	
div#dropMenu ul.level1 {
	width:70em; 
	margin:0 auto; 
	text-align:center;
	background:#4F4F4F;
	height:2.17em;
	z-index:1000;
	}
	
div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 0 .6em 0;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff; border-left:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} */
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;left:0;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

I tried to round down the 16.667% to 16, but when I do that, the extra space on the right shows up again (In IE and Firefox.) Thanks again for your quick reply.

noleafclover614:

Here, I have included the code from my CSS: ( I believe I used 16.667% )

body {
behavior: url(includes/csshover.htc);
}

/*green
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}
*/

/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/

/*red */
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}

/*grey
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/

#dropMenuWrapper {
width:100%;
height:2.17em;
margin:0;
font-size:1em;
}

div#dropMenu {
width:70em;
margin:0 auto;
text-align:center;
z-index:1000;
position:relative;
}

div#dropMenu ul {
margin: 0;
padding: 0;
}

div#dropMenu li {
position: relative;
list-style: none;
margin: 0;
float: left;
line-height: 1em;
width:16.667%;
}

div#dropMenu ul.level1 {
width:70em;
margin:0 auto;
text-align:center;
background:#4F4F4F;
height:2.17em;
z-index:1000;
}

div#dropMenu li:hover {}
/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;} */
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: .6em 0 .6em 0;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff; border-left:1px solid #ffffff;}
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 12em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:12em;}
/*div#dropMenu li.submenu li.submenu {background: url(../images/submenu.gif) 95% 50% no-repeat;} /
div#dropMenu ul.level1 li.submenu:hover ul.level2,
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;left:0;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 12em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0 0.5em 0.25em;color: white; text-transform:none;} / this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

> 
> I tried to round down the 16.667% to 16, but when I do that, the extra space on the right shows up again (In IE and Firefox.)  Thanks again for your quick reply.
Right, that's why I said round down a *smidge*. Try 16.66 or thereabouts

Thanks for your input.

Im currently trying a bunch of variations of 16.667 (a bit lower and higher) and the problem still isn't fixing itself. :shocking:

noleafclover614:

Thanks for your input.

Im currently trying a bunch of variations of 16.667 (a bit lower and higher) and the problem still isn't fixing itself. :shocking:

Well, you're going to have to make it low enough that the line doesn't break. So what I would make it as small as it can get without breaking, and get rid of the right line, so you can't tell that there is extra space leftover.

To do that, open up includes/templates/YOUR_TEMPLATe/common/tpl_drop_menu.php

and replace the entire shopping cart section with this:

Tried your suggestion, replaced the code, and now it seems to have shrunk the size of the leftover space to a very small gray sliver, but it's still visible :cry:

noleafclover614:

Tried your suggestion, replaced the code, and now it seems to have shrunk the size of the leftover space to a very small gray sliver, but it's still visible :cry:

could I see a link to your site?

Sure.

the chop haus DOT com

Also, as an aside, i had another question.

I don't know if this has been answered already, but when I make sub-categories within my Zen Cart Admin, specifically for the "Knives" section (originally titled Categories) it changes the category link to the site map for some reason.

You can see what I mean by checking out my site above. Thanks for all of your help.

noleafclover614:

Sure.

the chop haus DOT com

Also, as an aside, i had another question.

I don't know if this has been answered already, but when I make sub-categories within my Zen Cart Admin, specifically for the "Knives" section (originally titled Categories) it changes the category link to the site map for some reason.

You can see what I mean by checking out my site above. Thanks for all of your help.

Also, when I add subcategories, the drop down menu doesn't seem to include the top category when selecting the subcategory. For instance:

The hierarchy of the Sani-Safe Cooks knives should be:

Home :: Sani-Safe :: Cook's Knives
the chop haus DOT com /index.php?main_page=index&cPath=5_7

But when I click on Cook's Knives from the drop down menu, I just get

**
Home :: Cook's Knives
the chop haus DOT com /index.php?main_page=index&cPath=7**

notice how it doesn't include Sani-Safe on the page. I can't seem to figure this out.

Let me thank you again for keeping up with my problems, I hate to keep nagging you but you are a great help and resource to me and a lot of others on this forum. Thanks so much.

noleafclover614:

Sure.

the chop haus DOT com

Also, as an aside, i had another question.

I don't know if this has been answered already, but when I make sub-categories within my Zen Cart Admin, specifically for the "Knives" section (originally titled Categories) it changes the category link to the site map for some reason.

You can see what I mean by checking out my site above. Thanks for all of your help.

OK, if you want to change the menu to percentages, one of the instructions was to change the 70em's to 100%. The 70em I think is what is causing your menu to split into two lines, and what is keeping you from using 16.667%. If you don't want your menu to go all the way across, you could use a smaller percentage, like 85%. But the two 70ems need to be changed in stylesheet_header_menu.css.

The category link would be the site map, whether or not you changed it to "Knives" because that is what it is set to in tpl_drop_menu.php. You'll see my "categories" button goes to the site map as well. This is because there is no default zen cart page that only lists categories, so instead I had it go to the site map.

So you can just change that manually:

<li class="submenu"><a href="<?php echo zen_href_link(FILENAME_SITE_MAP); ?>"><?php echo HEADER_TITLE_CATEGORIES; ?></a>

to

<li class="submenu"><a href="knives_link_here">Knives</a>

To fix the issue in your next post, follow these instructions:
http://www.zen-cart.com/forum/showthread.php?p=391875&highlight=%24category_link#post391875

hi, i'm new zenner, i have few question to ask.

1)how can i move my menu to center, now it's on the left.

2)how can i remove the home and login at the top header there?

3)how can i change the background color?

http://www.ninten-shop.com/
this is the link to my site.

anyone can help me?:frusty:

I just wanted to say thanks jettrue, you really helped me out. Thanks for taking time out of your day to sit with my issues and work them out with me.

--Noleafclover614 :clap:

Ok Looked trough just about everything maybe I am not searching for the right terms.

https://www.mygirlshoes.com

I can't seem to get rid of the blue image that was behind the category tabs menu after installing this mod. (The one that is now in conflict with the header image. )

I tried toying around with css navcattab wrapper on the main css sheet...that gets rid of it but also causes the header image to disappear as well.

I guess since I am asking, I want all the text to be centered as opposed to the left alignment. Where would I look to make that happen?

Thanks ahead of time!

-Steve

Never mind I re named a file in the template called link_cap_left, that seemed to do the trick!

stevensea:

Ok Looked trough just about everything maybe I am not searching for the right terms.

https://www.mygirlshoes.com

I can't seem to get rid of the blue image that was behind the category tabs menu after installing this mod. (The one that is now in conflict with the header image. )

I tried toying around with css navcattab wrapper on the main css sheet...that gets rid of it but also causes the header image to disappear as well.

I guess since I am asking, I want all the text to be centered as opposed to the left alignment. Where would I look to make that happen?

Thanks ahead of time!

-Steve

Glad that worked out for ya!

If you want the menu spread out and centered, follow these instructions:
http://www.zen-cart.com/forum/showthread.php?p=390897&highlight=percentage+widths#post390897