Creating breaks between category names in navCatTabs

I'm using category tabs on top of the page instead of categories listed in the side columns. This works great except for one little detail. The list breaks some of my multi word category names if they are at the end of the header. So, for example, a category called "Posters and Artwork" or "Sheet Music" might look something like this:

xxother categoriesxxxxxxx Posters
and Artwork xxxxxxxxxxx Sheet
Music

One quick fix I found is to actually include the the <br> tag in the category name where I want the break as I define the names in the admin. But that leaves me with a HTML tag coming up in places where I don't want it (like a category dropdown menu should I want to add one). So though I get the result I want at first, I suspect this is a sloppy fix for the long.

I know the output of the category tabs is created by my tpl_modules_categories_tabs.php which I have in includes/templates/CUSTOM/templates

How can I tell the code not to break the category names which have more than one word?

Post a link to this - as I could not get this to happen

kobra:

Post a link to this - as I could not get this to happen

Hi kobra,

You can see it happening on one of the links here: http://vinylfrontier.com/shop/

I thought about getting around it by adjusting the padding or margins in the tabs neighborhood via the stylesheet. That way I can avoid getting into the php.

I was able to split the text in my tagline, and even alter the font sizes to make the top line bigger by altering the header php. But the navTabs are a bit trickier.

Using FireFox and the web dev tools - I can interactively view and edit the stylesheet.

I replaced yours with a default classic stylesheet from the Zen Cart distro 1.3.8a then adjusted the body text size to .75em and the mainWrapper width to 850px to replicate your site.

After doing this there is no issue - So this must be in your stylesheet somewhere.

I would merge your alterations one by one into an updated stylesheet to get your images colors etc transferred over

But this is missing from yours and corrects this also missing from others as you have seperated these that were ganged so you may have issues with others

#navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.4em 0em 0.4em;
	margin: 0em;
	color: #FFFFFF;  
	font-weight: bold;
        white-space: nowrap;
	}

kobra:

#navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.4em 0em 0.4em;
margin: 0em;
color: #FFFFFF;
font-weight: bold;
white-space: nowrap;
}

kobra,

Thanks!  The nowrap was exactly what was missing.  I must have accidentally deleted it early on.
I have the Dev tool, and I'll run through the current stock stylesheet too.

Again, many thanks! :clap: