Category tabs, alignment and dropdowns

I'd like to have the category tabs in the center, such that if there are three categories there would be one dead-center with one on each side of that one. Where in the stylesheet (and how) would I make this happen?

Secondly, I've installed the drop-down menu. Since increasing the size of the font, the sub-categories are now very crowded in their drop-down boxes. How do I increase the size of these boxes accordingly?

Thanks in advance!

Styling questions nearly always require seeing your site live so we can tell what will work with your particular template and mods.

https://www.performance-runners.ca

You can add to your stylesheet

#navCatTabsDropdown>ul {margin: auto; width: 45%;}

The width would need to be revised if you add categories or make their names longer, and would not work so well if you had a flexible-width page layout.

I wonder why this doesn't seem to be working...is there a line in the stylesheet that this would replace?

Try placing it at the end of the stylesheet.

I think that > in glenn's code should be a space.

No, actually the > is needed for correct function. A space will apply the styling to all levels of lists; the > limits the effect to the direct child level of #navCatTabsDropdown.

It worked when I tested it on the site. The end of the stylesheet is the safest place to put it.

Okay, that's the first bit done. Thank you.

How do I either make the subcategory boxes larger or reduce the subcat text-size so the dropdown menus are less crowded?

#navCatTabsDropdown ul ul li {}
will apply to subcategory items, but not top cats. You can put whatever styling changes you want for subs in there.

My horizontal Category tabs are not centered. I think whatever is causing that is also giving me vertical alignment issues above and below the navcatTabsWrapper. While the horizontal alignment is universal for all browsers, the vertical issue only seems to show up in Firefox. The website is http://www.monumentsplus.com.

Anyone know how I can correct this? Thank you.

I am using ZC 1.3.7 if that helps.

You have specified a height for #headerWrapper which is less than its content requires. Eliminate this property, as it is only useful in special circumstances:```
#headerWrapper {
background-image: url(../images/Header_1280x107.jpg);
background-position: center top;
background-repeat: no-repeat;

    margin-bottom: 3em;
padding-top: 0em;
    height: 107px;
    }

Thank you. That solved the vertical issues, but the categories are still not centered horizontally. Have I made a similar error somewhere else that is causing this?

That was a tricky one. There is left padding on the <ul> (in Firefox), but there is no rule at all that mentions padding and applies to that list. I finally remembered that FF and IE treat lists differently, with one using padding-left and the other using margin-left by default on lists. So it was built into the browser and not any written rule.
Find in your stylesheet around line 317, and add the part in red:```
#navCatTabs ul {

    margin: 0em;
list-style-type: none;
/*text-align: center;*/
    padding: 0;
}

Awesome!! That worked. Thank you very much gjh42. I have spent many ways and days trying to figure that one out.