How to add responsive and stylish website menu design in blog

Will tell you in this post stylish website menu design How to Make Your Blog stylish website menu design Then you can see yourself too How easy are we to take Why Blogs Make The stylish website menu design You know This makes our blog look great When our blog looks good, people will also like it And this will attract people coming to our blog What will happen with this will increase the traffic and ranking of our blog When traffic and rankings increase, our blog will be popular When our blog is popular then we will also have an identity.


How to add responsive and stylish website menu design in blog


We are telling you some simple steps below. By following the given process, you can easily add the website menu design 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 to your blog.