CODEWITHSUNDEEP
javascripthtmlcsswordpress
Aerodynamika
Aerodynamika

Reputation: 8413

How to remove mobile menu from Wordpress on resize but keep the desktop one?

I'm wondering if there's any way to remove a mobile menu from Wordpress, which automatically is activated at 48em or 767px.

There is no code in the CSS of my site which enables that hamburger menu and I tried one solution such as adding to styles.css the following code:

 button.menu-toggle {
    display: none !important;
 }

and 

 #top-menu {
      display: block !important;
 }

(the site is http://areolamodels.com/)

But it still won't work – the hamburger button is gone, but the top-menu displays in the design, which is different from the desktop version and I want to have to desktop version... Is there any js function that does it instead of CSS?

Thanks!

Upvotes: 2

Views: 3897

Answers (3)

Temani Afif
Temani Afif

Reputation: 272723

you may add this code :

@media all and (max-width:767px) {

#top-menu {
  display: block!important;
  margin: 0;
  text-align: center;
  background: none;
}
.main-navigation li {
    display: inline-block;
    margin: 0 10px;
}
button.menu-toggle {
  display: none!important;
}

}

it will adjust the style so the menu remain like desktop

Upvotes: 1

Canta
Canta

Reputation: 1480

Check out this selector:

.js .main-navigation.toggled-on > div > ul

This is the one toggling display

Upvotes: 0

Walk
Walk

Reputation: 757

Remove @media screen and (min-width: 48em) from

@media screen and (min-width: 48em)
.main-navigation {
    width: auto;
}

Upvotes: 0

Related Questions