<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div id="flipkart-navbar">
<div class="container">
<div class="row row1">
<ul class="largenav pull-right">
<li class="upper-links"><a class="links" href="http://clashhacks.in/">Startside</a></li>
<li class="upper-links"><a class="links" href="https://campusbox.org/">Hjemmesiden</a></li>
<li class="upper-links"><a class="links" href="http://clashhacks.in/">Kontakt oss</a></li>
<li class="upper-links"><a class="links" href="http://clashhacks.in/">Infosenter</a></li>
<li class="upper-links dropdown"><a class="links" href="http://clashhacks.in/">Admin</a>
<ul class="dropdown-menu">
<li class="profile-li"><a class="profile-links" href="http://yazilife.com/">Link</a></li>
<li class="profile-li"><a class="profile-links" href="http://hacksociety.tech/">Link</a></li>
<li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
<li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
<li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
<li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
<li class="profile-li"><a class="profile-links" href="http://clashhacks.in/">Link</a></li>
</ul>
</li>
</ul>
</div>
<div class="row row2">
<div class="col-sm-3">
<h2 style="margin:0px;"><span class="smallnav menu" onclick="openNav()">☰ <img src="https://nettbutikk.mcoslo.no/Pictures/newdesign/mcoslo_white.png" style="width:200px" /></span></h2>
<h1 style="margin:0px;"><span class="largenav"><img src="https://nettbutikk.mcoslo.no/Pictures/newdesign/mcoslo_white.png" style="width:100%" /></span></h1>
</div>
<div class="flipkart-navbar-search smallsearch col-sm-7 col-xs-11">
<div class="row">
<input class="flipkart-navbar-input col-xs-11" type="" placeholder="Søk etter produkter, kategorier og mer" name="">
<button class="flipkart-navbar-button col-xs-1">
<svg width="15px" height="15px">
<path d="M11.618 9.897l4.224 4.212c.092.09.1.23.02.312l-1.464 1.46c-.08.08-.222.072-.314-.02L9.868 11.66M6.486 10.9c-2.42 0-4.38-1.955-4.38-4.367 0-2.413 1.96-4.37 4.38-4.37s4.38 1.957 4.38 4.37c0 2.412-1.96 4.368-4.38 4.368m0-10.834C2.904.066 0 2.96 0 6.533 0 10.105 2.904 13 6.486 13s6.487-2.895 6.487-6.467c0-3.572-2.905-6.467-6.487-6.467 "></path>
</svg>
</button>
</div>
</div>
<div class="cart largenav col-sm-2">
<a class="cart-button">
<svg class="cart-svg " width="16 " height="16 " viewBox="0 0 16 16 ">
<path d="M15.32 2.405H4.887C3 2.405 2.46.805 2.46.805L2.257.21C2.208.085 2.083 0 1.946 0H.336C.1 0-.064.24.024.46l.644 1.945L3.11 9.767c.047.137.175.23.32.23h8.418l-.493 1.958H3.768l.002.003c-.017 0-.033-.003-.05-.003-1.06 0-1.92.86-1.92 1.92s.86 1.92 1.92 1.92c.99 0 1.805-.75 1.91-1.712l5.55.076c.12.922.91 1.636 1.867 1.636 1.04 0 1.885-.844 1.885-1.885 0-.866-.584-1.593-1.38-1.814l2.423-8.832c.12-.433-.206-.86-.655-.86 " fill="#fff "></path>
</svg> Handlekurv
<span class="item-number ">0</span>
</a>
</div>
</div>
<div class="cart largenav largeBottomNav col-sm-12">
<ul class="">
<li class="lower-links dropdown dropdown-toggle dropdown-large" >
<a class="links dropdown-toggle" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<svg viewBox="0 0 10 10" class="hamburger">
<path d="M8,3 L2,3" class="p1"/>
<path d="M2,5 L8,5" class="p2"/>
<path d="M8,7 L2,7" class="p3"/>
</svg> Produktkategorier <span class="caret"></span></a>
<ul class="dropdown-menu dropdown-menu-large row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Glyphicons</li>
<li><a href="#">Available glyphs</a></li>
<li class="disabled"><a href="#">How to use</a></li>
<li><a href="#">Examples</a></li>
<li class="divider"></li>
<li class="dropdown-header">Dropdowns</li>
<li><a href="#">Example</a></li>
<li><a href="#">Aligninment options</a></li>
<li><a href="#">Headers</a></li>
<li><a href="#">Disabled menu items</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Button groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Button toolbar</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Nesting</a></li>
<li><a href="#">Vertical variation</a></li>
<li class="divider"></li>
<li class="dropdown-header">Button dropdowns</li>
<li><a href="#">Single button dropdowns</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Input groups</li>
<li><a href="#">Basic example</a></li>
<li><a href="#">Sizing</a></li>
<li><a href="#">Checkboxes and radio addons</a></li>
<li class="divider"></li>
<li class="dropdown-header">Navs</li>
<li><a href="#">Tabs</a></li>
<li><a href="#">Pills</a></li>
<li><a href="#">Justified</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Navbar</li>
<li><a href="#">Default navbar</a></li>
<li><a href="#">Buttons</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Non-nav links</a></li>
<li><a href="#">Component alignment</a></li>
<li><a href="#">Fixed to top</a></li>
<li><a href="#">Fixed to bottom</a></li>
<li><a href="#">Static top</a></li>
<li><a href="#">Inverted navbar</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div id="mySidenav" class="sidenav">
<div class="container" style="background-color: #2874f0; padding-top: 10px;">
<span class="sidenav-heading">Home</span>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
</div>
<a href="http://clashhacks.in/">Link</a>
<a href="http://clashhacks.in/">Link</a>
<a href="http://clashhacks.in/">Link</a>
<a href="http://clashhacks.in/">Link</a>
</div>
#flipkart-navbar {
background-color: #14679b;
color: #FFFFFF;
border-bottom:3px solid #ff6600;
}
.row1{
padding-top: 10px;
}
.row2 {
padding-bottom: 20px;
}
.flipkart-navbar-input {
padding: 11px 16px;
border-radius: 2px 0 0 2px;
border: 0 none;
outline: 0 none;
font-size: 15px;
color:#000;
}
.flipkart-navbar-input::placeholder{
color:#333;
}
.flipkart-navbar-button {
background-color: #ffa200;
border: 1px solid #ffa200;
border-radius: 0 2px 2px 0;
color: #565656;
padding: 10px 0;
height: 43.5px;
cursor: pointer;
line-height:25px;
}
.cart-button {
background-color: #09324b;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .23), inset 1px 1px 0 0 hsla(0, 0%, 100%, .2);
padding: 10px 0;
text-align: center;
height: auto;
border-radius: 2px;
font-weight: 500;
width: 150px;
display: inline-block;
color: #FFFFFF;
text-decoration: none;
color: inherit;
border: none;
outline: none;
}
.cart-button:hover{
text-decoration: none;
color: #fff;
cursor: pointer;
}
.cart-svg {
display: inline-block;
width: 16px;
height: 16px;
vertical-align: middle;
margin-right: 8px;
}
.item-number {
border-radius: 3px;
background-color: rgba(0, 0, 0, .1);
height: 20px;
padding: 3px 6px;
font-weight: 500;
display: inline-block;
color: #fff;
line-height: 12px;
margin-left: 10px;
}
.upper-links, .lower-links {
display: inline-block;
padding: 0 11px;
line-height: 23px;
font-family: 'Roboto', sans-serif;
letter-spacing: 0;
color: inherit;
border: none;
outline: none;
font-size: 12px;
}
.upper-links.dropdown {
position: relative;
display: inline-block;
margin-bottom: 0px;
}
.upper-links.dropdown:hover {
background-color: #fff;
}
.upper-links.dropdown:hover .links {
color: #000;
}
.upper-links.dropdown:hover .dropdown-menu {
display: block;
}
.upper-links.dropdown .upper-links .dropdown-menu {
position: absolute;
top: 100%;
display: none;
background-color: #fff;
color: #333;
left: 0px;
border: 0;
border-radius: 0;
box-shadow: 0 4px 8px -3px #555454;
margin: 0;
padding: 0px;
}
.links {
color: #fff;
text-decoration: none;
}
.links:hover, .links:focus {
color: #fff;
text-decoration: none;
}
.profile-links {
font-size: 12px;
font-family: 'Roboto', sans-serif;
border-bottom: 1px solid #e9e9e9;
box-sizing: border-box;
display: block;
padding: 0 11px;
line-height: 23px;
}
.profile-li{
padding-top: 2px;
}
.largenav {
display: none;
}
.smallnav{
display: block;
}
.smallsearch{
margin-left: 15px;
margin-top: 15px;
}
.menu{
cursor: pointer;
}
@media screen and (min-width: 768px) {
.largenav {
display: block;
}
.smallnav{
display: none;
}
.smallsearch{
margin: 0px;
}
}
/*Sidenav*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #fff;
overflow-x: hidden;
transition: 0.5s;
box-shadow: 0 4px 8px -3px #555454;
padding-top: 0px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: #fff;
}
@media screen and (max-height: 450px) {
.sidenav a {font-size: 18px;}
}
.sidenav-heading{
font-size: 36px;
color: #fff;
}
/* large bottom nav */
.
.largeBottomNav{
text-transform:uppercase;
padding-top:0px;
}
.largeBottomNav > ul{
padding-left:0px;
}
.largeBottomNav > ul > li{
font-size:15px;
font-weight:bold;
}
.lower-links .dropdown .lower-links .dropdown-menu {
position: absolute;
top: 100%;
display: none;
background-color: #fff;
color: #333;
left: 0px;
border: 0;
border-radius: 0;
box-shadow: 0 4px 8px -3px #555454;
margin: 0;
padding: 0px;
}
/* DROPDOWN LARGE */
.dropdown-large {
position: static !important;
}
.dropdown-menu-large {
margin-left: 16px;
margin-right: 16px;
padding: 20px 0px;
}
.dropdown-menu-large > li > ul {
padding: 0;
margin: 0;
}
.dropdown-menu-large > li > ul > li {
list-style: none;
}
.dropdown-menu-large > li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.dropdown-menu-large > li ul > li > a:hover,
.dropdown-menu-large > li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.dropdown-menu-large .disabled > a,
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
color: #999999;
}
.dropdown-menu-large .disabled > a:hover,
.dropdown-menu-large .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.dropdown-menu-large .dropdown-header {
color: #428bca;
font-size: 18px;
}
@media (max-width: 768px) {
.dropdown-menu-large {
margin-left: 0 ;
margin-right: 0 ;
}
.dropdown-menu-large > li {
margin-bottom: 30px;
}
.dropdown-menu-large > li:last-child {
margin-bottom: 0;
}
.dropdown-menu-large .dropdown-header {
padding: 3px 15px !important;
}
}
/* Hamburger menu */
.hamburger {
cursor: pointer;
width: 40px;
vertical-align: bottom;
margin-bottom: -7px;
}
.hamburger {
fill: none;
stroke: currentcolor;
transition: .2s;
transform-origin: center;
}
.open .hamburger{
-webkit-transform: rotate(90deg) translateY(0em) translateX(0em);
transform: rotate(90deg) translateY(0em) translateX(0em);
}
.open .hamburger path{
opacity:0.4;
}
function openNav() {
document.getElementById("mySidenav").style.width = "70%";
// document.getElementById("flipkart-navbar").style.width = "50%";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.body.style.backgroundColor = "rgba(0,0,0,0)";
}
