Tagged: , , , ,

Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • June 29, 2014 at 3:01 am #284914
    itchybrain

    Gay Kriesi

    I have a client site with a long menu, to the right of the logo.

    In the tablet portrait view it overlaps the logo.

    I’ve been experimenting but can’t find the place to invoke the change from the visible menu to the mobile icon advanced menu. I have it set and it does indeed change when I go to a smaller device, but I’d like the mobile portrait view to invoke the change.

    Thanks for any help you can provide me.

    Here is the site: http://www.2pisoftware.com

    cheers

    Darryl

    June 29, 2014 at 3:02 am #284915
    itchybrain

    My apologies…I meant the landscape view….the portrait view is working well, but I’d like to invoke the change for the landscape view, to replace the long menu with the icon menu instead.

    June 29, 2014 at 7:37 am #284965
    Ismael

    Hi!

    Thank you for using the theme!

    Please go to Enfold > Header Layout > Mobile Menu. Look for the Header Mobile Menu activation then select the second option to activate the advance menu toggle on iPad landscape view.

    Cheers!
    Ismael

    June 29, 2014 at 10:31 am #284996
    itchybrain

    Gday Ismael

    thanks for your help with this. That setting was already set, but still has the long menu.

    The comment beside the setting says it will work below 990px, but landscape tablet is 1024px?

    cheers

    Darryl

    June 30, 2014 at 4:00 pm #285242
    Yigit

    Hi!

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

    @media only screen and (max-width: 1140px) {
.main_menu ul:first-child > li > a { padding: 0 7px; }}

    Best regards,
    Yigit

    July 1, 2014 at 2:38 pm #285720
    itchybrain

    Thanks Yigit…I hadn’t thought of that. Is there any option I could use if the menu was even longer (bound to happen), and so the reduced padding didn’t help?

    cheers

    Darryl

    July 3, 2014 at 7:12 am #286518
    Ismael

    Hey!

    You can decrease the font size of the menu items then decrease the padding further:

    @media only screen and (max-width: 1140px) {
.main_menu ul:first-child > li > a { 
padding: 0 7px; 
font-size: 12px;
}
}

    Cheers!
    Ismael

    July 4, 2014 at 12:45 am #286952
    itchybrain

    Gday Ismael

    I do have a good sense of that as another option now. However, I would prefer to understand more of what triggers the menu to disappear and be replaced. There are instances where this will be more useful. Is it done with javascript, and can I modify that to switch at a different breakpoint?

    Thanks for your help with this.

    cheers

    Darryl

    July 4, 2014 at 1:17 am #286961
    Josue

    Hi Darryl!

    It’s CSS:

    @media only screen and (max-width: 989px) {
.html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;}
.html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;}
.html_mobile_menu_tablet #mobile-advanced{display:block;}
}

    Modify the “989px” and put the whole code in Quick CSS.

    Best regards,
    Josue

    July 4, 2014 at 1:33 am #286968
    itchybrain

    You ripper :) thanks so much Josue, that’s perfect…thanks for your attention, very much appreciated.

    cheers

    Darryl

    July 4, 2014 at 1:35 am #286970
    Josue

    You are welcome Darryl, we are always glad to help :)

    Regards,
    Josue

    July 4, 2014 at 1:43 am #286979
    itchybrain

    Also Josue, when I use a different menu, such as the one beneath the logo, or above, etc, I would like to invoke the same effect.

    Could you point out which file has the CSS for those? and I can gather it for the Quick CSS as required.

    Thanks again Josue, this will greatly improve my sites, almost every client puts too many navigation items together!

    cheers

    Darryl

    July 4, 2014 at 1:57 am #286983
    Josue

    Hey Darryl!

    I’m pretty sure the code will affect the main menu regardless of header configuration.

    Regards,
    Josue

    July 4, 2014 at 2:39 am #286998
    itchybrain

    Gday Josue, it worked for me when the nav was to the side of the logo, but not in a website where the nav was underneath the logo.

    I can scout around and find out the css file to check…thanks for your help Josue.

    cheers

    Darryl

    July 4, 2014 at 2:42 am #287000
    Josue

    Hi,

    Can you post the link to that website please? make sure it has the latest version of Enfold too (2.8.1).

    Regards,
    Josue

    July 4, 2014 at 2:53 am #287003
    itchybrain

    Thanks Josue…OK, well it doesn’t have 2.8.1, maybe that’s the problem: http://itchybrain.com.au/mfs/
    Sorry, but I won’t be able to update that today, juggling lots, but thanks again for your help Josue.
    cheers
    Darryl

    July 4, 2014 at 2:57 am #287006
    Josue

    Yes, that should be, do the update and try again :)

    February 17, 2017 at 3:59 am #748192
    millertimesites

    Great work Josue, was looking for this.

    I just used it on a website and one add one thing, needs a min width rule to avoid causing issues with overriding the standard mobile menu on mobile devices. The logo was still full sized on mobile without a min rule, plus the navigation was way off screen and un-collapsed. Is un-collapsed even a word?

    @media only screen and (max-width: 1150px; min-width: 768px) {
.html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;}
.html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;}
.html_mobile_menu_tablet #mobile-advanced{display:block;}
}

    Also added this to make the mobile nav sticky with the padding being the height I set the Header to under theme options

    @media only screen and (max-width: 767px) {
.responsive #top #main { padding-top: 90px!important; }}

    Jon

    February 17, 2017 at 2:00 pm #748424
    Yigit

    Hi,


    @millertimesites     Glad it worked for you too and thanks for sharing your solution :)

    Best regards,
    Yigit

    September 18, 2017 at 10:53 pm #853602
    Hoernchen089

    @yigit hi ! is it in the next update?

    September 19, 2017 at 2:15 am #853623
    Yigit

    Hi,


    @Hoernchen089     No, however if you are having any issues, please start a new thread under Enfold sub forum and elaborate on the issue so we can try to help :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Invoke mobile menu at different breakpoint’ is closed to new replies.