css to adjust menu titles to two lines

ScaleTrainer · July 2016

Hello,

I'm working onthe menu on the site here http://waterways.clearlineinteractive.com/real-estate-services/.

My client wanted the menu titles to be on two lines so I titled them similar to this PROBLEMS<span class="menu-break">& SOLUTIONS</span>

Then I added this css to make it on two lines and centered

span.menu-break {

display: block;

line-height: 0;

bottom: 35px;

position: relative;

}

#Top_bar #menu ul li a span {

text-align: center;

}

The problem is that this added a bunch on black space at the bottom of the menu. Is there a better way to do what I'm trying to do?

Thank you,

Neil

Albert · July 2016

Hi,

we have much easier solution to break words into the new line:

PROBLEMS<br />&SOLUTIONS

and no css is needed

Just <br /> tag between them.

ScaleTrainer · July 2016

Thanks for the help. That worked great. I did add a bit of css to center each line over each other.

If you check out this link can you advice me how to remove the thin black section under the menu? I'd like the blue highlight line to be flush with the bottom of the black.

Thanks,

Neil

Albert · July 2016

To move this line to the bottom of black menu's background, please use the following css:

.menu-line-below #Top_bar .menu > li > a::after { bottom: -10px !important; }

ScaleTrainer · July 2016

You are like, the god of css! Thanks so much.

Is there a way to get the home text to be centered top to bottom in the menu? If that's too much to ask please let me know.

Thanks again!

Albert · July 2016

It is possible of course but requires css customization as well because it's not a standard thing:

#Top_bar .menu > li#menu-item-60 > a span:not(.description) { margin-top: 15px !important; }
.menu-line-below #Top_bar .menu > li#menu-item-60 > a::after { bottom: -20px !important; }

css to adjust menu titles to two lines

Comments