Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #23006

    My site http://www.ianmankin.com has an issue in that the menu list goes onto a second line before the ‘mobile menu’ kicks in. I there a way of making the menu switch between normal browser and mobile browser without having the intermediate step of having the menu on two lines?

    #118207

    Hi Clearcreative,

    In your theme files, open js>avia.js and look for:

    // improves menu for mobile devices
    jQuery('.responsive .main_menu ul:eq(0)').mobileMenu({
    switchWidth: 768, //width (in px to switch at)
    topOptionText: jQuery('.main_menu').data('selectname'), //first option text
    indentString: '   ' //string for indenting nested items
    });

    change the 768 to the width you want the mobile menu to take over.

    Regards,

    Devin

    #118208

    Devin,

    Thanks for that, but the only way I can overcome my issue that way is by increasing the width to 980px (the point at which the last menu item drops to the line below), not ideal I’m sure you’ll agree.

    At that width there still appears to be approx 200px of space to the right of the menu (under the search box) which is what I want to use so that the menu switches to ‘mobile’ on 768px but doesn’t go on to two lines between 980 and 768. Is this do-able?

    Thanks for your help.

    #118209

    The menu is still too wide which is why it shifts to a second line (its already using that space under the search bar). What you can do is remove the padding on that last item specifically.

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    #menu-item-1457 a {
    padding-right: 0px;
    }

    Regards,

    Devin

    #118210

    Devin,

    Thanks for the pointer. Using a combination of your help and a bit of delving with firebug I have increased the width available by adding the the following to my custom.css (from grid.css), doesn’t seem to have affected anything else!

    .responsive .container { width: 774px; }

    #118211

    Glad you were able to find a solution that worked fro you :)

    Let us know if you have any other questions or issues.

    Regards,

    Devin

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Choices – Menu goes to two lines in smaller windows.’ is closed to new replies.