Site logo

Archived topic

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

1 reply · Started by Gabriel on February 1, 2023

Viewing posts 1–2 of 2

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.

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;
}
}
This archived topic is closed to new replies.