WordPress.org

Ready to get started?Download WordPress

Forums

Making a menu responsive (18 posts)

  1. mellyg
    Member
    Posted 1 year 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 1 year ago #

    The line of code I am unsure of is below

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

  3. mellyg
    Member
    Posted 1 year 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 1 year ago #

    Which theme is this regarding?

  5. mellyg
    Member
    Posted 1 year 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 1 year 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 1 year 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 1 year 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 1 year 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 1 year ago #

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

  11. Andrew
    Forum moderator
    Posted 1 year 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 1 year 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 1 year 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 1 year ago #

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

  15. esmi
    Forum Moderator
    Posted 1 year 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 1 year 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 1 year 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 1 year ago #

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

    hope you did

Topic Closed

This topic has been closed to new replies.

About this Topic