[Support request] Why is the main menu changing to two lines of content when viewed on a laptop?

[Gabriel]

Why is the main menu changing to two lines of content when viewed on a laptop? It looks like there should be enough space for it not to roll to two lines. Specifically this changes when the screen size goes to 1440px but then is all on one line again at 900px or so.

[Ying]

Hi Gabriel,

It’s because of this css:

@media (min-width: 1300px) {
.main-navigation .inside-navigation .main-nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
}

Try changing it to this:
.main-navigation .main-nav>ul {
flex-wrap: nowrap;
}

@media (min-width: 1300px) {
.main-navigation .inside-navigation .main-nav {
    position: absolute;
    min-width: 100%;
    justify-content: center;
    display: flex;
}
.main-navigation .main-nav>ul {
    flex-wrap: nowrap;
}
}

[Author]

Posts