primary menu – increasing width (one row)

Extra info: tried the following code implementations. No success.

https://wpbeaches.com/extend-the-twenty-eleven-theme-menu-navigation-to-fullscreen/

Thank you for your help.

Hi, the site you linked in your first reply is showing all of the menu items on a single row for me even when I decrease the browser width. Though it does cause some of the menu items to be cut off, may be a result of that fix that you tried.

If you remove the WPBeaches changes you made, what does the navigation look like?

I meanwhile removed all previous tryout codes again.

I tried previously Safari and Chrome browser. Always the menu will be displayed as a two row menu. The correct URL address is indeed: https://www.woordaccent.be

I was not able to include a file preview, so please find below link how the menu looks like now.

https://www.dropbox.com/s/65pu8i044sqvqpy/menu%20-%20single%20row%20vs%20two%20rows.png?dl=0

Thank you for your help.

Hi, please add the following code into Appearance->Customize->Additional CSS

@media (max-width: 1100px) {
	#branding nav.sticky-element-active .menu-menu1-container {
		margin-left: 0px;
		margin-right: 0px;
	}
	#branding nav.sticky-element-active .menu-menu1-container .menu {
		padding-left: 0px;
		padding-right: 0px;
	}
}

It should work pretty well when decreasing the window width though eventually at some point the menu navigation does move into 2 rows again. At that point, if you always want it to be on one line and your menu won’t change we could decrease the font size.

I meanwhile copied the suggested code in my additional CSS section.
Unfortunately, it seems like the menu refuses to align in 1 row properly.

How it looks like now?
https://www.dropbox.com/s/585hhure554o6jq/added%20extra%20css%20code.PNG?dl=0

Note: when launching the site page, I entered a full width window.
I did not yet decrease the window.

Its working for me on the live site right now until I get down to about 790px wide on the browser width then the Contact links jumps down to the 2nd row.

It might just be a hiccup with the Customizer display in how it works when trying to preview.

I have found some interesting information now.
When adapting the browser window width indeed, a strange phenomena occurs.

I try to explain.

OK > Window decreasing: first and second row menu present = normal
OK > Window increasing: second row disappears when enlarging (starting point 800px)
NOK > when window increasing continues more (> 1100px), suddenly a second row appears again.

Please find the screenshots again in below dropbox account.

https://www.dropbox.com/s/pso2hco865ej8q7/small%20browser%20windox.PNG?dl=0
https://www.dropbox.com/s/bfzcjpwbl7wx39j/window%20enlarged%20between%20800px%20and%201100px.PNG?dl=0
https://www.dropbox.com/s/ptso4np349u3do9/window%20enlarged%20bigger%20then%201100px.PNG?dl=0

Seems like the alignment for the first two screen shots I have send to you are left aligned.
The last screen shot (> 1100px) suddenly changes alignment type to central?

Could this be the reason of my problem? Or am I incorrect?
Thank you for your help.

Hmm not sure why you are seeing that being listed on 2 rows. When I look at your site this is what I see with the browser width at 1700px

https://i.snipboard.io/DWrcEC.jpg

If you try in a different browser do you still see the same issue?

I tried different browsers (Safari, Chrome, Edge) in the past already. None of them seem to display your screenshot layout. That’s why I could not believe your comments.

?

I have prepared some extra screen shots for you (1-10).
Perhaps it rings a bell?

https://www.dropbox.com/s/cj30zbw0n72rvec/1.PNG?dl=0
https://www.dropbox.com/s/6y050jwvu8x90r8/2.PNG?dl=0
https://www.dropbox.com/s/t8lkaegdf0dix1y/3.PNG?dl=0
https://www.dropbox.com/s/crdlmfevcmq7032/4.PNG?dl=0
https://www.dropbox.com/s/cfb5jdd8mg6rrlk/5.PNG?dl=0
https://www.dropbox.com/s/ooimjoi9j40lhem/6.PNG?dl=0
https://www.dropbox.com/s/c79710sfu78fvfb/7.PNG?dl=0
https://www.dropbox.com/s/o62zj9osbb7wg62/8.PNG?dl=0
https://www.dropbox.com/s/uj4n8jlrvl1yc4m/9.PNG?dl=0
https://www.dropbox.com/s/wwfouprd25da01i/10.PNG?dl=0

Info: I noticed the font size will increase from screenshots 4 > 5

Yeah, at a certain smaller browser width the links will jump down to 2 lines. The only solution to that assuming you require that they remain on a single line would be decreasing the font size. However, due to having so many items it may make it difficult to read but it most likely can be done.

I’m still not sure why on the wider browser widths you’re seeing that dropping down to 2 lines. Which browser are you using?

Thank you for your help in this.

– I do not really mind the fact that the menu font size would be smaller, or a second row appears in case a smaller browser window is present.
– Hence, I do not really comprehend why at a certain point the menu suddenly jumps again from one row towards two rows when one more enlarges the window?
– Sceenshots 8 and 9 of my previous comments in this forum topic illustrates this.
– The browsers I have been using that confirms this behavior still: Safari, Chrome, Edge

Extra: as you can see in these screenshots, the alignment for both are not equal.
First screenshot: menu alignment on the left side
Second screenshot: menu alignment on the center

Perhaps this might help?