Solved

how to change nav so text fits on one line?

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Session on Html 8 41
Top Aligning Inner Divs 5 23
CSS - how to make button/link change to black on hover? 2 17
CSS (jquiry mobile) question 3 4
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 …
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

749 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