Category Bar - I want to eliminate multiple rows

1.3.9h

The costume storefront I'm working on has multiple Categories.

So far there are 3 rows of categories in my Category Bar.

I'm aware that making the font smaller will lessen the rows, but there will still be 2 rows. I want only 1 row, similar to a competitor's website:

I selected the text to show the links aren't images.

I tried hard-coding a <br> between two words in a category in Admin>Catalog>Categories/Products.
Like: Adult<br>Costumes and the <br> worked on the Categories 'sidebox', not the Categories Bar. :frusty:

Does anyone know a way to force a <br> in 2-word categories so I dont end up with 2 rows in the Category Bar?

losteras.com/store

Somewhat irrelevant, I just installed: category_tab_simple_dropdown_menu_1-3-9a :lamo:

If it were me, I would do some menu consolidation. For example:

Costumes
-Adult costumes
-Kids costumes
-Group costumes
-Plus size costumes
-######## costumes
-TV & movie costumes

Costume accessories
-Hats
-Makeup
-Mask
-Wigs

Does anyone know a way to force a <br> in 2-word categories so I dont end up with 2 rows in the Category Bar?

Relevant responses will be greatly appreciated. :bigups:

You don't need to force a coded <br />. Set the links to a fixed width (px or %) calculated for how many there are, and remove the white-space: nowrap; which in /classic/ is
stylesheet.css (line 284)#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a { color: #FFFFFF; margin: 0; padding: 0 0.5em; text-decoration: none; white-space: nowrap; }It might be best to just add after that rule```
#navCatTabs ul li a {white-space: normal;}

gjh42:

You don't need to force a coded <br />. Set the links to a fixed width (px or %) calculated for how many there are, and remove the white-space: nowrap; which in /classic/ is
stylesheet.css (line 284)#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a { color: #FFFFFF; margin: 0; padding: 0 0.5em; text-decoration: none; white-space: nowrap; }It might be best to just add after that rule```
#navCatTabs ul li a {white-space: normal;}

My navCatTabs already had NOWRAP. Here is everything:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #FF7700;
background-image: url(../images/headerWrapper_bg.jpg);
padding: 0.5em 0.2em;
font-weight: bold;
color: #FFFFFF;
height: 1%;
}

#navCatTabsWrapper {
background-color: black;
color: #9a9a9a;
background-image:none;
}

#navMain ul, #navSupp ul, #navCatTabs ul {
margin: 0;
padding: 0.5em 0em;
list-style-type: none;
text-align: center;
/*
line-height: 1.5em;
*/

}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;
}

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
white-space: nowrap;
/*
color: #ffffff;
*/
}

/* ADDED COLOR CHANGE and SIZE */
#navMain ul li a{
padding: 0em 0.5em;
color: black;
font-size: 1em;
}

#navMain ul li a:hover{
color: #FFFFFF;
text-decoration: underline;
}
/* FINISH HEADER LINKS COLOR CHANGE */

/* CATEGORY FONT SIZE AND COLOR */
#navCatTabs ul li a {
color: #ffcc00;
font-size: .75em;
}

#navCatTabs ul li a:hover{
color: #FFFFFF;
text-decoration: underline;
}
/* END CATEGORY COLOR CHANGES */

Adding the second Code snippet you posted did nothing.

I'm unaware 'where' to place the size/width statement you referred to. :frusty:

AND, unrelated. For some reason the Size and Color of the **navCatTabs ul li a** is reflecting the size/color/hover effect of the Categories Sidebox links. Unwanted... :frusty:

You have#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a { text-decoration: none; padding: 0em 0.5em; margin: 0; white-space: nowrap; /* color: #ffffff; */ }You need to reverse the nowrap with a new rule after that one. #navCatTabs ul li a {white-space: normal;}Or else just separate the selectors into two rules:```
#navMain ul li a, #navSupp ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
white-space: nowrap;
/*
color: #ffffff;
*/
}

#navCatTabs ul li a {
text-decoration: none;
padding: 0em 0.5em;
margin: 0;
/*
white-space: nowrap;
color: #ffffff;
*/
}
You can also set the li width in this section of the file:
#navCatTabs ul li {
width: 9.2%;
}

I'm sure I did something wrong. This is what I have now. Nothing changed when I looked in the browser. :frusty:

#navMain ul, #navSupp ul, #navCatTabs ul {
	margin: 0;
	padding: 0.5em 0em;
	list-style-type: none;
	text-align: center;
/*
	line-height: 1.5em;
*/

	}


#navMain ul li, #navSupp ul li, #navCatTabs ul li {
	display: inline;
	}


#navCatTabs ul li {
	width: 9.2%;
	}



#navMain ul li a, #navSupp ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
        white-space: nowrap;
	}

#navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
/*
        white-space: nowrap;
	color: #ffffff;
*/
	}


#navCatTabs ul li a {white-space: normal;}


/* FORMER RULE FOR ABOVE
#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
	text-decoration: none;
	padding: 0em 0.5em;
	margin: 0;
        white-space: nowrap;

	}
*/

A few more tweaks needed to make it behave correctly:```
#navCatTabs ul {height: 6em;}

#navCatTabs ul li {
width: 9%;
display: block;
float: left;
}

#navCatTabs ul li a {
white-space: normal;
}

The fonts in the Bar I'm working on changed when I installed the Category Tab Simple Dropdown mod. Could this mod be effecting the fixes you are suggesting?

Possible, especially if it has a stylesheet that is loaded after the one you are currently working on. In that case, do these rules in that stylesheet.

I'll disable it for the moment.

You would need to rename its stylesheet from .css to .bak in order to remove any effects from that.

Wow. :frusty:

There are only 2 files to make that simple dropdown work. I renamed them with an _Underscore at the beginning but doing that made everything below the header disappear...

OH saw your post above. Doing it now

Ok check it out! It works minus the simple dropdown thing! :clap:

I just readjusted the font size, but the text alignments look strange now and there's a giant space below them. I changed the width of the LI to 8% now they all fit. Just the unexplained space below now :/

I appreciate the help!

your competitor is using image for the links with swap out color fonts.

usernamenone:

your competitor is using image for the links with swap out color fonts.

No. I checked the page source. Its a <UL>.

I found the 'Height' causing the unwanted space below. Can you help me center the strange alignment the links are showing now?

I tried:

text-align: left, right, center and justified. The space between the words is screwing with it. If you dont know, I can live with it the way it is :)

gjh42 Thank you! :D

Nevermind! I found the derelict padding and made it 0em :laugh:

Thank you again!

Good work!