Menu
I have following menu that properly works. All I need is that once an item is selected or hovered its whole section be highlighted in all sizes of screen. At the moment just partial part of each item get highlighted.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.2.1/bootstrap-social.css">
<style>
.container-menu {
width: 100%;
background: none repeat scroll 0 0 rgb(0,0,0);
min-height: 63px;
}
.menu-items {
max-width: 1130px;
width: 100%;
height: 100%;
margin: 0 auto; //
text-align: center;
text-align: left;
position: relative;
padding-top: 36px;
text-align: center;
}
.menu-items li {
background-color: rgb(0,0,0);
}
.menu-items #home {
background-color: green;
}
.menu-items {
position: relative;
}
.menu-items a {
color: #fff;
}
.menu-items ul {
padding: 0;
list-style: none;
margin: 0;
}
.menu-items li {
display: inline;
border-left: 1px solid #fff;
}
.menu-items li:last-child {
border-right: 1px solid #fff;
}
.burger {
width: 25px;
height: 25px;
position: absolute;
top: 7px;
right: 7px;
display: none;
}
.menu-items li:hover {
background-color: green;
}
@media only screen and (max-width: 720px) {
.burger {
display: block;
}
.menu-items ul {
display: none;
}
.menu-items li {
display: block;
border: 0;
}
.container-menu>img {
display: none;
}
}
@media ( min-width :1500px) {
.menu-items li {
padding: 8px 38px;
}
}
@media ( min-width : 979px) and (max-width:1500px) {
.menu-items li {
border-left: 1px solid #fff;
display: inline;
padding: 8px 15px;
}
}
@media ( min-width : 768px) and (max-width: 979px) {
.menu-items li {
border-left: 1px solid #fff;
display: inline;
padding: 8px 15px;
}
.item {
height: 186px !important;
}
}
@media ( max-width : 767px) {
.container-menu {
min-height: 63px;
}
.menu-items li {
border-left: 1px solid #fff;
padding: 8px 12px;
}
}
@media ( max-width : 480px) {
.container-menu {
min-height: 48px;
}
.menu-top-center {
width: 100%;
}
.menu-top-right {
padding-bottom: 4px;
}
}
</style>
</head>
<body>
<header>
<div class="container-menu">
<div class="menu-items">
<ul id="">
<li id="home"><a href="#"><i class="fa fa-home f24"></i>
Home</a></li>
<li id="item1"><a href="#">Item 1</a></li>
<li id="item2"><a href="#">Item 2</a></li>
<li id="mitem3"><a href="#">Item 3</a></li>
<li id="item4"><a href="#">Item 4</a></li>
<li id="item5"><a href="#">Item 5</a></li>
<li id="item6"><a href="#">Item 6</a></li>
<li id="item7"><a href="#">Item 7</a></li>
</ul>
<div class="burger hidden-md">
<i class="fa fa-align-justify fa-2x"></i>
</div>
</div>
</div>
</header>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('.burger').click(function() {
$('.menu-items ul').toggleClass("visible");
});
});
</script>
</body>
</html>
406
When you design a menu it should express your eatery's personality, focuses your overall operations, promotes profitability, establishes your budget, and keeps your brand fresh in your customer's mind.
I have completely redesigned new Navigation bar as per your images. Please have a look.
body {
line-height: 0 !important;
}
.navbar-collapse.collapse {
display: block!important;
}
.navbar-nav>li,
.navbar-nav {
float: left !important;
}
.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}
.navbar-right {
float: right!important;
}
.navbar > .container {
text-align: center !important;
}
.navbar-header,
.navbar-brand,
.navbar .navbar-nav,
.navbar .navbar-nav > li {
float: none !important;
display: inline-block !important;
}
.collapse.navbar-collapse {
float: none !important;
display: inline-block!important;
width: auto !important;
clear: none !important;
}
.navbar {
position: relative !important;
}
.back-stripe {
/*display: none;*/
position: absolute;
top: 0;
left: 0;
right: 0;
height: 75px;
z-index: 999999;
background-image: url('http://i59.tinypic.com/2yvucqw.png');
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
}
.navbar-default {
background: #4C0084 !important;
}
.navbar-default .navbar-nav > li:first-child {
border-left: 1px solid #FFA600;
}
.navbar-default .navbar-nav > li {
box-sizing: border-box;
border-right: 1px solid #FFA600;
}
.navbar-default .navbar-nav > li > a {
color: #fff !important;
font-weight: bold !important;
}
.navbar-default .navbar-nav > li > a.active {
background: #FFA600 !important;
}
.navbar-default .navbar-nav > li > a:hover {
background: #FFA600 !important;
color: #fff !important;
}
.navbar-nav {
margin: 0 !important;
}<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="back-stripe"></div>
<div class="container" style="padding-top: 3%;margin-top:-4px;">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#" class="active">Home</a>
</li>
<li><a href="#">Item2</a>
</li>
<li><a href="#">Item3</a>
</li>
<li><a href="#">Item4</a>
</li>
<li><a href="#">Item5</a>
</li>
<li><a href="#">Item6</a>
</li>
<li><a href="#">Item7</a>
</li>
</ul>
</div>
</div>
</div>I could solve the issue by adding following code
.menu-items li{
padding:16px 38px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With