How to add menu wordpress website templates to blogger blog

Adding a menu to a blog is very important. Because it has some popular links in our blog and many people also add categories. This does not require the visitors of our blog to wander around here. Today, many templates are already added to the menu. In this post we are telling you to add a menu wordpress website templates to blogger blog. This is a stylish and responsive menu that works well in mobile devices.


How to add menu wordpress website templates to blogger blog


We are telling you some simple steps below. By following the given process, you can easily add the menu to your blog.

Step 1. First log in to your blog and go to Themes -> Edit HTML.

Step 2. Now press the CTRL + F button and locate <body> and add the below code to the bottom of <body>.

<!---Menu by www.lsvdpr.com--> <nav id='nav-main'>
    <ul>
        <li><a href="URL">Title</a></li>
        <li><a href="URL">Title</a></li>
        <li><a href="URL">Title</a></li>
        <li><a href="URL">Title</a></li>
        <li><a href="URL">Title</a></li>
    </ul>
</nav>
<div id='nav-trigger'>
    <span>Menu <i class='fa fa-list'/></span>
</div>
<nav id='nav-mobile'/>

Customize:

  • Please paste the URL of the page or category in place of the URL in the above code.
  • Add title of page or category to title.
  • If you want to add more page or category, add <li> <a href=”URL”> Title </a> </ li> before </ ul>.

Step 3. CTRL + F by pressing the button]]> </ b: skin> to search and add]]> </ b: skin> below the given CSS code.

/********** Blogger Stylish & Mobile Menu By www.lsvdpr.com**********/
#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-main {
    background-color: #279CEB;
    margin: 0px;
    float: left;
}
#nav-main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
#nav-main li {
    display: inline-block;
    float: left;
    ont-family: &#39;
    Open Sans&#39;
    , sans-serif;
}
#nav-main li:last-child {
    border-right: none;
}
#nav-main a {
    padding: 0 25px;
    color: #EEE;
    line-height: 67px;
    display: block;
}
#nav-main a:hover {
    background-color: #3AB0FF;
    text-decoration: none;
    color: #fff;
}
#nav-mobile {
    position: relatifve;
    display: none;
}
#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 ul {
    padding: 0;
    margin: 0;
}
nav#nav-mobile a {
    display: block;
    color: #29a7e1;
    padding: 10px 0px;
    text-decoration: none;
    border-bottom: 1px solid #00aeef;
    text-align: center;
}
nav#nav-mobile a:hover {
    background-color: #111;
    color: #fff;
}
nav#nav-mobile li {
    display: block;
}
nav#nav-mobile {
    display: none;
}
/* =Media Queries
-------------------------------------------------------------- */

@media all and (max-width: 900px) {
    #nav-trigger {
        display: block;
    }
    #nav-main {
        display: none!important;
    }
    nav#nav-mobile {
        display: block;
    }
}

Step 4. You have now added the css code. Now press CTRL + F again and find </ head>, then add the following code to </ head>.

<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>

Step 5. Now locate <head> and add the code below into the bottom of <head>.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>

Step 6. Now finally save the template.

Congratulations! You’ve added the menu wordpress website templates to your blog. Now try visiting your blog once.