menu brake in 2 line on large screen

saeru

Question1: Menu show in 1 line on medium screen, but on large screen it's brake in 2 line. How to fix it? It's have to be in 1 line.
Question2: How to make menu layout close to the logo?

saguaros

saeru Hi

I edited the mainnav block on your site by changing the number grids for logo and mainnav:

Kindly check.

saeru

saguaros
if you resize browser window more horizontal, menu brake on 2 lines again. How to make menu not brake in 2 line on large screens? (only on small)

saguaros

The space is not enough to show all menu item in 1 line. If you don't use section in the right of header, you can remove that section to have more space.

saeru

it's enough to show menu in 1 line, for medium screen, but if you make it wide on large screen, it's brake in 2 line again. Why this happen? it's lot of space. Try to resize browser window on big screen.

saguaros

Which screen size did you experience this issue?

saeru

when i resize browser window:
1399 pixel weight render 1 row menu,
1400 pixel weight and more - menu brake on 2 row.

saguaros

It's weird as I tried to view from 1399 - 1400 screen but the menu still shows in 1 line.

saeru

look in the video:
http://sae.ru/u/dl/20221103_120046.mp4

saguaros

As I mentioned above, the right side of header space is still there so the space for the menu is not enough. If you don't use the right header section, you should remove it.

saeru

finally i play with css:
this is a better result:

 <div class="header-wrap row d-flex align-items-center collapse-static t4-nav-height">
      <div class="col-6 col-sm-3 col-md-4 col-lg-2 col-xl-1">
        <jdoc:include type="element" name="logo" data-home="index.php" />
      </div>

      <div class="t4-navbar col-1 col-sm-9 col-md-6 col-lg-8 col-xl-10 d-flex justify-content-center collapse-static">
        <jdoc:include type="element" name="megamenu" />
      </div>

saguaros

Let me know if you need further help then 🙂