CSS Dropdown menu for the header- With Categories!

[paul3648]

What browser are you seeing this issue, and can I see your website? What do you mean by saying they "scroll"?

Maybe "scroll" is the wrong word - wrap? It happens with IE and Firefox.

I made a mistake about your site, Jade (http://www.zencart137.jadetrue.com/). This menu does not have this problem - seems to be a static length.

Here's a screen shot of my site with a reduced sized browser window. Since the menu text is white, when the menu wraps below, the background color is very light, making it hard to see the menu entry "Gifts":

[jettrue]

Maybe "scroll" is the wrong word - wrap? It happens with IE and Firefox.

I made a mistake about your site, Jade (http://www.zencart137.jadetrue.com/). This menu does not have this problem - seems to be a static length.

Here's a screen shot of my site with a reduced sized browser window. Since the menu text is white, when the menu wraps below, the background color is very light, making it hard to see the menu entry "Gifts":

Its not a static length, I have just left enough extra space on the menu. You have too many things on that row. Either you need to reduce the amount of items on the row, decrease the menu's default font size, or decrease the spacing between each item so that the wrap doesn't occur. You would adjust includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css.

[helpme]

Remove the lines that refer to it in your tpl_header.php file and then just use the call method in the instructions to call the tpl_drop_menu.

Make sure you create an override for the tpl_header.php file in your custom directory.

Here is how I have placed it in my tpl_header.php file:

<div id="headerWrapper">
  <!--bof-navigation display-->
  <div id="navMainWrapper">
        <!--bof-drop down menu display-->
    <?php require($template->get_template_dir('tpl_drop_menu.php',DIR_WS_TEMPLATE, $current_page_base,'common'). '/tpl_drop_menu.php');?>
  <!--eof-drop down menu display-->
  <!--eof-navigation display-->

Rick

Okay I tried this and it comes up looking funky. Any suggestions? www.mommyandbabyessentials.com Thanks
I LOVE THE TEMPLATE

[paul3648]

Its not a static length, I have just left enough extra space on the menu. You have too many things on that row. Either you need to reduce the amount of items on the row, decrease the menu's default font size, or decrease the spacing between each item so that the wrap doesn't occur. You would adjust includes/templates/YOUR_TEMPLATE/css/stylesheet_header_menu.css.

I was just looking at the source of your site, and you've got a couple of background images that are 2000px wide, so that's what's preventing your menu from wrapping.

I suppose I could something similar on my site, but my preference is to have the individual menu items wrap, so that the whole menu bar would become thicker (higher - bigger from top to bottom...)

It doesn't really matter how many items are on the menu, because at some point if the user reduces the size of the browser window far enough, or increases the size of the font (something I do all the time, which is why this is a problem for me) the menu bar will run out of space and wrap.

BTW - have you looked at your site in Firefox? There isn't any bottom scroll bar when you reduce the size of the browser window or increase the font size. The scroll bar appears correctly in IE.

[jettrue]

I was just looking at the source of your site, and you've got a couple of background images that are 2000px wide, so that's what's preventing your menu from wrapping.

I suppose I could something similar on my site, but my preference is to have the individual menu items wrap, so that the whole menu bar would become thicker (higher - bigger from top to bottom...)

It doesn't really matter how many items are on the menu, because at some point if the user reduces the size of the browser window far enough, or increases the size of the font (something I do all the time, which is why this is a problem for me) the menu bar will run out of space and wrap.

BTW - have you looked at your site in Firefox? There isn't any bottom scroll bar when you reduce the size of the browser window or increase the font size. The scroll bar appears correctly in IE.

Because I designed the site to increase in size when someone increases their font, that is why I have the really wide images (so they increase without distorting). As far as my menu not wrapping, I think its because of the width of my center section that is preventing it, not the 2000px wide images (else the scroll bar would start much earlier?) I think that perhaps your menu is just a *smidge* too long, and the right padding of the last menu item is what is forcing the wrap when the site is resized. Just try for grins removing the last item on your menu to see if the issue goes away.

You may also be able to decrease the spacing on the last menu item by giving it a special class like class="lessSpace" and give it a padding-right:0; value in the stylesheet_header_menu.css. I should probably put that in effect on the next update of the template... but anyway, I'd still like to see your site, and see if I can help more effectively.

I have looked at my site in Firefox, and the scroll bars work fine; they weren't working because of some code I was testing out, but that is removed now. The code in question is not in the download file, it was just on my test site.

I'm sorry to say that I won't spend a significant amount of time finding out how to make the menu wrap the way you're looking for, as I think having the drop down menu on two lines may impede its functionality (and I don't know if I can make it work), however if you figure it out and it works well, feel free to share it here.

[jettrue]

Okay I tried this and it comes up looking funky. Any suggestions? www.mommyandbabyessentials.com Thanks
I LOVE THE TEMPLATE

Can you define "Funky" a bit more, LOL! It looks like you wanted to remove them HOME LOGIN from the top? I'm not seeing anything too funky going on... you want to remove the blue top section altogether?

[helpme]

Thanks, Jade ,
I finally figured it out...there was to drop down menus and a bunch of stuff in the middle!! Thanks!
I don't know how you design all this stuff, Hats off to you!!

[HomsteadMom]

I'm having a problem with my drop down header. I would like the categories to be in the second spot next to home. But if I move it anywhere besides the ends, either the categories pop out of it on to a bar below. OR the other "tabs" combine into the categories one. Any ideas??

My site's www.homestead-acres.com

Thanks!

[jettrue]

I'm having a problem with my drop down header. I would like the categories to be in the second spot next to home. But if I move it anywhere besides the ends, either the categories pop out of it on to a bar below. OR the other "tabs" combine into the categories one. Any ideas??

My site's www.homestead-acres.com

Thanks!

Can you put it where you want it, and then let me look?

[vindiki]

Hi there. I hope this is a simple to solve. I do not want the my products to be displayed after hovering over a category. I only want the categories to be displayed. Another way to say it is that I want to turn off the display for everything that would be considered level 3 and higher. Is this possible? Thanks.