Question How to stop header text wrapping?

[Amelia]

Greetings,

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

Also working well on mobile on smaller tablet portrait view thus:

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!

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

 

[MatBankes]

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...

 

[Amelia]

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.

 

[MatBankes]

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.

 

[Amelia]

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?

 

[TimLippert]

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

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 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.

 

[Amelia]

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.