Word wrap in menu bar of Top Nav skin

[kimzaidain]

The real estate on the menu bar of the top nav skin is pretty limited and I have some entries with a lot of letters. I could use acronyms, but generally we like to avoid them in our dept. I'd like to keep my long entries and just have them wrap, but I can't make that work. I tried the skin setting Menu (as well as Menu Item) > Block > Word wrap, changing default nowrap to Normal, but it makes no difference. Does anyone know how this can be accomplished?

[mdgates]

Can you post a screen shot?

[MadScrappa]

A screen shot would be useful, just to clarify if you mean the actual menu or the drop down level menus. I had a similar sounding issue because we didn't have a logo in the header and wanted the menu to extend from left to right. The headings wrapped to have two levels above the search bar and we didn't like that. Support were helpful and a few setting changes later I had the look I was after = one line of headings

[djohnson]

I had a similar issue...

I have multiple projects that I author in English the localize to French, German, and Spanish.

Some of my English menus were too long to fit my max-width (1000px), and most of my localized menus were as well. Worse, when I shrunk the window enough, all of my menus would word wrap before the mobile hamburger menu clicked in.

I resolved this by reducing the font size and the padding between menu items:

Code: Select all

@media screen and (max-width: 1023px) {
	ul.navigation { padding-right: 0; }
	ul.navigation a { font-size: 14px; }
	ul.navigation li > a { padding-left: 12px; padding-right: 12px; }
}
@media screen and (max-width: 900px) {
	ul.navigation { padding-right: 0; }
	ul.navigation a { font-size: 12px; }
	ul.navigation li > a { padding-left: 8px; padding-right: 8px; }
}

I hate having the menu text get much smaller but I didn't want the hamburger menu at large window widths and I didn't want to abbreviate the top-level menu labels.

I'd be interested to know, MadScrappa, what your solution ended up being. I have a logo in each of my help projects, and as I mentioned, I don't want the hamburger appearing when the window size is too wide.

[MadScrappa]

I'd be interested to know, MadScrappa, what your solution ended up being.

Hi djohnson, for us the solution was based on utilising the space that the logo uses to extend the headings. The Mad Cap Support team responded with details of SKIN settings that allowed us to encroach on the logo space. I can provide those if you are interested.

We had quite verbose headings that had to stay for our first project so I'm not sure if this will help but here's what we did instead of a logo. We also couldn't use the Slideshow function to really jazz up the Home page because our Help Outputs appear within an iframe. So I got around those two issues by using Mad Cap's Image Map functionality from "buttons" I drew up in Word and then linked to more image maps that allowed users to drill down to topics for more info. If it wasn't for Image Maps we would have to rethink our information design completely. I'm happy to elaborate on how we use Image Maps further if you are interested.

Here's what we ended up with for the home page for the first project, the one that I mentioned I had to contact the support team over.

Commercial CRM HELP.jpg

AND then here's the second project we did using the Top Nav template and getting those headings right was a job in itself. Again the image maps came into their own. We LOVE those!

Hope that's useful

Sorry about the late response too, I didn't set the notification correctly for this thread - Doh! Have done so now!

Jen

COS INstallations HELP.jpg

We are nowhere need as skilled in CSS as we need to be, and while I get the idea behind your code I do not completely understand it.