WordPress.org

Ready to get started?Download WordPress

Forums

Making a menu responsive (18 posts)

  1. mellyg
    Member
    Posted 10 months ago #

    Hi

    I am trying to make my menu responsive and using the code from this site http://www.hongkiat.com/blog/responsive-web-nav/

    My problem is getting the @media only screen and (max-width : 480px) to work.

    The code asks for:

    <nav class="clearfix">
        <ul class="clearfix">
            <li><a href="#">Home</a></li>
            <li><a href="#">How-to</a></li>
            <li><a href="#">Icons</a></li>
            <li><a href="#">Design</a></li>
            <li><a href="#">Web 2.0</a></li>
            <li><a href="#">Tools</a></li>
        </ul>
        <a href="#" id="pull">Menu</a>
    </nav>

    My question is where do I put the line of code Menu Does is go in the header or in the function file. I have tried putting it:

    <div id="nav-bar-case">
    	<nav class="group">
        	<?wp_nav_menu(array('menu'=>'Header Menu'));?>	
    
    	<nav><!--end of nav bar-->
         <a href="#" id="pull">Menu</a>
    </div><!--end of nav bar case-->

    But no luck - anyone know what do do?

  2. mellyg
    Member
    Posted 10 months ago #

    The line of code I am unsure of is below

    <a href="#" id="pull">Menu</a>

  3. mellyg
    Member
    Posted 10 months ago #

    Have also tried the following code

    <nav class="group">
        	<?wp_nav_menu(array('menu'=>'Header Menu'));?>
            <a href="#" id="pull">Menu</a>
    	<nav><!--end of nav bar-->
  4. Andrew
    Forum Moderator
    Posted 10 months ago #

    Which theme is this regarding?

  5. mellyg
    Member
    Posted 10 months ago #

    It's aniximander - a theme that comes with a lynda.com tutorial.

    The navigation is currently not responsive so I am looking at ways to make it responsive - like in the way the attached tutorial has done it, just having some trouble implimenting it.

  6. Andrew
    Forum Moderator
    Posted 10 months ago #

    Basically all you need to do is:

    1. Duplicate the menu you have at the moment and hide it with CSS. You'd probably style it like it is on that hongkiat tutorial.
    2. Add a link to trigger the menu and hide that for now
    3. In a mobile media query show the trigger link
    4. Add some jQuery to toggle (hide and show) the menu on click/focus of the trigger link
  7. mellyg
    Member
    Posted 10 months ago #

    Are these the same instructions as in the tutorial?

    I have got it working on an html website fine - but am unsure of how to get it working in WordPress, because the navigation code looks a little different.

  8. esmi
    Forum Moderator
    Posted 10 months ago #

    Hmm... and then what happens when a keyboard navigator or screen reader user tries to tab through a page on a desktop machine? You end up with a link that will have focus but no content - creating confusion and a potential accessibility issue.

    I'd argue that this needs to be handled using pure CSS and @media.

  9. mellyg
    Member
    Posted 10 months ago #

    Oh ok, I will have to read up on how to do this with CSS.

    Do you know of any tutorials that show how to do this?

  10. esmi
    Forum Moderator
    Posted 10 months ago #

    I'd suggest that you look for tutorials on responsive web design.

  11. Andrew
    Forum Moderator
    Posted 10 months ago #

    You end up with a link that will have focus but no content

    How come if you use jQuery to trigger the menu on click/focus?

  12. mellyg
    Member
    Posted 10 months ago #

    Yes, have been looking all over the web for them, but its hard to find one that relates to wordpress.

  13. esmi
    Forum Moderator
    Posted 10 months ago #

    It doesn't have to relate to WordPress. The basics of responsive design apply to any site that uses CSS.

  14. mellyg
    Member
    Posted 10 months ago #

    Yes, but i am never sure how to impliment the javascript into the functions.php file.

  15. esmi
    Forum Moderator
    Posted 10 months ago #

    How come if you use jQuery to trigger the menu on click/focus?

    Because the menu links may still be available (albeit hidden) & therefore focus-able on a non-mobile site. Although display:none; does hide content from many screen readers, it should never be relied upon in a situation such as this. If you're going to use a jQuery approach, it would be better to generate the entire new menu using jQuery and not bother hiding it in the first place.

    Going back to responsive design for a moment, if you have a menu that is (say) 400px wide and a screen that's only 300px wide, then something has to give. You could perhaps use a smaller font, less padding, smaller margins. Or you could just re-think how to display the menu to the best advantage on a smaller devices - perhaps as a vertical menu for example. That way you avoid any code bloat and probably side-step any new access barriers.

  16. mellyg
    Member
    Posted 10 months ago #

    Any chance you can tell me what I would need to put into the functions.php file if I was to use this one http://responsive-nav.com

  17. mellyg
    Member
    Posted 10 months ago #

    If anyone was able to help me out on this- would greatly appreciate it. I am trying to add the responsive nav from the link above but having trouble with the functions.php file.

    This is what I have

    // RESPONSIVE NAV
    
    function responsive_nav() {
    	if (!is_admin()) {
    		wp_register_script('responsive-nav', get_template_directory_uri(). '/js/responsive-nav.js', array('jquery') );
    		wp_enqueue_script('responsive-nav');
    
    		// Enqueue Nav style sheet
    		wp_register_style( 'responsive-nav-style', get_template_directory_uri() . '/CSS/responsive-nav.css', 'all' );
    		wp_enqueue_style( 'responsive-nav-style' );
    
    		function responsive_nav() { ?>
    			<script>
      var navigation = responsiveNav("#nav");
    			</script>
    		<?php
    		}
    	}
    }
    
    add_action('init', 'responsive_nav');

    Does anyone know what I should do?

  18. Twohedz
    Member
    Posted 7 months ago #

    @mellyg did you resolve this. I am looking to do the same thing but can't find a guide online?

    hope you did

Reply

You must log in to post.

About this Topic