Why is the top menu is so limited ?

Hi there,

Please try the following CSS code:

.menu-mainmenu-container {
    width: 800px;
}

Adjust the width according to your needs.

I use a PC and a Mac… On my Mac all is good has my resolution is much more than 2000px width… on my PC the max resolution possible is 1600px X 900px and with 5 items (need actually 6) it show the 5th on a second line on the PC even if I use the code above and set it to 1600px !?

Any idea why or alternatives ?

Hi @umponcel,

it show the 5th on a second line on the PC even if I use the code above and set it to 1600px !?

There can be slight variations in the way CSS renders across browsers and operating systems, which is why the code above didn’t produce identical results on both Mac and PC.

It sounds like there still isn’t enough width to display the sixth menu item on a single line (PC), so please try increasing the 800px value in the code @fstat shared above. Does that help?

Hello @fstat & @gemmaevans and thanks for your fast replies…

Hi have set the code bellow, provide by @fstat (1600px instead of 800px) and it’s still showing 2 rows on a small screen resolution.

/* enlarge the top menu to 800px */
.menu-mainmenu-container {
width: 1600px;
}

Hi @umponcel,

Thanks for giving that CSS adjustment a try.

and it’s still showing 2 rows on a small screen resolution.

Hummm, I haven’t been able to replicate this at all. I see all of the menu links on one line (desktop) or the mobile menu — I’m not seeing the menu overflow onto two lines at any stage between those points.

It would be great if you could make a screenshot of what you are seeing and upload it to a service like Snaggy.

Please also send the browser and operating system version you are using when the problem occurs — both pieces of information can be found on supportdetails.com. I’ll then do some more testing ??

Hi @gemmaevans,

First thanks for the hint snaggy, great tool !!

See this image to see the 1600px X 900px PC screen with a CSS snipet (has been suggested by @fstat) at 1600px

https://snag.gy/roe71H.jpg

Hi @umponcel,

Thanks for the screenshot. I noticed the menu doesn’t match the one on https://www.martinponcelet.com, what is the address of the site you are working on?

Can you also send your browser and operating system versions?

I think I found the site: https://www.motolaurentideslanaudiere.com

Have you thought about reducing the space between menu items?

@media screen and (min-width: 60em) {
  .main-navigation a {
    padding: .75em .75em;
  }
}

Or maybe making the right area a little smaller?

@media screen and (min-width: 60em) {
.has-top-content .site-top-content, .has-top-content .main-navigation + .site-top-content {
    width: 25%;
  }
}

Please test those sizes with different screen widths until you find something that works for you.

Hi @supernovia
Bingo! The perfect snippet to be on target !!

Thank you ??

Thanks for helping

Both fits https://www.martinponcelet.com & https://www.motolaurentideslanaudiere.com ??

Fantastic news @umponcel!