How To Add A Responsive Mobile Drop Down Menu In Blogger

How To Add A Responsive Drop Down Menu In Blogger ? This is the question which is searched in Google many times, So today i will tell you that how we can add a responsive menu in Blogger. You just have to follow these simple and easy steps.

Step 1. Go to Blogger Dashboard > Layout > Add Widget , and paste the following code in 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>

After pasting the code click on Save button to save the code.

Step 2. Go to Template > Edit HTML , Click anywhere in code and press CTRL + F to open search box, type or paste this code in search box and press enter.

]]></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 in by typing or pasting this tag in search box and paste the following code just above the </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 click on Save Template button to save changes.