?
Solved

how to change nav so text fits on one line?

Posted on 2013-12-03
3
Medium Priority
?
343 Views
Last Modified: 2013-12-09
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

0
Comment
Question by:jonathanduane2010
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 9

Accepted Solution

by:
WebDevEM earned 800 total points
ID: 39693368
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 39693698
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
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 800 total points
ID: 39695187
My advice - move the Search bar into the header, and change the class of the NAV wrapper from span8 to span12.

Job done :)
0

Featured Post

7 Extremely Useful Linux Commands for Beginners

Just getting started with Linux? Here's a quick start guide that has 7 commands that we believe will come in handy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…
Suggested Courses

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question