• Joakim
    March 25, 2014 at 9:38 am #28498

    Hi

    Is there a way to have one menu for mobile and one menu for regular PC/Mac?

    The thing is that I hid all menuitems on the real website, since I have the important pages listed in footer.

    However on a mobile, it is too much scolling to get to the bottom so the “go to…” menu works great here, but is there a way to show the pages under that menu, but not on the actual site?

    I hope I am not only speaking jibberish here and you understand what I mean.

    Regards
    Joakim

    Anna
    March 26, 2014 at 7:29 am #28656

    Hi Joakim,

    I understand you want on Mobile to show a different menu (less items).

    One of my partners will post a technical answer later today here.

    Thanks!
    Anna

    Joakim
    March 27, 2014 at 8:52 am #28853

    ok, I found the menu in control.js.

    I know the ID of the mobile menu so basicly I should be able to place a static ID instead of getting the primary menu to show.

    It would be quite good if you in future releases differ between the mobile and real navigation.

    Please advice me what to change:

    Code:
    // Create the dropdown base
    $(‘<select id=”select_menu” />’).appendTo(‘.header_control’);

    // Create default option ‘Go to…’
    $(‘<option />’, {
    ‘selected’: ‘selected’,
    ‘value’: ”,
    ‘text’: ‘Navigera till…’
    }).appendTo(‘#branding #select_menu’);

    // Populate dropdown with menu items from main menu
    $(‘#access a’).each(function() {
    var el = $(this);

    if ($(el).parents(‘.sub-menu .sub-menu’).length >= 1) {
    $(‘<option />’, {
    ‘value’: el.attr(‘href’),
    ‘text’: ‘– ‘ + el.text()
    }).appendTo(‘#branding #select_menu’);
    }
    else if ($(el).parents(‘.sub-menu’).length >= 1) {
    $(‘<option />’, {
    ‘value’: el.attr(‘href’),
    ‘text’: ‘- ‘ + el.text()
    }).appendTo(‘#branding #select_menu’);
    }
    else {
    $(‘<option />’, {
    ‘value’: el.attr(‘href’),
    ‘text’: el.text()
    }).appendTo(‘#branding #select_menu’);
    }
    });

    $(‘#branding select’).change(function() {
    window.location = $(this).find(‘option:selected’).val();
    });

    if ($(‘.gmap-menu’).height() < 50) {
    $(‘.gmap-menu’).css(‘bottom’, ’34px’);
    }

    crerem
    March 28, 2014 at 6:41 pm #29075

    The menu you find will replace the web menu in case the resolution is smaller than 960px;

    So if you want to strip items from menu you should do it in the code you found. Is hard for me to give you more tips without actualy understand what you want to do. Please come back with a live example – so i can see what you want to take off from mobile.

    I will try to help you then.

    • This reply was modified 3 years, 3 months ago by  Anna.
    Joakim
    March 28, 2014 at 8:44 pm #29096

    Hi, ok, hmm let me try to explain.

    The code I pasted will show up as a menu if less the 960px if I understand correct.

    The thing is that on my site, I have a footer widget based on a different menu (not the standard one). The ID of that menu is for example “961”.

    The thing I am after is to show menu 961 if less then 960px instead of “primany menu”, which it does now.

    I also do not want to show the primary menu on devices less then 960px, since the primary menu is hidden, which means no items will show up on devices less then 960px, only “go to…” them empty.

    IF I selevt the meny “961” as the primary menu in wordpress that meny will also appear on the top of the wpestate theme if wider then 960, which I do not want..

    So basicly I want to show menu “961” instead of the primany menu on devices that shows less then 960px.

    I hope I didnt overcomplicate matters?

    Best regards
    Joakim

    Anna
    April 3, 2014 at 5:04 pm #30032

    Hi Joakim,

    We didn’t get this message. I only saw it today.

    Will forward it to the team to look at your comments and advise.

    Thank you
    Anna

    • This reply was modified 3 years, 3 months ago by  Anna.
    crerem
    April 3, 2014 at 5:27 pm #30040

    Hi,
    The javascript code from above scan the html for the main menu and transform into a html menu mobile that is hidden on resolution bigger than 960px. When res is lower the web menu is hidden and the mobile one is show.

    TO achive this with other menu you have to insert the the second menu . I suggest you to do that via header.php in the same way the current main menu is showen

    After, you hide this menu via css. Use id selectors with display:none

    Last modify the javascript code and replace id=”select_menu” with the id of your new menu

    Joakim
    April 3, 2014 at 7:51 pm #30063

    Hi, hmm will I achieve the same effect if I make menu 961 as primary and hide it via CSS?

    In that case I think that might be easier, or what do you think?

    In that case i just need to know what to put in the css…

    Regards
    Joakim

    crerem
    April 7, 2014 at 6:39 pm #30589

    Hello
    If you set the 961 as primary you will have the same links on web and on mobile.

    To now show the menu use display:none; in the css for the menu you want.
    Regards

    Joakim
    April 8, 2014 at 6:15 am #30623

    So if i choose display none, the mobile menu wont show either i guess? Can you choose only to hide the menu if wider then 960px?

    Regards
    Joakim

    Anna
    April 8, 2014 at 8:49 am #30631

    Hi Joakim,

    You’ll have to test. If you have troubles, let me know.

    About Can you choose only to hide the menu if wider then 960px?

    You can use @media CSS to display certain elements above, or below certain resolutions.

    For min size, add CSS inside this function (960px is just an example)

    @media (min-width: 960px){

    }

    For max size, use this function

    @media (max-width: 960px){

    }

    Hope it helps
    Anna

You must be logged in to reply to this topic.

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.