Support » Fixing WordPress » Create submenus for mobile devices

  • Resolved khiryos

    (@khiryos)


    Hello world,

    I’m a new wordpress user. Two years ago, I built my website with hard code (html, css) but this year I completely rebuilt the site using wordpress. I took me one day instead of seven, and the UI is now adapted to all screens. So I remember how to write just some line codes but I admit that it’s a real job to master these things.

    Unfortunately, I used a theme that creates submenus on computer but not on mobile devices. You see a (long) list of all menu titles instead of six main titles with submenus when clicking on it.

    I looked in the .css files but I admit that it’s too complicated for me. I would also like to change the font color of the mobile menu (it’s pink) but this is another (and less important) problem.

    I hope this is the good place to post.

    Thank you in advance,

    Cyril.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hi,

    first you need to decide whether the top level menu items should link to a page (like the projets and recherche page) or is just a placeholder for subpages (the audio page). You have both it appears. You can’t open sub menus on click if the parent menu item links to an actual page.

    If you want the parent items to link to a page, the submenus should probably open on hover. If the parent page is not actually linking to a page, you can open the submenus on click.

    This is crucial to how the mobile menu should behave if you want the sub menu items hidden.

    Thread Starter khiryos

    (@khiryos)

    Hello Ronald,

    Thank you for your help. I just replaced the “projets” and “recherche” pages by placeholders. I would like to open submenus on click when using smartphones but show submenus on hover when using a computer. Is it possible?

    Hi,

    the site doesn’t distinguish between “on smartphone” or “on mobile”. The mobile menu is triggered based on the viewport width.

    To change the behaviour of the mobile menu, add the following code to your child themes functions.php file, but before a closing ?> tag (if any) to load the JS in the site footer:

    function my_footer_script() { ?>
    
    <script type="text/javascript">
    		
    	jQuery(document).ready(function($) {
    
    		$("#side-menu ul#sidr-id-menu-primary-navigation ul.sidr-class-sub-menu" ).hide();
    
    		$('#side-menu ul#sidr-id-menu-primary-navigation li a').click(function(e) {
        
    	    	if ($(this).next('ul.sidr-class-sub-menu').children().length !== 0) {
        	    	e.preventDefault();
    	    	}
        
    		    $(this).siblings('.sidr-class-sub-menu').slideToggle('slow');
    		})
    
    	});
    	
    </script>
    <?php
    
    }
    add_action('wp_print_footer_scripts', 'my_footer_script');

    The following css should make it look tidy:

    #side-menu ul#sidr-id-menu-primary-navigation li.sidr-class-menu-item-has-children >a:after {
    	content: ' ▾';
    }
    
    #side-menu ul#sidr-id-menu-primary-navigation ul li a {
    	margin-left: 1em;
    }
    
    #side-menu ul#sidr-id-menu-primary-navigation ul ul li a {
    	margin-left: 2em;
    }
    
    Thread Starter khiryos

    (@khiryos)

    Hello Ronald,

    Sorry for the delay, I’ve been working a lot since a week.

    I’ve just integrated the two code parts you provide. I pasted the first one into the “content width” section of the “functions.php” file. It’s a success, both on the tablet and the phone. I pasted the second part of the code into the “tablet style” section of the “style-mobile.css” file. It works like a charm on the tablet (indentation + little down arrow) but it does nothing on the phone. I tried to paste the code into the “phone style” section of the same file but it does not work either. It’s strange…

    Thank you very much for your help. It is very efficient!

    Cyril.

    Hi Cyril,

    I’m not sure what you mean by all those sections. The code I provided uses selectors that are specific to the mobile responsive side-menu. As such, you can add the first block of code at the end of your child themes funcions.php file, but before a closing ?>, if any. It doesn’t have to be in any section, it will load and do what it is designed for.

    Likewise for the css. You should not add the same code in various locations. First of all, because it will make it harder to maintain. You can add the css code to your child themes stylesheet style.css, or via the WordPress customizer. Not in a “tablet-style” section, not in a “phone style” section, just make sure it loads unconditionally, for your site. Again, the selectors used will make sure that the css code applies to the mobile responsive menu, it will not interfere with the “normal” desktop menu.

    Thread Starter khiryos

    (@khiryos)

    Hi Ronald,

    Excuse my lack of knowledge. By “section”, I mean the different parts of the code of the functions.php file (or style-mobile.css file) that are separated by comments. It is indeed a theme template provided by WordPress and not a theme entirely built by my own hands.

    I put the first block at the end of the code of the .php file (it does not have a closing “?>”) and the second one at the end of the .css file (idem). But my smartphone does not take into account the left margins of the submenus and the down arrow of the parent menus. It does work on other devices (tablet, computer).

    Tomorrow, I will try on another smartphone and I will let you know.

    Cyril.

    Thread Starter khiryos

    (@khiryos)

    Interesting: it’s fine with Chrome. Thus, the fault comes from the internet browser called “Samsung Internet”. Maybe the next update will resolve this (minor) problem.

    Hi Cyril,

    if it’s working fine otherwise, please mark the topic resolved, to clean up the list of unresolved topics. Thanks!

    Thread Starter khiryos

    (@khiryos)

    Hi Ronald,

    For sure. I just waited for you to read my last message.

    Thank you again for the help 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Create submenus for mobile devices’ is closed to new replies.