Solved

how to change nav so text fits on one line?

Posted on 2013-12-03
3
334 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

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Html5 string 3 23
HTML5 Get data in table rows 5 29
Help to align the buttons in a row 2 28
specific navigation button disappears on mobile devices 1 15
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.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

809 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