Solved

how to change nav so text fits on one line?

Posted on 2013-12-03
3
338 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
3 Comments
 
LVL 9

Accepted Solution

by:
WebDevEM earned 200 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 200 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Wordpress DB connection error 4 25
jQuery slideToggle one div at a time instead of all independently 33 76
Html Table Looping (part 2) 5 27
Head to not include on scroll 4 22
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

808 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