CODEWITHSUNDEEP
cssresponsive-designmenusemantic-ui
Farandole
Farandole

Reputation: 551

semantic ui menu responsive

I want one menu for classic screen :

<div class="ui borderless stackable container main menu">

And another one for mobile screen with a vertical side bar (see fiddle at the end of text for more detail):

<div class="ui container fixed secondary menu">

and I show/hide one menu in CSS file :

.main.menu {
    margin-top: 4em;
    border-radius: 0;
    border: none;
    box-shadow: none;
    transition:
    box-shadow 0.5s ease,
    padding 0.5s ease
    ;
}

.secondary.menu {
    display: none !important ; /* put block to see the 2nd menu */
}

@media only screen and (max-width: 700px) {
  .ui.main.menu {
    display: none !important;
  }
  .main.menu .item,
  .main.menu .menu {
    display: none;
  }
  .secondary.menu {
    display: block;
  }
}

I can not achieve to switch/hide to one another menu on mobile or classic screen.

My fiddle is : https://jsfiddle.net/e59v5veL/8/

Upvotes: 0

Views: 3493

Answers (1)

davecar21
davecar21

Reputation: 2674

You can try doing this.

You need to also put !important in the style of .secondary.menu to achieve what you wanted 

@media only screen and (max-width: 700px) {
      .ui.main.menu {
        display: none !important;
      }
      .main.menu .item,
      .main.menu .menu {
        display: none;
      }
      .secondary.menu {
        display: block!important;
      }
    }

Please see the live sample in this link.. https://jsfiddle.net/e59v5veL/11/

Upvotes: 3

Related Questions