Responsive Navigation Menu With CSS3 For Blogger
Responsive Design help blog to fit on every screen.My friend recently created a responsive design blogger template which you can buy it from here.In this tutorial we will create navigation menu with new feature of Css3 media queries.This menu change it design on mobile devices and in small resolution screen it make itself grid.Thanks to freshdesignweb for creating this awesome menu.
Adding This Menu To Blogger
For Adding this menu to blogger we need to paste some code So follow below steps-
- Go To Blogger Dashboard
- Click On Layout Tab
- Now Add HTML/Javascript and paste following code inside it.
<ul id="nav">
<li class="current"><a href="/" title="Home" >Home</a></li>
<li><a href="#" >Services</a></li>
<li><a href="#" >Experience</a></li>
<li><a href="#" >About Us</a></li>
<li><a href="#" >Contact</a></li>
</ul>
<style>
#nav { margin: 0; padding-top: 0.85em; width: auto; font-family:'Alegreya SC', Georgia, serif; font-size: 1.4em; }
#nav li { margin: 0 0 0.5em 0; display: block; float: left; clear: none; margin-right: 2.5%; background:#d18b5e; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; padding:5px 10px 5px 10px;}
#nav li:last-child { margin-right: 0; }
#nav a { display: block; color: #FFF; text-decoration:none; }
#nav a:hover { color: #484a50; border-bottom-color: #484a50; }
@media only screen and (max-width: 767px) {
#nav .current{background:#666; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background:none; }
#nav { margin: 0 6% 0 0; padding: 0; }
#nav li { margin: 0; display: block; float: left; width: 100%; clear: none; background:none; }
#nav a { padding: 6px 0 8px; text-indent: 10px; color: #fff; background: rgba(194,100,40,0.75) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPaI88BqH9XOlIIyVyqJiIDtJYL4dsOPaxsjuj-2r32ymgqW7f8HlWbsHgabqe9XZkqCDWvr8joT9noe7P_h_Za5K57GVjX77WJthVCm0lggyq4tn_Z_EPAaLzEj-SrfGrhyKR0Eft9V0/s1600/bg_arrow_white.png) 96% 50% no-repeat; border-top: 1px solid rgb(194,100,40); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
#nav a:hover { border-bottom: none; }
</style>
- After Adding This Code Click On Save Button.
Adding Meta Tags
Meta tag to control layout on mobile browsers a typical mobile-optimized site contains this type of meta tags, To Add this meta tags to blogger follow below steps-
- Go To Blogger Dashboard
- Click On Template Tab
- Now Click On Edit HTML>>Proceed
- Find <head> and paste below code above it.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
- Now finally your blog is having a beautiful responsive menu Click on Save Template Button And Preview your blog.
Customize This Menu
If you want more help from my site then comment your problem below I will try to resolve it as soon as possible.
0 comments:
Post a Comment