HELP..! I Need WP Nav-bar Links in TWO lines

by 7 replies
9
Hi guys and gals,

I have looked every where to find a solution for this to no avail so I thought I'd try the dependable old warrior forum.

Hopefully some CSS expert can help me out here

I am targeting a niche which is a Long keyword
I want to be able to have my links on the NAV bar in two lines...

Example: I need my nav-bar to go From This



To Each Link Looking Like This


I don't want to create any drop down menus or anything I'm just short of a little space to get all the page links I want on the nav bar.
Is their a snippet of CSS code I can use to do this?

This is the Nav-bar code

/* Nav Bar
-------------------------------------------------------------- */

#nav-bar {
width: 653px;
height: 33px;
min-height: 33px;
margin: 0px;
padding: 0px;
display: inline;
overflow: hidden;
float: left;
}

#nav-bar-content {
margin-left: 15px;
line-height: 33px; /* added this to fix vertical centering of text 17/11/09 */
}


#nav-bar ul{
width: 653px; /* fix added v2.2 12/08/09 */
margin: 0;
padding: 0;
list-style:none;
}

#nav-bar ul li {
float:left;
}

#nav-bar ul li a {
margin-right: 20px;
font-size: 0.75em;
font-weight: bold;
overflow:hidden;

Thanks in advance for any help and advice

Cheers
Steve
#website design #lines #links #navbar
  • have you tried just using simple <br/>
    ?
    • [1] reply
    • I am using Wordpress so where you enter the page name which appears as the Link on the Nav bar I don't believe you can use HTML there.

      I tried and it didn't work anyway.

      I think I need to specify this in the CSS Style sheet.
  • Assuming that those spaces between the words in the menu item are just spaces (not nbsp , then you should be able to tweak the CSS to set a width for each menu item and the words will wrap to a new line.
    • [1] reply
    • Mojojuju,

      Would you be able to show me what the code would be and where to put it?

      Thanks

      Steve
      • [1] reply
Join the discussion

Next Topics on Trending Feed