WordPress.org

Support

Support » Themes and Templates » Making a menu responsive

Making a menu responsive

  • 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?

Viewing 15 replies - 1 through 15 (of 17 total)
  • The line of code I am unsure of is below

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

    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-->
    Moderator Andrew Nevins

    @anevins

    Forum moderator

    Which theme is this regarding?

    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.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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

    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.

    esmi

    @esmi

    Forum Moderator

    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.

    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?

    esmi

    @esmi

    Forum Moderator

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

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    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?

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

    esmi

    @esmi

    Forum Moderator

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

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

    esmi

    @esmi

    Forum Moderator

    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.

    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

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘Making a menu responsive’ is closed to new replies.