Demo Menu

by ASHISH ROX

HTML

<link rel="stylesheet" href="http://themehippo.com/demo/html/sweep/css/style.css">
<link rel="stylesheet" href="http://themehippo.com/demo/html/sweep/css/font-awesome.min.css">
<!-- Navbar
================================================== -->
<div id="menu-wrapper" class="navbar-wrapper">
    <div class="inner-container">
        <div id="navigation-bar" class="navbar navbar-inverse navbar-static-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <div>
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a id="logo" class="navbar-brand" href="index.html"><img class="" src="http://themehippo.com/demo/html/sweep/images/logo.png"
                            alt=""/></a>
                    </div>
                </div>
                <div id="menu" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav navbar-left">
                        <li class="active home"><a href="#main-slider"> Home</a></li>
                        <li class="service"><a href="#services-wrapper">Services</a></li>
                        <li class="portfolio"><a href="#portfolio-wrapper">Portfolio</a></li>
                        <li class="about"><a href="#aboutus-wrapper">About</a></li>
                        <li class="team"><a href="#team-wrapper">Team</a></li>
                        <li class="client"><a href="#client-wrapper">Clients</a></li>
                        <li class="blog"><a href="#blog-wrapper">Blog</a></li>
                        <li class="contact"><a...

CSS

@media (max-width : 480px) {
    h2 {
        font-size : 20px !important;
    }
}

/* Extra small devices (phones, less than 768px) */
@media (max-width : 768px) {

    h2 {
        font-size : 30px;
    }

    .inner-wrapper {
        padding-left  : 30px;
        padding-right : 30px;
    }

    #body-wrapper > div:nth-child(odd),
    #body-wrapper > div.odd {
        left : 0;
    }

    #body-wrapper > div:nth-child(odd) .inner-wrapper > div,
    #body-wrapper > div.odd .inner-wrapper > div {
        left : 0;
    }

    #body-wrapper > div:nth-child(even),
    #body-wrapper > div.even {
        left : 0;
    }

    #body-wrapper > div:nth-child(even) .inner-wrapper > div,
    #body-wrapper > div.even .inner-wrapper > div {
        left : 0;
    }

    #portfolio .bx-wrapper,
    #team-wrapper .bx-wrapper {

    }

    #navigation-bar {
        min-height : 70px;
        background : none;
    }

    .navbar-inverse {
        background : none;
    }

    .navbar-header {
        background-color : rgba(34, 34, 34, 0.8);
        padding          : 10px 0;
    }

    .navbar-collapse {
        background-color : rgba(34, 34, 34, 0.8);
    }

    #menu > ul {
        width : 100%;
    }

    #menu > ul > li {
        display : block;
        float   : none;
    }

    #menu > ul > li > a {
        text-align : left;
        color      : #fff;
        padding    : 10px;
    }

    #menu > ul > li.active {
        -webkit-transform : scale(1);
        -moz-transform    : scale(1);
        -o-transform      : scale(1);
        -ms-transform     : scale(1);
        transform         : scale(1);
    }

    #menu > ul > li:hover {
        -webkit-transform : scale(1);
        -moz-transform    : scale(1);
        -o-transform      : scale(1);
        -ms-transform     : scale(1);
        transform         : scale(1);
        background-color  : #eb1c23;
    }

    #menu > ul > li.active > a {
        background-color : #eb1c23;
    }

    #menu > ul > li > a:before,...