Menu: Make long page names wrap to multiple lines (not wrapping the whole menu)

smcust

I have this menu:

http://tinyurl.com/m79vnex
Password = dgrinpass

(note, if re-posting links, please use tinyurl or similar)

I'm trying to make the "How to" page name wrap to multiple lines. Reducing the width of the entire menu makes the menu still 1 long line, wrapping the last couple of links to the next page. But, I just want to make the long page name wrap to 2 lines, while keeping the entire menu and the rest of the pages centered both vertically and horizontally.

tomnovy

Hi Smcust,

I do not think this would be possible using CSS. The only option that I can think of is to create your menu completely using HTML and CSS code.

This is not the best solution - because every link in your navigation will have to be coded manually. But this is something to consider.

Allen

I found a way with CSS to wrap it to multiple lines but could not find way to reduce menu width.

.sm-page-widget-7335931 .sm-page-widget-nav-toplink {
width: 130px;
padding:0px 15px 0px 0px !important;
}

was
padding: 0px 13px 0px 2px !important;

smcust

Allen wrote: »

I found a way with CSS to wrap it to multiple lines but could not find way to reduce menu width.

.sm-page-widget-7335931 .sm-page-widget-nav-toplink {
width: 130px;
padding:0px 15px 0px 0px !important;
}

was
padding: 0px 13px 0px 2px !important;

I think this'll work! It seems all menus are now "bottom centered", how can I get them all (including the menu spacer), to be "middle centered"?

Allen

I don't have a clue on centering, sorry.

smcust

Ah ha! After lots of playing around, using your code as a base, I got the text to align vertically (vertical-align: middle). Here's the code:

.sm-page-widget-7335931 .sm-page-widget-nav-toplink {
  line-height: 1.5;
  max-width: 150px;
  padding: 0px 21px 0px 6px !important;
  vertical-align: middle !important;
}

One issue though, the pipes/vertical lines/separates between the page titles in the top menu navigation are based on each "cells" height, meaning the page with 3 lines makes the pipe separator to it's immediate right 3 lines long, while others are only 1 or 2 lines long. I tried messing with height: 75px;, but all un-does the vertical align. There must be a way to make all the pipe separator lines the same height?

leftquark

smcust wrote: »

One issue though, the pipes/vertical lines/separates between the page titles in the top menu navigation are based on each "cells" height, meaning the page with 3 lines makes the pipe separator to it's immediate right 3 lines long, while others are only 1 or 2 lines long. I tried messing with height: 75px;, but all un-does the vertical align. There must be a way to make all the pipe separator lines the same height?

Unfortunately no -- the border height is based on the height of the element, which in this case is the <LI>. If you set the height to a given value, as you mentioned, you lose the vertical alignment due to the crappy way in which css sets vertical alignment. All the "tricks" for aligning things vertically fail because the element that defines the text (the <LI>) is also the same that defines the border.

The only solution that would work would be to use an image as your right-border. You could create a 20px (or whatever size) line, upload it to your SmugMug page, then use the border-image to link to that as the border.

Sorry it's not easy

smcust

How would I get the image to be on the left of the first menu link, and on the right for every menu link?

Would using an image have any negative SEO implications?

Allen

You might be able to use :first-child in CSS to add left border.

smcust

I never knew of first-child or last-child. IT WORKED!!!!!!!!!!!!!!!! Looks awesome. I didn't know if this could be done, so thank you!!

I made a 1px by 32px grey image in PS, and as suggested uploaded it to a gallery. Here is what I ended up with for others reading this post:

.sm-page-widget-nav-toplink {
  background-image: url('FullUrlOfYourImageHere');
  background-position: right;
  background-repeat: no-repeat;
  background-position: 100% 50%;
  background-size: 1px 32px;
  border-style: none !important;
  padding: 0px 13px 0px 2px !important;
}

.sm-page-widget-nav-toplink:last-child {
  background: none !important;
}

leftquark

smcust wrote: »

I never knew of first-child or last-child. IT WORKED!!!!!!!!!!!!!!!! Looks awesome. I didn't know if this could be done, so thank you!!

I made a 1px by 32px grey image in PS, and as suggested uploaded it to a gallery. Here is what I ended up with for others reading this post:

Glad what I suggested ended up working. I meant to reply back to you about first-child. You can also use "nth-of-element(x)" to target a specific element (for example, the 3rd <li> in a list). Thanks Allen for responding while I didn't!