How To Add Responsive Drop Down Menu In Blogger

How To Add Responsive Drop Down Menu In Blogger

How to add responsive drop down menu in Blogger ? This is the question which is searched in Google many times, so today i will tell you that we can add a responsive drop down menu in Blogger. You just have to follow these simple and easy steps.



 

Step 1 : Go to Blogger > Dashboard > Layout > Add A Widget and Select HTML/Javascript, Copy the following code and paste into HTML/Javascript.

<!---Menu--> <nav id='nav-main'>

<ul>
<li><a href=''>Home</a></li>
        <li><a href=''>About</a></li>
        <li><a href=''>Gallery</a></li>
        <li><a href=''>Tutorials</a></li>
        <li><a href=''>Contact</a></li>
    </ul>
</nav>
<div id='nav-trigger'>
    <span>Menu <i class='fa fa-list'/></span>
</div>
<nav id='nav-mobile'/>
</div>

Now click on Save orange button to save it.

Step 2 : Go to Template section > Edit HTML , Click anywhere in the code and press CTRL + F button to search in the code, type the following code in search and press enter button

]]></b:skin>

Step 3 : Paste the following code below ]]></b:skin>

#nav-trigger {
        display: none;
        text-align: center;
    }
    #nav-trigger span {
        display: block;
        background-color: #279CEB;
        cursor: pointer;
        text-transform: uppercase;
        padding: 0 25px;
        color: #EEE;
        line-height: 67px;
    }
    nav#nav-mobile {
        margin: 0px;
    }
    nav {
        margin-bottom: 30px;
    }
    nav#nav-main {
        background-color: #279CEB;
        margin: 0px;
        float: left;
    }
    nav#nav-main ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    nav#nav-main li {
        display: inline-block;
        float: left;
        ont-family: 'Open Sans', sans-serif;
    }
    nav#nav-main li:last-child {
        border-right: none;
    }
    nav#nav-main a {
        padding: 0 25px;
        color: #EEE;
        line-height: 67px;
        display: block;
    }
    nav#nav-main a:hover {
        background-color: #3AB0FF;
        text-decoration: none;
        color: #fff;
    }
    nav#nav-mobile {
        position: relatifve;
        display: none;
    }
    nav#nav-mobile ul {
        display: none;
        list-style-type: none;
        position: absolute;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        background-color: #ddf0f9;
        z-index: 10;
        padding: 0px;
        border-bottom: solid 1px #cc0028;
    }
    nav#nav-mobile li:last-child {
    border-bottom: none;
    }
    nav#nav-mobile a {
    display: block;
    color: #29a7e1;
    padding: 10px 30px;
    text-decoration: none;
    border-bottom: 1px solid #00aeef;
    }
    nav#nav-mobile a:hover {
    background-color: #e6002d;
    color: #fff;
    }
/* =Media Queries
    ---------------------------------------------------- */
    @media all and (max-width: 900px) {
    #nav-trigger {
        display: block;
    }
    nav#nav-main {
        display: none;
    }
    nav#nav-mobile {
        display: block;
    }
    }

Step 4 : Search </head> tag by typing it in search box and press enter button, and paste the following code just above </head> tag.

<script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){
        $("#nav-mobile").html($("#nav-main").html());
        $("#nav-trigger span").click(function(){
            if ($("nav#nav-mobile ul").hasClass("expanded")) {
                $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
                $(this).removeClass("open");
            } else {
                $("nav#nav-mobile ul").addClass("expanded").slideDown(250);
                $(this).addClass("open");
            }
        });
    });
    //]]>
    </script>

Now save the template and see the changes on your blog.