CSS Dropdown menu for the header- With Categories!

[jettrue]

For a learning experience I combined this mod with the Future Zen template by Kuroi. Currently developing this site off-line. Good results so far.

However centering the menu bar is not working out for me. By default the menu bar is left justified but that does not look good. I'd rather have it float in a horizontally centered position and maintain centered position with respect to shop logo on top of page. And look readable when browser type size is increased or decreased or when OS GUI screen resolution and/or type size is altered.. (currently when type size is reduced the menu becomes difficult to read and when font size increased menu wraps to a second line (prematurely) and submenu items wrap to a second line.

Is it possible to freeze the menu so it does not change size relatively (keep size absolute) without messing up the menu functionality?

I've read through most of this thread and did not find a solution that works.

I can post relevant CSS if needed. Thanks for any advice or pointers.

Woody

Hi Woody... centering it shouldn't be difficult, if #dropMenuWrapper has margin:0 auto and text-align:center, the menu will be centered.

If you follow my instructions for giving each item a percentage (just search this thread for percentage), then it can still resize and not wrap. But I can understand wanting to stop the resizing when you're not using it in a site that also resizes like apple zen when the font size changes. Was that a run on sentence, lol? But remember, people will still be able to change their font size no matter what. But to stop the resizing of the menu, change all em's to px's.

[jettrue]

Awesome, thank you - that does work, though it doesn't align it properly for each main element - as some of the text is shorter - but I think it should be fine. Last question, is it possible to have only the last item ("FEATURING") in the main links to be a different color (blue)? How can I setup the css to do that?

Sure. Just open up the common/tpl_drop_menu.php, and give that item a special id, something like this:

<a id="blueLink"........

then in the css somthing like this:

div#dropMenu li a#blueLink {color:#0d0fdf}

[Moebiusenterprises]

Well, that noLine isn't showing up online. I noticed a small issue with your code above, but the noLine should still be showing up. Anyhoo, try replacing the whole section for the shopping cart:

Well, that little issue may have been the problem, because that worked like a charm!

Thanks again :)

[pongky]

Actually Jettrue, it's not so simple as that. Those are all categories that I have in my fly-out navigation, so it is automatically generated, meaning that I can't simply add one nav link on the end. Wonder if there's a way to single out the last item in the nav, to give it a different css styling.

[MomoFood]

Hi All, I don't know what I've done wrong but.... I can not get PayPal payments since installing this menu. My customers get an error: "HTTP header invalid". This is only happening for PayPal payments and none other. It happens once they are done with check out steps 2 & 3 and have been sent to the PayPal site to make payment. After clicking "confirm" to pay, the payment fails and they get the error about invalid header.

Can anyone help me and let me know what I didn't do or what I did wrong..

Thanks! Keana, http://www.momofood.com/store

[jettrue]

Hi All, I don't know what I've done wrong but.... I can not get PayPal payments since installing this menu. My customers get an error: "HTTP header invalid". This is only happening for PayPal payments and none other. It happens once they are done with check out steps 2 & 3 and have been sent to the PayPal site to make payment. After clicking "confirm" to pay, the payment fails and they get the error about invalid header.

Can anyone help me and let me know what I didn't do or what I did wrong..

Thanks! Keana, http://www.momofood.com/store

I don't think this has anything to do with the menu, did you ever install the paypal patches:

http://www.zen-cart.com/forum/showthread.php?t=56216

Go down to the last patch.

[jettrue]

Actually Jettrue, it's not so simple as that. Those are all categories that I have in my fly-out navigation, so it is automatically generated, meaning that I can't simply add one nav link on the end. Wonder if there's a way to single out the last item in the nav, to give it a different css styling.

Well, the only thing I can think of is to code the php in classes/categories_ul_generator.php to force the last item to have a different class. Other than that, I dunno! Unless there was some way to force that category NOT to generate in the menu, then hard code that last category. Sorry I don't have a better answer!

[Woodymon]

Hi Woody... centering it shouldn't be difficult, if #dropMenuWrapper has margin:0 auto and text-align:center, the menu will be centered.

Hi Jade,

Thanks for follow-up. Already tried those settings in both:
div#dropMenu
#dropMenuWrapper

And I commented out width settings in both above, but still no impact. The menu bar is pushed most of the way to the left (just a small space between left margin and the beginning of the menu).

I inspected with Firebug and discovered an area to the right of the menu still within control of both above selectors. It almost appears there is a "ghost" top level menu item in the last position on the menu.

This is true when visiting site as guest and cart is empty or when an item in cart (so 'checkout" sub menu appears below "Shopping cart" menu).

I copied the output from Firefox Web Developer > Information > Display Id & class details and pasted below.

.clearBoth
.flash
#dropMenuWrapper
#dropMenu
.level1

* .submenu Home .level2
o All Products
o Search

* .submenu Categories .level2
o Books
o eBooks
o CDs
o DVDs
o Documents

* .submenu Information .level2
o Shipping Info
o Privacy Policy
o Conditions of Use
o Site Map
o About Us

* Contact Us

* .submenu My Account .level2
o Log In
o Create Account

* .noLine Shopping Cart

.clearBoth

When item is in shopping cart the last menu item looks like this instead.

* .submenu Shopping Cart .level2
o Checkout

.clearBoth

I hope this makes sense.

Is this how it is suppose to be "out of the box"? I do not believe I have made any customizations to the menu which would make it behave differently from the default install.

Early in this thread I see you made some comments that there is "suppose to be" some blank space at the very end of the menu (to the right)? So this may be related to my issue. But I have not yet discovered the technique to repair, to rid of this space so the menu displays centered on the page.

I understand it is difficult for you to make suggestions without seeing the site. But at the moment I'm on dial-up so I have to do my testing work offline for a short time.

Thanks,
Woody

[Woodymon]

As previously reported the settings offered by Jade did appear to not help.

However at "nomal" browser type size, in both FF 2.006 and IE6, I was able to make the menu approximately center with the following CSS.

#dropMenuWrapper {
height:2.17em;
text-align:center;
font-size:1em;
padding-bottom: 1em;
}

div#dropMenu {
margin-left: 14%;
margin-right: 12%;
text-align: center;
z-index: 1000;
position: relative;
}

div#dropMenu ul.level1 {
text-align: center;
height: 2.17em;
z-index: 1000;
}

The 14% and 12% margins above are to compensate for "leftover space", as Jade terms it, to the right of the menu bar which I don't know how to rid of.

Is it possible to rid of that space or is it inherent in the design of the menu bar and impossible to remove?

And even with adjustments so the menu appears centered in Firefox at normal browser font size the menu still appears a little bit off center in IE6.

However once browser type size is changed, the menu bar is no longer centered in either browser. And I'm scared to see how well IE7 centers the menu.

Any ideas on how to center the menu in all browsers no matter which browser font size chosen?

It appears the good old days of <center> are gone

Woody

[CES]

Do you want to have a look at my shop and see if that is what you want?

www.NicheLocks.com

If you want I can post my css to show what I did. (I can't remember if or what alterations I did make - lol.)

Craig