Premium WordPress Themes and Support

Home Forums General WordPress horizontal text wrap in menu items

This topic contains 23 replies, has 4 voices, and was last updated by  Bazish 2 years, 1 month ago.

Viewing 15 posts - 1 through 15 (of 24 total)
1 2
  • Author
    Posts
  • #4105

    Fred
    Participant
    WP Private
    Post count: 21

    I have a quick question. This is something that I have tried for a while now. How do you get the word inside of the horz menu button to wrap to 2 lines and not be 1 line. I have tried adding in css to tell it to word-break or text-break, but didn’t work. Tried padding and width sizes, didn’t work.

    has anyone tried doing this in artisteer? I want long words to wrap to a second line inside of the button.

    Thanks,
    Fred

    #4106

    Northumbrian
    Participant
    WP Lieutenant
    Post count: 94

    Does a Break code work for you – like below?

    <a class="button">Click Me<br>for more info...</a>

    #4108

    Bazish
    Participant
    WP Major
    Post count: 168

    look this fiddle
    https://jsfiddle.net/bazish/odfkykps/1/

    it’s default code generated by Tuxedo Button shortcode, and css used on them

    you will notice under css tab under first css rule

    a.ft-button, a.ft-button:link, a.ft-button:link:link, body a.ft-button:link, a.ft-button:visited, body a.ft-button:visited, input.ft-button, button.ft-button
    i have change “white-space: nowrap;” to “white-space: normal;”

    then on
    .ft-button
    i have commented out the height css property

    now you can see the button with multiple lines without breaking anything.

    #4109

    Bazish
    Participant
    WP Major
    Post count: 168

    or you can simple create a new css rule in your style.css like

    .ft-nowrap{height: auto; white-space: normal !important;}

    and add this css rule to the html of your specific button where you want multiple lines on buttons e.g.

    <a class="ft-nowrap ft-button ft-btn-primary ft-btn-large" target="_blank" href="http://google.com">this is a long button with lot of text on it.&nbsp;Need help? Use the Help tab in the upper right of your screen. Lorem Ipsum still going on .. </a>

    notice “ft-nowrap” class added to button.

    #4110

    Nick
    Keymaster
    WP Colonel
    Post count: 711

    Unless I am missing something, Fred was asking about the Primary Menu, and not buttons.

    @anakyst: Your suggestion does not work with Artisteer buttons, which for the rest of you btw, the default style class is art-button, unless you change the prefix, which clearly Anakyst removes the prefixes from the CSS classes…

    Instead try Click Me<br>for more info… directly into a custom menu item. Depending from how Artisteer handles that specific theme, you might need to change/add some CSS rules to tighten things up, specifically regarding the line heights for the hmenu.

    #4113

    Bazish
    Participant
    WP Major
    Post count: 168

    only Fred can answer now.. 😉

    thread title suggests, Nick you are right.. but i followed his comments where he said

    has anyone tried doing this in artisteer? I want long words to wrap to a second line inside of the button.

    #4117

    Fred
    Participant
    WP Private
    Post count: 21

    Thanks for all of the suggestions. Unfortunately what I am talking about is the main horizontal menu and not a single button.

    Nick is right. I am looking to make the primary menu buttons wrap to two lines of text. Here is a screen shot.

    Fred

    Attachments:
    You must be logged in to view attached files.
    #4119

    Nick
    Keymaster
    WP Colonel
    Post count: 711

    Then to combine Bazish’s reason for this question let me expand some more, so you can have all your options open.

    No, this cannot be done in Artisteer. Artisteer will display the </br> part and not actually process the html. Besides, if you do it in Artisteer, it means that you will need to import the content from Artisteer. I don’t think WP Tux. allows that, and even if it did, it is such an amatuer move, and at least I, strongly don’t recommend it. Use Artisteer JUST for design and not content.

    Now, you would get a better answer if you tell us why you want to do this…

    – If the answer is just for looks, then try my solution I offered above.

    – If the answer is because you are running out of space on the menu, then you have a few additional options.

    1. Use submenus, if you still have too many menu items, use
    2. Use Artisteer’s Mega Menus. I find Artisteer’s Mega Menus to be horrible, thus I use the free Max Mega Menu plugin. If that is still not enough, I had some discussions with the developer this week (you can read what happened at the plugins support page at WordPress.org), and as a result,
    3. I can now with minimum code changes have multiple menus at various locations, each menu styled differently. To be specific, with my tests, I can now have a menu in the header, at the top or bottom of a page, footer, or pretty much anywhere I want. Again, some manual coding is required, but it took me about 15-20 minutes to figure things out – Look attachment as an example… I have 4 menus, and I have the ability to add more! The Artisteer’s Primary menu is been replaced, there is a second menu in the header, a third one at the bottom of the page, and a fourth horizontal menu in the footer (just above the copyright). The vertical menu in the footer, is shown by the default WordPress widget for displaying pages.

    Attachments:
    You must be logged in to view attached files.
    #4121

    Fred
    Participant
    WP Private
    Post count: 21

    Hi Nick,
    Thanks for the feedback. The customer really wanted to have everything on one line in the horizontal menu and we are running out of space because of the length of text in each button on the horizontal menu.
    I agree with you, it is not the greatest idea and looks kinda tacky, but customers want what they want. I also agree with Artisteers mega menu, not so great. I stopped using it a while ago.
    I hadn’t thought of sub menus, but knowing that artisteer doesn’t support sub menus by nature, how do you get them coded into the theme? Is this a php fix and/or css?

    Thanks again for all of the feedback.
    Fred

    #4122

    Nick
    Keymaster
    WP Colonel
    Post count: 711

    Of course Artisteer supports submenus, both using the horizontal menu out of the box, or using custom menus. I strongly suggest to always use custom menus, for better and easier control. The Artisteer menus are always Flyout menus, unless you use the Mega Menus. You can safely use up to 3 levels of menus, I did not test further levels than that.

    So, no need for any code changes, php, css, or anything else!

    #4123

    Fred
    Participant
    WP Private
    Post count: 21

    Okay, this is going to sound stupid, but when I go into the custom menu, i don’t see an area to input sub-title. Where an I missing the sub-titling in the menu area?

    Attachments:
    You must be logged in to view attached files.
    #4128

    Fred
    Participant
    WP Private
    Post count: 21

    Sorry about the confusion. I was thinking of sub-titling and not sub-menus. I am aware of multi-level menus in artisteer and how it can be multiple levels deep. I was thinking about how some menu buttons in the horizontal menu have a main title text and then a smaller sub title text on each button.

    Any thoughts on sub-titles in horizontal menus?

    #4129

    Nick
    Keymaster
    WP Colonel
    Post count: 711

    Let me make a 2 minute video for you… give me an hour or so, let me finish something else first…

    #4130

    Nick
    Keymaster
    WP Colonel
    Post count: 711

    We were posting at the same time… so ignore my latest reply.

    So the new reply is…

    There is no direct way to do this…

    To clear up some confusion, although it’s not what you are exactly what you are looking for. when editing a page/post,. the title of it will be displayed on the page, as the page/post Title. The menu navigation of that item can be changed by using custom menus. In your case, from your image, you can change the menu name “Products” to anything you want to be displayed on the menu.

    There is no way of having subtitles on the menu, or on the title page, out of the box, Artisteer wise, WP Tuxedo wise, or even WordPress wise. I have never encountered anyone asking for anything remotely like this.

    So, this leaves you with 3 choices.

    1. The easiest option: Look for a plugin that will satisfy your needs.
    2. The next option: Ask Google and/or Youtube for solutions.
    3. The pain in the ass option: Think of a way to make a solution for your self.

    Maybe I’m missing something obvious here… right now I am doing 5 things at the same time. I’ll think about your problem later on tonight with a clearer head – no promises for an easy solution though.

    #4131

    Nick
    Keymaster
    WP Colonel
    Post count: 711

    The only thing that comes to mind is if it is even possible, which it could, since the </br> part works… so you can have html in custom menus:

    In the custom menu Navigation Label Field is to add a div statements with a custom class for the second line part, and with CSS define the second line, smaller text, different color perhaps, font, etc… If it works, the sky would be the limit how you can style the second line. a real pain in the ass solution if you ask me.

    I know that what you asking for is not directly possible with Max Mega Menu. Tonight I’ll see if it can be done with Uber Menu (I doubt it, even though Uber Menu is very comprehensive, but not free btw…).

Viewing 15 posts - 1 through 15 (of 24 total)
1 2

You must be logged in to reply to this topic.