Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Major Problem Trying To Get a Menu To Wrap To 2 Lines

  • This topic is empty.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #256657
    Greg777
    Participant

    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

    #256661
    Paulie_D
    Moderator

    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.

    #256662
    Greg777
    Participant

    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

    #256663
    Beverleyh
    Participant

    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.

    #256664
    Greg777
    Participant

    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

    #256665
    Paulie_D
    Moderator

    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.

    #256666
    Greg777
    Participant

    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

    #256667
    Paulie_D
    Moderator

    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.

    #256668
    Greg777
    Participant

    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

    #256669
    Greg777
    Participant

    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?

    #256670
    Paulie_D
    Moderator

    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/

    #256671
    Greg777
    Participant

    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

Viewing 12 posts - 1 through 12 (of 12 total)
  • The forum ‘CSS’ is closed to new topics and replies.