Major Problem Trying To Get a Menu To Wrap To 2 Lines

[Greg777]

Good afternoon everyone,

Working a a new website but really battling with getting the text in the menu buttons to automatically wrap onto two lines.

I have been fiddling around Inspecting the elements in Chrome and I think I have found the problematic CSS which has terms I have never seen before…

I tried various tricks but the menu text remains on one line…

Here is the codepen – https://codepen.io/Greg777/pen/awRjZa

Please be gentle….lol

Best regards
Greg

[Paulie_D]

The Codepen is incomplete (it’s just one tiny piece of CSS) … in other words…it’s not a demo of the issue.

However this: white-space: nowrap; is designed to stop text wrapping. I’d start there.

[Greg777]

Sorry Paulie_D,

First time using something like Codepen…

What additional information must I provide so you can see a demo?

In the meantime, what do I change with the white-space: nowrap; ?

Thank you
Best regards
Greg

[Beverleyh]

I’d like to add…

I think I have found the problematic CSS which has terms I have never seen before

Google is your friend. When you see something you don’t understand, do a quick search on the CSS property to find out what it does, and the various values that can be used with it. Once you understand the behaviour of the CSS properties in your stylesheet, you’ll have a much easier time.

[Greg777]

Agree with you Beverleyh,

Spent several hours this afternoon trawling Google.

Just tried this and it makes no difference to the menu text:

#Top_bar .menu > li > a span:not(.description) {
white-space: normal;
}

What should be changed in the code?

Best regards
Greg

[Paulie_D]

We need to see a brief demonstration of the problem

That means minimal HTML & CSS in Codepen (which has separate areas for each) to show what happens.

[Greg777]

Hi Paulie_D,

I’m fairly new to this so not sure how to do what you ask…

Please elaborate if you can…

Best regards
Greg

[Paulie_D]

I’m not sure I can make it any simpler.

Post enough HTML and CSS in the respective areas in Codepen to reproduce the problem.

Understand we don’t want the whole page HTML or whole CSS file…just trim it down to enough for us to diagnose what you are seeing.

If that’s really not something you can manage then try posting a link to your page….it’s a poor substitute though.

[Greg777]

Hi Paulie_D,

I grabbed a bunch of code from the source and posted it the CSS section of Codepen

https://codepen.io/Greg777/pen/bRmOrK

The html (what I’m interpreting as html) looks like a huge hodge podge that I can’t make head or tail of it…

I going to remove the “under development” barrier for a short while…

Please see if you can identify how to force the menu items onto two lines…

Thank you

[Greg777]

Just found this on another website that seems to describe what I’m trying to do:

My client wanted the menu titles to be on two lines so I titled them similar to this

PROBLEMS& SOLUTIONS

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?

[Paulie_D]

The html (what I’m interpreting as html) looks like a huge hodge podge that I can’t make head or tail of it…

Then I suggest you are, with respect, trying to run before you’ve learned to walk….

I’d suggest you try reading some more basic layout HTML tutorials

http://learn.shayhowe.com/html-css/

http://learnlayout.com/

[Greg777]

I get where you are coming from Paulie_D,

I have built over 25 websites for clients using Genesis, Divi and others but mostly focusing on using the drag and drop type editor. I’ve successfully managed to get my way around by using and adding CSS to the WordPress Editor…But this one has got me confused….

Apologies for wasting your time…I will look elsewhere…

Thanks for sharing those two websites..

Best regards
Greg

[Author]

Posts