Making a menu responsive

  • Hi

    I am trying to make my menu responsive and using the code from this site https://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 2 replies - 16 through 17 (of 17 total)
  • Thread Starter mellyg

    (@mellyg)

    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?

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

    hope you did

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