how to change nav so text fits on one line?

Hi Guys,

I am trying to change the nav bar on my site http://ias.bodyfirstnutrition.ie so it fits on one line

i cant find it on the css here?


/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
.sf-navbar {
	background: #BDD2FF;
	position: relative;
	margin-bottom: 5em;
}
/* provide background colour for submenu strip */
/* you should just set the menu's container bg colour rather than use pseudo-elements */
.sf-navbar:before {
	content: '';
	position: absolute;
	left: 0;
	z-index: -1;
	background-color: #BDD2FF;
	height: 200%;
	width: 100%;
}
.sf-navbar ul {
	box-shadow: none;
}
.sf-navbar li {
	background: #AABDE6;
	position: static;
}
.sf-navbar > li > a,
.sf-navbar > li > ul > li > a {
	border: none;
}
.sf-navbar > li > ul {
	min-width: 36em; /* set this to whatever suits your design */
}
.sf-navbar ul li {
	background: #BDD2FF;
	position: relative;
}
.sf-navbar ul ul {
	left: 0;
	top: 100%;
}
.sf-navbar ul ul li {
	width: 100%;
}
.sf-navbar > li > ul > li {
	float: left;
}
.sf-navbar li.current {
	background: #BDD2FF;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar ul li.current {
	background: #BDD2FF;
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
.sf-navbar ul ul li {
	background: #D1DFFF;
}
.sf-navbar ul ul li:hover,
.sf-navbar ul ul li.sfHover,
.sf-navbar ul ul li.current {
	background: #E6EEFF;
}

.sf-navbar ul li.current > a {
	font-weight: bold;
}

/*** point all arrows down ***/
.sf-navbar ul a .sf-sub-indicator { background-position: 0 -100px; }
.sf-navbar ul li:hover > a .sf-sub-indicator,
.sf-navbar ul li.sfHover > a .sf-sub-indicator {
	background-position: -10px -100px;
}

Open in new window

jonathanduane2010Asked:
Who is Participating?
 
WebDevEMConnect With a Mentor Commented:
Hi,

There are many different ways you can adjust it to fit on a single line, depending on what extra space you're willing to sacrifice.  My take on it is done by changing the following lines in main.css (starting at line 1422):
.sf-menu a {
color: white;
border-left: 0px solid #FFFFFF !important;
border-top: 0px solid rgba(255, 255, 255, 0.5) !important;
color: white !important;
transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
font-weight: 300 !important;
letter-spacing: .6px;
padding: 0.75em 0.5em 0.75em .5em !important;
}

Open in new window

The changes are both in the last 2 lines of that section, making the letter-spacing .6px and the right/left padding both 0.5em.

Hope this helps!

WebDevEM
0
 
COBOLdinosaurCommented:
Well you can do all kinds of things to reduced the space requirements but all of themare going to make the nav less readable, and in any it is not responsive.

The design will not work with that many nav entries, so you are going to have to choose:

Reduce the font-size, padding and even the letter spacing to make it more difficult to read
Reduce the number of entries in the nav

Abbreviate the text.

Move the select off of the line with nav

Those are the options.  Pick one or frustrate yourself with wasted effort trying to find a way to put two gallons in a one gallon container.

Cd&
0
 
Chris StanyonConnect With a Mentor Commented:
My advice - move the Search bar into the header, and change the class of the NAV wrapper from span8 to span12.

Job done :)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.