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

7 replies
  • WEB DESIGN
  • |
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

PROBLEM: 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

Home |Long keyword 1| Long keyword 2| Long keyword 3| long keyword 4

To Each Link Looking Like This

Long
Keyword 1


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
#lines #links #navbar
  • Profile picture of the author Daniel Rickfold
    have you tried just using simple <br/>
    ?
    Signature

    Be The Change You Want To See In The World

    {{ DiscussionBoard.errors[2016119].message }}
    • Profile picture of the author warriorsteve
      Originally Posted by antipot View Post

      have you tried just using simple <br/>
      ?
      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.
      {{ DiscussionBoard.errors[2016197].message }}
  • Profile picture of the author mojojuju
    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.
    Signature

    :)

    {{ DiscussionBoard.errors[2016318].message }}
    • Profile picture of the author warriorsteve
      Originally Posted by mojojuju View Post

      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.
      Mojojuju,

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

      Thanks

      Steve
      {{ DiscussionBoard.errors[2016348].message }}
      • Profile picture of the author mojojuju
        Originally Posted by warriorsteve View Post

        Mojojuju,

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

        Thanks

        Steve

        Well, having never seen your site, I think a good place to start would be defining a width on the list items in your menu.

        Maybe change it from:

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

        to

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

        See if that does something remotely close to what you want. If it does, tweak it some more.
        Signature

        :)

        {{ DiscussionBoard.errors[2016491].message }}
        • Profile picture of the author warriorsteve
          Originally Posted by mojojuju View Post

          Well, having never seen your site, I think a good place to start would be defining a width on the list items in your menu.

          Maybe change it from:

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

          to

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

          See if that does something remotely close to what you want. If it does, tweak it some more.
          It didn't work so I just widened the nav bar and decided to have more than one row of page links. Gotta move on...

          Thanks for your input Mojuju
          {{ DiscussionBoard.errors[2017019].message }}
          • Profile picture of the author mojojuju
            Originally Posted by warriorsteve View Post

            It didn't work so I just widened the nav bar and decided to have more than one row of page links. Gotta move on...

            Thanks for your input Mojuju
            Hang on. I didn't notice you had the height attribute set on "nav-bar". You need to delete or comment that out because when the text wraps, it's going to be taller than the 33px you have there. Since overflow is set to hidden, then only the first line of text is going to show. Comment out those things and it should look better.
            Signature

            :)

            {{ DiscussionBoard.errors[2017112].message }}

Trending Topics