[T7omParticipant]

First of all, this is the website I’m talking about: https://www.le-vinothek.de

So, if I decrease the width of my browser, the menu becomes smaller to. That’s fine. But at some point, the menu just slides under the logo, before it just becomess that “very small thing on the right side”. So I’ just don’t want the menu to slide under the logo.

I already used this custom cod to control the width of my menu:

.x-navbar .x-container.max.width {
max-width: 1300px;
}

@media (max-width: 1300px) {
.x-nav-wrap.desktop {
display: none;
}

.masthead-inline .x-btn-navbar {
display: block;
float: right;
}

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

a.x-brand.img {
    float: left;
    width: 15%;
}

.x-nav-wrap.desktop {
    float: right;
    width: 85%;
}

Let us know how it goes.

Thanks.

[T7omParticipant]

The menu is still sliding under the logo, when I decrease the width of the browser.

[JadeModerator]

Hi there,

Please add this CSS too:

.x-navbar .desktop .x-nav > li > a > span {
    font-size: 13px;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 15px;
    padding-right: 15px;
}

Hope this helps.

[T7omParticipant]

Still sliding under the logo …
This is the code I used so far:

.x-navbar .x-container.max.width {
max-width: 1300px;
}

@media (max-width: 1300px) {
.x-nav-wrap.desktop {
display: none;
}

.masthead-inline .x-btn-navbar {
display: block;
float: right;
}

a.x-brand.img {
float: left;
width: 15%;
}

.x-nav-wrap.desktop {
float: right;
width: 85%;
}

.x-navbar .desktop .x-nav > li > a > span {
font-size: 13px;
}

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
padding-left: 15px;
padding-right: 15px;
}

[RadModerator]

Hi there,

Please try changing your CSS to this,

@media(max-width: 1400px) {
.x-nav-wrap.desktop {
    display: none;
}
.x-nav-wrap.mobile.in, .x-nav-wrap.mobile.collapsing {
    display: block;
}
.x-btn-navbar {
  display: block;
  float: right;
}
}

And please make sure to copy the exact CSS with proper closing bracket for @media () { }. Your CSS has no closing bracket.

Hope this helps.

[Author]

Posts