I don't want the menu switching to the mobile version

• 

  reconssite · Member · Apr 4, 2017 at 8:33 pm

  • Copy link
  • Add topic to favorites

  I would like to change the header menu to main menu. Is it possible?

  The blog I need help with is: (visible only to logged in users)

• 

  otpidusprime · Member · Apr 5, 2017 at 7:41 am

  • Copy link

  Hi there,
  Yes it is possible. You have to edit the CSS to prevent the menu from switching to mobile version.

  Here’s the explanation:
  There are 2 types of menu on you site, i.e the normal header menu on desktop mode which has the following CSS on mobile:

  @media screen and (max-width: 767px) {
    .js .mh-mobile .main-nav .menu {
      display: none;
    }
  }

  and the mobile selection menu, which has the following CSS on mobile:

  @media screen and (max-width: 767px) {
    .js .mh-mobile .tinynav {
      display: block;
      width: 94%;
      padding: 0.25em 0;
      margin: 0 3% 1em;
    }
  }

  Due to those codes given above, the header menu is kept hidden and the mobile menu is made visible on mobile devices of screens below 767px. And when the screen is above 767px the header menu is made visible and the mobile menu is kept hidden.

  Now to keep the header menu always visible:
  1. Find and remove both the codes using the CSS editor
  2. And then, also remove this CSS code:

  @media screen and (max-width: 767px) {
    .js .mh-mobile .main-nav {
      background: none;
    }
  }

  this code removes the black background color of the header menu on mobile devices.

  SUMMARY:
  Remove these 2 CSS codes to keep the header menu switching to mobile version,

  .js .mh-mobile .main-nav .menu {
      display: none;
    }

  .js .mh-mobile .tinynav {
      display: block;
      width: 94%;
      padding: 0.25em 0;
      margin: 0 3% 1em;
    }

  .js .mh-mobile .main-nav {
      background: none;
    }

  NOTE:
  Do not remove the @media screen and (max-width: 767px) { code, just remove the code specified above inside the @media.

  Hope this helps :)