Need navigation name on two lines

(14 posts) (2 voices)

1. 

   layers
   Member

   Good day,

   I have some very long page/title names and need to have them show on two lines.

   For example I have a title: Clinical Research Services

   I need it to read on the navigation in this way (except centered):
   Clinical Research
   Services

   Can anybody tell me how to accomplish this?

   thank you,
   layers

   Posted 6 months ago #
2. 

   Elliott
   Support

   Hello layers,

   Your talking about the main navigation right? Try pasting this in Dashboard -> your theme -> General Settings -> Custom CSS,

   .jqueryslidemenu ul li {
       width: 100px;
   }

   And then play around with the width value until they look good.

   Posted 6 months ago #
3. 

   layers
   Member

   Works GREAT! Thank you very much.

   Layers

   Posted 6 months ago #
4. 

   layers
   Member

   One related question. There is one menu item that has only one line, so the rollover for that item does not extent the height of the full menu bar. You can see this issue at http://kineticwebwpplayground.com/

   Layers

   Posted 6 months ago #
5. 

   Elliott
   Support

   Try adding this,

   .jqueryslidemenu .children { top: 50px !important; }

   Posted 6 months ago #
6. 

   layers
   Member

   That's a no go.

   Here's what I have in the custom CSS area:

   .jqueryslidemenu ul li {
   width: 170px;
   text-align:center;
   }
   .jqueryslidemenu .children { top: 50px !important; }

   Posted 6 months ago #
7. 

   Elliott
   Support

   You also need to increase the width a bit more to hold all of your text,

   .jqueryslidemenu ul li {
   width: 230px;
   text-align:center;
   }

   Posted 6 months ago #
8. 

   layers
   Member

   Interestingly at 170 the text fit well on the two lines, just kept narrowing the width as there are a lot more links to add. But either way the single line menu item rollover does not cover the full height of the nav bar.

   If I understand correctly, all nav items will be the same width, correct?

   Posted 6 months ago #
9. 

   Elliott
   Support

   Yes, since you only have two menu items I would go ahead and leave it alone so each one will take up whatever width it needs. Go ahead and take off all CSS done and it should be displaying fine by default.

   If you plan on adding more menu items in the future and they get shoved to the next line then you can reduce the font size and padding to make more room but it would be better to use sub menus.

   Posted 6 months ago #
10. 

    layers
    Member

    Lots of menu items and almost all have submenu items as well. If you go to http://kineticwebwpplayground.com/ you will soon see what I'm up against.

    I removed the custom css you so kindly posted earlier, looks like it needs to go back in.

    So based on your previous remarks, my only real option is to reduce the font size or padding. But as you can see, these are still really long and the client will not modify the length.

    Posted 6 months ago #
11. 

    Elliott
    Support

    You can reduce the font size and padding like so,

    .jqueryslidemenu li a { font-size: 12px !important; padding-left: 5px !important; padding-right: 5px !important; }

    I would also consider renaming some of the menu items. For example "Clinical Research Services" could be renamed to "Services" and "News & Events" could be shortened to just "News".

    Posted 6 months ago #
12. 

    layers
    Member

    I can appreciate that Elliot, and your response is greatly appreciated. Even before I selected your theme to start with I suggested to change the names on the navigation and I thought the client was going to throw me out of his 4th floor window! other than the navigation issue, which I will ultimately figure out, the theme is nicely put together and even with the nav issue there is no way to anticipate everybody's needs.

    thank you again.

    Posted 6 months ago #
13. 

    Elliott
    Support

    Also, switching the text to lowercase would open up some more space as well,

    .jqueryslidemenu li a { text-decoration: none !important; font-size: 12px !important; padding-left: 5px !important; padding-right: 5px !important; }

    Posted 6 months ago #
14. 

    layers
    Member

    I have come across another potential way to address this issue, maybe it will come in handy for another user. I used the following custom CSS you provided earlier: .jqueryslidemenu li a { font-size: 12px !important; padding-left: 5px !important; padding-right: 5px !important; }
    .jqueryslidemenu ul li {
    text-align:center;
    }

    Then I used the custom links and inserted ab
    tag where I wanted the break to be and it worked like a charm.

    Posted 6 months ago #

RSS feed for this topic

Reply

You must log in to post.