Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • January 21, 2014 at 1:38 pm #212748
    Iano999

    Hey,

    I’m trying to find out how to make the mobile menu appear when the site is viewed in a portrait orientation on a tablet – I’ve had a quick search but a lot of the questions/answers regarding this seem to be tailored towards individual issues.

    As it stands, I get the full menu at 1024px which is perfect, and the mobile menu on a smartphone – I just need to make the switch from the full desktop menu to the mobile version on tablet/portait – how can I change this?

    Thanks

    January 21, 2014 at 1:39 pm #212749
    Iano999
    This reply has been marked as private.
    January 21, 2014 at 7:54 pm #212926
    Yigit

    Hey!

    Please refer to this post to change the width to switch to mobile menu https://kriesi.at/support/topic/navigationlogo-affected-on-ipad-and-androidsamsung/#post-202024

    Best regards,
    Yigit

    January 28, 2014 at 3:25 pm #215801
    Iano999

    Hey,

    I’ve edited avia.js to reflect the fact I want the mobile menu at 990px, then I’ve added the following code to hide the main menu up to 990px:

    @media only screen and (max-width: 990px) {
.responsive #header .main_menu ul {
display: none;
}
}

    I’ve also included this CSS:

    @media only screen and (max-width: 767px){
.mobile_active #advanced_menu_toggle {
display: block;
}
}

    I’m now left with a range from 768px – 990px where there is no menu at all – Is there anything else that needs to be done make the mobile menu visible?

    • This reply was modified 10 years, 10 months ago by Iano999.
    January 28, 2014 at 7:25 pm #215990
    Yigit

    Hi!

    You do not need to add custom CSS code to remove main menu. When you make changes on Avia.js file, you are setting the width to change the switch from main menu to mobile menu, so when you increase it to, say, 1000, on screens smaller than 1000px, mobile menu will be displayed.

    Best regards,
    Yigit

    February 7, 2014 at 1:22 pm #220862
    Iano999
    This reply has been marked as private.
    February 7, 2014 at 3:46 pm #220884
    Yigit

    Hey!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    @media only screen and (max-width: 989px) { 
.mobile_active #advanced_menu_toggle {
display: block;
}}

    Cheers!
    Yigit

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Mobile Menu on tablet portait’ is closed to new replies.