Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #23976

    Hi,

    I have created a menu with a few dropdown links, but when I view the menu in mobile all the links look the same, making it hard to know which links are parent and which links are children. Is there a possibility to implement something with dashes so it’s easier to use? Maybe something like:

    Home

    About Us

    - What We Believe

    - Constitution

    - Our Staff

    Sermons

    Contact

    #121849

    Hi rksystems,

    Make sure you are using the most recent version of the theme files available from Themeforest as the demo content has an auto indent for child pages by default: http://www.kriesi.at/themes/incarnation/

    You can just re-download the theme files from your Downloads on Themeforest and then install on top of your current installation to update.

    Regards,

    Devin

    #121850

    When I look at the demo on desktop and resize it, I see the indents that you are talking about. However when I view it on iPhone, I don’t see any indents at all. Here is a screenshot: http://postimg.org/image/ddvuq1z8j/

    I’m not sure if this effects other mobile devices like Android as I don’t have one to test with. Can you replicate this issue on mobile?

    #121851

    Hi,

    I don’t think we can control how the phone style its own navigation. Devin is talking about the DropDown menu, not the native phone navigation. They may vary on different mobile devices.

    Regards,

    Ismael

    #121852

    Thanks for your response. Is there a simple way to change the indents to dashes? If that’s not something you are wanting to tackle, could you let me know which file to look at to change this?

    #121853

    Hi,

    Edit js > avia.js then, find this code

    //create the mobile menu
    function createMenu($this){
    if(isList($this)){

    //generate select element as a string to append via jQuery
    var selectString = '<select id="mobileMenu_'+$this.attr('id')+'" class="mobileMenu">';

    //create first option (no value)
    selectString += '<option value="">'+settings.topOptionText+'</option>';

    //loop through list items
    $this.find('li').each(function(){

    //when sub-item, indent
    var levelStr = '';
    var len = $(this).parents('ul, ol').length;
    for(i=1;i<len;i++){levelStr += settings.indentString;}

    //get url and text for option
    var link = $(this).find('a:first-child').attr('href');
    var text = levelStr + $(this).clone().children('ul, ol').remove().end().text();

    //add option
    selectString += '<option value="'+link+'">'+text+'</option>';
    });

    selectString += '</select>';

    //append select element to ul/ol's container
    $this.parent().append(selectString);

    //add change event handler for mobile menu
    $('#mobileMenu_'+$this.attr('id')).change(function(){
    goToPage($(this));
    });

    //hide current menu, show mobile menu
    showMenu($this);
    } else {
    alert('mobileMenu will only work with UL or OL elements!');
    }
    }

    Replace it with

    //create the mobile menu
    function createMenu($this){
    if(isList($this)){

    //generate select element as a string to append via jQuery
    var selectString = '<select id="mobileMenu_'+$this.attr('id')+'" class="mobileMenu">';

    //create first option (no value)
    selectString += '<option value="">'+settings.topOptionText+'</option>';

    //loop through list items
    $this.find('li').each(function(){

    //when sub-item, indent
    var levelStr = '';
    var len = $(this).parents('ul, ol').length;
    var dash = '- ';
    for(i=1;i<len;i++){levelStr += settings.indentString + dash;}

    //get url and text for option
    var link = $(this).find('a:first-child').attr('href');
    var text = levelStr + $(this).clone().children('ul, ol').remove().end().text();

    //add option
    selectString += '<option value="'+link+'">'+text+'</option>';
    });

    selectString += '</select>';

    //append select element to ul/ol's container
    $this.parent().append(selectString);

    //add change event handler for mobile menu
    $('#mobileMenu_'+$this.attr('id')).change(function(){
    goToPage($(this));
    });

    //hide current menu, show mobile menu
    showMenu($this);
    } else {
    alert('mobileMenu will only work with UL or OL elements!');
    }
    }

    Regards,

    Ismael

    #121854

    Thank you very much Ismael! Outstanding support!

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

The topic ‘Dropdown in responsive mode’ is closed to new replies.