By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

Question How to stop header text wrapping?

A

Amelia

New Member
Greetings,

I've got a nice header (well, I like it anyway!). Looks like this on a desktop on tablet landscape:
header1.jpg


Also working well on mobile on smaller tablet portrait view thus:
header2.jpg


But on those in-between sizes, larger tablet portrait view or on resizing a browser window as I've done here, I get this - UGH!
header3.jpg


There is one section containing three columns: first column is the logo jpg, second column three menu items, last column the button.

What's the solution?

Thank you

Amelia
 
elementor official
MatBankes

MatBankes

New Member
Hi Amelia,

I could be wrong, but it looks lke you could fix that by simply making the size of the menu item text smaller. It would mean you give up some size 'boldness' factor in your heading, however, I find when I want it to look big and bold, then I make it smaller, once I see it on the devices it is still actually a really good size.

Maybe someone else might have a better, more solid fix... I'd be interested to find out, if so. Hope that helps in the short term though...
 
elementor official
A

Amelia

New Member
Thanks Mat. Appreciate your reply. New to it all. Head starts to go fuzzy, may well be missing the obvious.

I guess that is the bottom line, that I need to reduce the size of things, so that it fits up to the break point. There's no way round that.
 
elementor official
MatBankes

MatBankes

New Member
Yeah, I've basically got into the habit after creating each section, to go through to the Tablet, then the Phone sizes, and make necessary adjustments in each before movig onto the next section... When you shift between the Desktop, Tablet and Phone viewing options, you will see which elements on the editing bar are for that view specific (as in it will have a little picture of a phone or a tablet or a desktop next to it)... so you know that you aren't affecting the last size you just worked on.
But if there isn't an image of one of the three devices next to it - then you know it'll affect each view size together... see the image for an example.
 
elementor official

Attachments

A

Amelia

New Member
Thanks. This is the first site I've done with Elementor (and have very little Wordpress experience) and I'd thought I would do the whole page in desktop view and then move onto tablet and mobile but maybe section by section has advantages. I've improved things by reducing the spacing of the menu items and changing the button from 'Subscribe Now' to Subscribe'.

BUT - a more subtle issue - the subscribe button is part disappearing off the right of the screen as it nears 768px. It's like a negative margin. Can't add padding or margin to make any difference. It's not recognising the button border as content only the word 'subscribe'. I could make it a graphic I guess but is there not a more elegant solution?
 
elementor official
TimLippert

TimLippert

New Member
Rather than making the items themselves smaller, if you reduce spacing between menu items in your second colum with the 3 links, this will not happen. eventually also make the button width less.

This is caused by how your column display setting is set.
example of the apparent default:
div {
display: flex;
flex-wrap: wrap;
}

if it were:
div {
display: flex;
flex-wrap: nowrap;
}
....it would not wrap but I doubt you are going to play with custom CSS and this is not always a good solution :D

Resizing the browser window is not the usual way people use browsers though so that would rarely ever be seen!

In the end, this is a design problem and that button should not be in the "nav", but rather in a sort of (info block)/(call to action block) below it.... Then you will surely never have this problem.

The first reason for this is, per UX, people don't generally read all the way to the right if they see a navigation bar before looking at the content in the middle.....and if that's not enough, or when they are done reading the page, they will then look back up at a navigation bar. Just make the button part of the page content :D This means that before they leave the3 page and move their eyes upward towards your nav again, if your sub button is directly below that, they will see that before the nav!

Final thought: reduce the text inside that button to SUBSCRIBE......this will never wrap.
 
elementor official
A

Amelia

New Member
Thanks Tim.

Decided not to mess with flex-wrapping properties of Elementor! I got round the wrapping issue by taking out the word 'now' from the button and reducing spacing between the menu items and tinkering with column sizing.

A SOLUTION: The problem with the border of the button disappearing off the right of screen on tablet portrait (it's just text with padding) I couldn't find an elegant solution to. I came up with a fudge which seems to work well. I added another column to the right of the button containing a small invisible image (same colour as background). I've hidden it in all views but it still must somehow be lurking around in the code as now I have a little right hand margin to the button in the tablet view. Just wanted to put that in for anyone looking for A SOLUTION to the same.

Please do post if you find something else.
 
elementor official

Latest posts

Other Elementor Resources

elementor official
elementor official
Top