How to change length of navigation bars

[Dottino]

Hello,
I have some long navigation names, how do I make it so they don’t appear with this at the end … but have the full name of the page on the menu item? See screenshots. It would even be ok if the type was stacked. I would also like the hover action be adjusted to the same length/height too.
Thank you,
Andrea

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

nav#main-navigation ul.sub-menu li.menu-item > a {
    font-size: 14px !important;
}

Thanks
Mohammad

[Dottino]

Hello,
Thanks for your reply. I didn’t want the size of the font to change. I want to keep the 18pt I have set. I want the actual bars to be longer so it will fit the words in and doesn’t cut them off with … See sample.jpg. I want to add on like I did here (shown in yellow) so the words will fit. If the page title is really long I want it to all fit but maybe in two lines. Is that possible?
Thank you,
Andrea

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try this:

nav.std-menu .menu ul li > a, nav.std-menu .menu ul li > span.title {
  max-width: 400px;
}

– Kyle

[Dottino]

Hi,
That didn’t seem to do anything. I am attaching a screenshot so you can make sure I put it in right. I had already made a few custom css entries. Thanks, Andrea

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please clear the cache of browser and check for issue. Let me know your feedback.
Thanks
Mohammad

[Dottino]

Yes, it looks good now. Thank you. But I would also need the length of the bars for 3rd level navigation lengthened too. Please see under the menu: About-Testimonials- and then there are 5 that are in a 3rd level sub navigation that are still cut off: Hospital Testimonials, Patient Testimonials, etc.

http://litossc.com/dottino/

Thank you, Andrea

[Mohammad – SUPPORT]

Hi,
Please try this :-

nav.std-menu .menu ul li > a, nav.std-menu .menu ul li > span.title {
  max-width: 450px;

}

Thanks
Mohammad

[Dottino]

That didn’t work, I need to change the 3rd level sub navigation, please see screenshot I attached. See how Hospital Testimonials, etc are cut off still? 2nd level navigation is perfect now. I just need 3rd level fixed now.
Thank you,
Andrea

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

nav.std-menu .menu ul.sub-menu li ul.sub-menu{
min-width:250px !important;
}

Thanks
Mohammad

[Dottino]

Thank you, that is what I wanted. One more question, or should I submit a new ticket?
How do I get rid of the line that appears when you hover over a main menu item, or when that page is active? (see screenshot) I thought I found the answer in a forum, but it didn’t work for me.
Thank you,
Andrea

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

nav#main-navigation .menu > li > a span.nav-line {
  display: none;
}

– Kyle

[Dottino]

Thank you for your help. That worked!

[Kyle – SUPPORT]

No problem