How Can I Make a Navigation Bar Responsive With Drop Down


#1

Hey i Have a blog related on technology

I have Navigation Bar But I am unable to use it in Responsive View . When i click on Menu On responsive View then it Doesn`t show Drop Down Function .How Can i Fix it or Create New One Please Help Me solving this problem.Please Please Please Sorry i cant put links on this post


#2

Hi @ishworgiri0

Welcome to Blogger Help Forum. Here’s a Fully Responsive Navigation Menu developed by MBT. It has clean design and is 100% responsive. I think its the best choice Responsive Navigation Menu Click Here

Thanks


#3

There are actually many ways to create responsive web site navigation and even some jQuery plugins are available to do it in a second.

First of all, let’s add the meta viewport inside the head tag. This meta viewport tag is required for our page to scale properly inside any screen size, particularly in the mobile viewport.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Then add the following snippet as the navigation html markup inside body tag.

<nav class="clearfix">
    <ul class="clearfix">
        <li><a href="#">Home</a></li>
        <li><a href="#">Widgets</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="#">Blogger Tools</a></li>  
    </ul>
    <a href="#" id="pull">Menu</a>
</nav>

The nav tag that define the navigation will have 100% full width of the browser window, while the ul where it contains our primary menu links will have 600px for the width. paste the following code inside b:skin (or in style sheet)

nav {
	height: 40px;
	width: 100%;
	background: #455868;
	font-size: 11pt;
	font-family: 'PT Sans', Arial, sans-serif;
	font-weight: bold;
	position: relative;
	border-bottom: 2px solid #283744;
}
nav ul {
	padding: 0;
	margin: 0 auto;
	width: 600px;
	height: 40px;
}
nav li {
	display: inline;
	float: left;
}
nav a {
	color: #fff;
	display: inline-block;
	width: 100px;
	text-align: center;
	text-decoration: none;
	line-height: 40px;
	text-shadow: 1px 1px 0px #283744;
}
nav li a {
	border-right: 1px solid #576979;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: #8c99a4;
}
nav a#pull {
	display: none;
}

/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
  	nav li a {
		border-bottom: 1px solid #576979;
		border-right: 1px solid #576979;
	}
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #283744;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	nav li a {
		border-bottom: 1px solid #576979;
	}
}

However, when you resize the browser window right after you’ve just viewed and hide the menu in a small screen, the menu will remain hidden, as the display: none style generated by the jQuery is still attached in the element.

So paste the following code into your body section

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script>
		$(function() {
			var pull 		= $('#pull');
				menu 		= $('nav ul');
				menuHeight	= menu.height();

			$(pull).on('click', function(e) {
				e.preventDefault();
				menu.slideToggle();
			});

			$(window).resize(function(){
        		var w = $(window).width();
        		if(w > 320 && menu.is(':hidden')) {
        			menu.removeAttr('style');
        		}
    		});
		});
	</script>

I hope it will help need further help let me know…!! Happy Blogging


#4

@mybloggertricks Do i Need nav Tag Cant i Use Div Because i have a Navigation Bar with already and Css Gets Mixed Up So Any Other Idea. I Am i Need Of Making Menu For Contact,About,Sitemap,PP,Advertise at Top With Position Fixed


#5

@ishworgiri0 you can use the css properties only, just copy the css code without id’s. the other solution is, share you older menu code here, then i will try to edit the above nav menu with your menu ids and classes.

i hope then you can use that on your blog.

Thanks.


#6

hi , I cant find out how to create submenu in submenu throught link instructions .Is there a way to do this .


#7

Hello @ishworgiri0 I Recommend You To Use Bootstrap Because The Best Responsiveness is given by Bootstrap.


#8

But It Affects the original Blogger Template … Anyway. I don`t Need it Now