CSS Dropdown menu for the header- With Categories!

jettrue:

I would put everything back to original, then add the link like this:

Thanks! Worked great. Now, what do I do with the "About Us" link that is showing up under the "Information" heading? I will likely be adding more EZ pages and would like to be able to put them under the headings of my choice. Is this possible to do? If so, how would I do it? Thanks very much.

Vood:smile:

Help! The CSS Dropdown header works great in Firefox but it shifts to the right in IE 7.0. Also the DD header is slightly longer than the rest of the site. I'm using the narrow pages. I just started building it today. It's my first ZenCart so no laughing. Here is the link: https://www.guardfightgear.com/catalog.

boriZ:

Thanks for solving the first problem (with firefox) :hug: :flex:
Now.. menu is really breaking into two lines (shoping cart is in new line) but it's not the main issue... the real problem is that when you go to any link (let's say Categories) the table is not entirely grey, so things behind are seen.
edit:
And yes, I'm using the latest dropdown menu.

The images don't help me. Can I see your site? You can PM me if you want to keep it private.

metzler13:

Help! The CSS Dropdown header works great in Firefox but it shifts to the right in IE 7.0. Also the DD header is slightly longer than the rest of the site. I'm using the narrow pages. I just started building it today. It's my first ZenCart so no laughing. Here is the link: https://www.guardfightgear.com/catalog.

In includes/templates/apple_zen/stylesheet_header_menu.css, change the two instances of 100%, back to 70em.

Vood:

Thanks! Worked great. Now, what do I do with the "About Us" link that is showing up under the "Information" heading? I will likely be adding more EZ pages and would like to be able to put them under the headings of my choice. Is this possible to do? If so, how would I do it? Thanks very much.

Vood:smile:

Well, just remove it:

If you want to move other ezpages, you'll just have to do them manually.

Well that took care of the width of the header menu in FIREFOX but it is still shifting off the page in IE.

Also, any idea how to figure out why none of the sideboxes will display. At one time I set to not display any of them but I changed back but can't get any to display. I've change the settings in the layout boxes controller but still to no success.

metzler13:

Well that took care of the width of the header menu in FIREFOX but it is still shifting off the page in IE.

Also, any idea how to figure out why none of the sideboxes will display. At one time I set to not display any of them but I changed back but can't get any to display. I've change the settings in the layout boxes controller but still to no success.

Did you turn the sideboxes back on, under "Configuration", "layout settings"?

As far as the shifting, I'm looking into that... apparently that's something I missed, cause it happens on my test site! Dang darn dang!!

I thought I turned them back on but apparently I didn't. Oops!

I haven't said this yet but GREAT TOOLS and TEMPLATES!!!

Hi Jettrue,
Think everything is in order. I would love to know how to make the first drop wider for longer cat names.

was able to do it but then it overlapped the subcat1 that needs to be a little wider too.

I know this is all css but im lost in the

div#dropMenu ul.level4 li.submenu:hover ul.level5,
div#dropMenu ul.level5 li.submenu:hover ul.level6,
div#dropMenu ul.level6 li.submenu:hover ul.level7,any help is greatly appreciated.

          Thank you,
                             John

metzler13:

Well that took care of the width of the header menu in FIREFOX but it is still shifting off the page in IE.

AHA!

Remove text-align:center

from #dropMenuWrapper

in stylesheet.css

PHEW, that was hard to find!

bumba000:

Hi Jettrue,
Think everything is in order. I would love to know how to make the first drop wider for longer cat names.

was able to do it but then it overlapped the subcat1 that needs to be a little wider too.

I know this is all css but im lost in the
any help is greatly appreciated.

          Thank you,
                             John

There are three instances of 12em in stylesheet_header_menu.css. Make all of them wider, then it will work well. If you only change one or two, then you run into problems.

jettrue:

AHA!

Remove text-align:center

from #dropMenuWrapper

in stylesheet.css

PHEW, that was hard to find!

That did it! Thanks a million!

Hi, I am trying to implement this template into my bi-lingual test site (chinese/english). the url is = http://enjoyhotel.com.tw/dev/estore/ b
As you can see, the title/dropdown names didn't appear correctly, would you pls advise on how to go about correcting this issue? many thanks!!

great work on the template!

Very nice. Thanks Jettrue

  John

This is a most amazing template, I love it. I do have a question. How does one go about commenting out certain header options? I notice that everytime I go to the "New Products" page, theres an error on the column to the right, so I just figured I'd comment out that page as its the only place the error shows up. And then I also would like to at this point in time disable the discount coupons page as I don't have anything like that setup right now. What are the best ways about going to this? I don't know anything about HTML really. Thanks. And again, great template!!

https://www.thedidgmaster.ca/onlinestore

cmku:

Hi, I am trying to implement this template into my bi-lingual test site (chinese/english). the url is = http://enjoyhotel.com.tw/dev/estore/ b
As you can see, the title/dropdown names didn't appear correctly, would you pls advise on how to go about correcting this issue? many thanks!!

great work on the template!

There are language files in this template, so if you're using more than one language, you'll need to make a copy of any english language files, copy them to the chinese folder, and of course change the text in the language file to be chinese. :hug:

thedidgmaster:

This is a most amazing template, I love it. I do have a question. How does one go about commenting out certain header options? I notice that everytime I go to the "New Products" page, theres an error on the column to the right, so I just figured I'd comment out that page as its the only place the error shows up. And then I also would like to at this point in time disable the discount coupons page as I don't have anything like that setup right now. What are the best ways about going to this? I don't know anything about HTML really. Thanks. And again, great template!!

https://www.thedidgmaster.ca/onlinestore

I wouldn't ignore that error. It seems to have something to do with your installation of a zen cart faq manager? I'd go to the support thread for that mod, and ask them for help. Just ignoring that sql error may get you into trouble in the future. From some reading in the Faq Manager thread, there seems to be a common problem with sql issues.... Are you using the latest version of Faq Manager? Also, before you get too far into developing this site, I'd install the latest version of Apple Zen, as well.

To disable discount coupons, go to "Modules", "Order Total", and uninstall the Coupons module. It will disappear from the drop down menu.

Here's a link to a section of the Faq Manager thread:

http://www.zen-cart.com/forum/showthread.php?t=48457&highlight=p.products_date_added&page=9

around thread #86, there begin to be some solutions offered, but again, I would post there if you haven't already.

boriZ:

first pic
http://img221.imageshack.us/my.php?image=firefoxev8.jpg
second pic
http://img98.imageshack.us/img98/1675/ie7fv2.th.jpg
third pic
http://img233.imageshack.us/my.php?image=menuyh0.jpg

Thanks for solving the first problem (with firefox) :hug: :flex:
Now.. menu is really breaking into two lines (shoping cart is in new line) but it's not the main issue... the real problem is that when you go to any link (let's say Categories) the table is not entirely grey, so things behind are seen.
edit:
And yes, I'm using the latest dropdown menu.
The issue is this:

li { background:url(../images/list_back.gif) repeat-x bottom; padding-left:12px; line-height:22px; color:#BDBDBD; }

inside style.css, which says that EVERY list item, anywhere on the site, needs to have the little white dot, and 12px of left padding. The 12px of left padding is what is making the menu wrap.

So, I would change the above to:

.columnLeft li { background:url(../images/list_back.gif) repeat-x bottom; padding-left:12px; line-height:22px; color:#BDBDBD; }

so that this only occurs for things in the sideboxes, and not the whole site.

thanks for your fast help!
Just 1 question left... Can I remove that little triangles in the menu and how? :hug:

boriZ:

thanks for your fast help!
Just 1 question left... Can I remove that little triangles in the menu and how? :hug:

boriZ
if you are working on css drop menu here is your answer. . .
in stylesheet_header_menu.css should be line 52 you'll find

div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}

you need to place a /* before the line. it should look like this,

/*div#dropMenu li.submenu {background: url(../images/dropmenu.gif) 95% 50% no-repeat;}

Hope this helps.
John