I created a navbar and all the tabs are inline. When the window size is reduced, a bars icon appears and the tabs display vertically instead of horizontally. I want the output so that when the window size is reduced, the bars icon appears but the tabs disappear and can only be seen (vertically) and unseen when the bars icon is clicked.
I tried jquery, but it didn't work. I'm not sure how to do this, can you help me?
body {
margin: 0;
padding: 0;
font-family: Sans-Serif;
}
nav {
margin-left: 45px;
;
width: 90%;
background: #D1D0D3;
}
ul {
list-style-type: none;
width: 80%;
margin: 0 auto;
color: black;
padding: 0;
}
ul a {
color: black;
text-decoration: none;
}
ul li {
display: inline-block;
padding: 20px;
}
ul li:hover {
background-color: yellow;
}
.toggle {
width: 100%;
padding: 10px 20px 0px 20px;
background-color: #C2ABF1;
text-align: right;
box-sizing: border-box;
color: white;
font-size: 30px;
display: none;
}
#media (max-width: 800px) {
.toggle {
display: block;
}
.block {
display: block;
}
}
<div class="toggle">
<i class="fa fa-bars menu" id="menu"></i>
</div>
<nav>
<ul class="ul">
<li class="block">Home</li>
<li class="block">About</li>
<li class="block">Makeup</li>
<li class="block">Hairstyle</li>
<li class="block">Contact</li>
</ul>
</nav>
Add this jquery code
$(".menu").on("click", function() {
$("nav .ul").toggle(500);
})
And this CSS in media query
.ul {
display: none;
}
nav {
margin-left: 0;
width: 100%;
}
$(".menu").on("click", function() {
$("nav .ul").toggle(500);
})
body {
margin: 0;
padding: 0;
font-family: Sans-Serif;
}
nav {
margin-left: 45px;
;
width: 90%;
background: #D1D0D3;
}
ul {
list-style-type: none;
width: 80%;
margin: 0 auto;
color: black;
padding: 0;
}
ul a {
color: black;
text-decoration: none;
}
ul li {
display: inline-block;
padding: 20px;
}
ul li:hover {
background-color: yellow;
}
.toggle {
width: 100%;
padding: 10px 20px 0px 20px;
background-color: #C2ABF1;
text-align: right;
box-sizing: border-box;
color: white;
font-size: 30px;
display: none;
}
#media (max-width: 800px) {
.toggle {
display: block;
}
.block {
display: block;
}
.ul {
display: none;
}
nav {
margin-left: 0;
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/eed659c9d4.js"></script>
<div class="toggle">
<i class="fa fa-bars menu" id="menu"></i>
</div>
<nav>
<ul class="ul">
<li class="block">Home</li>
<li class="block">About</li>
<li class="block">Makeup</li>
<li class="block">Hairstyle</li>
<li class="block">Contact</li>
</ul>
</nav>
Your code should be like this:
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body{
margin: 0;
padding: 0;
font-family: Sans-Serif;
}
nav{
margin-left: 45px;;
width: 90%;
background: #D1D0D3;
}
ul{
list-style-type: none;
width: 80%;
margin: 0 auto;
color: black;
padding: 0;
}
ul a {
color: black;
text-decoration: none;
}
ul li{
display: inline-block;
padding: 20px;
}
ul li:hover{
background-color: yellow;
}
.toggle{
width: 100%;
padding: 10px 20px 0px 20px;
background-color: #C2ABF1;
text-align: right;
box-sizing: border-box;
color: white;
font-size: 30px;
display: none;
}
#media (max-width: 800px)
{
.toggle{
display: block;
}
nav ul{
display:none;
}
ul li{
display:block;
}
}
</style>
</head>
<body>
<div class="toggle">
<i class="fa fa-bars menu" id="menu"></i>
</div>
<nav>
<ul class="ul">
<li>Home</li>
<li><a href="#" >About</a></li>
<li>Makeup</li>
<li>Hairstyle</li>
<li>Contact</li>
</ul>
</nav>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(".menu").on("click", function() {
$("nav .ul").toggle();
})
</script>
</html>
Related
I have tried literally everything to try and make the exit icon show up on the menu by giving it an index of 999 but still no luck in making it show, any idea why it is not working?
I have added the JavaScript as well.
menuBtn.addEventListener('click' , () => {
const menu = document.querySelectorAll('.menu');
for(let el of menu){
el.style.display = 'block'
}
})
/*Navbar*/
.navbar {
width: 100%;
position: fixed;
font-family: "Ubuntu", sans-serif;
padding: 30px 0;
}
.navbar .logo a {
font-size: 2rem;
font-weight: 600;
color: white;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.sticky {
padding: 30px 0;
background-color: crimson;
}
.sticky .logo a span {
color: #fff;
}
.menu li {
display: inline-block;
list-style: none;
}
.menu li a {
color: #fff;
font-size: 1.1rem;
font-weight: 500;
margin-left: 35px;
padding-left: 5px;
transition: color 0.3s ease;
}
.menu li a:hover {
border-left: 3px solid white;
color: crimson;
}
.sticky .menu li a:hover {
color: white;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/*Menu Button*/
.fa.fa-bars.menuBtn {
color: #fff;
font-size: 35px;
cursor: pointer;
display: none;
}
.fa.fa-times-circle.exit {
color: white;
font-size: 35px;
cursor: pointer;
display: none;
}
#media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
padding-left: 10em;
}
.menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
display: none;
}
.fa.fa-times-circle.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
.menu ul li {
display: block;
}
.menu ul li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<header>
<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>
</div>
</nav>
<!--Head Banner-->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Hadi Zouhbi</div>
<div class="text-3">And I'm a <span id="headSpan"><Developer></Developer></span></div>
</div>
</div>
</section>
</header>
Because it never made display:block when enter in small screen like you did for menubtn.
.fa.fa-bars.menuBtn {
display: block;
padding-left: 10em;
}
Do the same for exit icon under #media (max-width: 934px) also
.fa.fa-times-circle.exit {
display: inline-block;
}
And remove this code
.fa.fa-times-circle.exit {
z-index: 999;
display: none;
margin: 1.8rem;
}
Working example:
/*Navbar*/
body {
background-color: #ccc;
}
.navbar {
width: 100%;
position: fixed;
font-family: "Ubuntu", sans-serif;
padding: 30px 0;
}
.navbar .logo a {
font-size: 2rem;
font-weight: 600;
color: white;
}
.navbar .logo a span {
color: crimson;
transition: all 0.3s ease;
}
.sticky {
padding: 30px 0;
background-color: crimson;
}
.sticky .logo a span {
color: #fff;
}
.menu li {
display: inline-block;
list-style: none;
}
.menu li a {
color: #fff;
font-size: 1.1rem;
font-weight: 500;
margin-left: 35px;
padding-left: 5px;
transition: color 0.3s ease;
}
.menu li a:hover {
border-left: 3px solid white;
color: crimson;
}
.sticky .menu li a:hover {
color: white;
}
.navbar .max-width {
display: flex;
align-items: center;
justify-content: space-between;
}
.max-width {
max-width: 1300px;
padding: 0 80px;
margin: auto;
}
/*Menu Button*/
.fa.fa-bars.menuBtn {
color: #fff;
font-size: 35px;
cursor: pointer;
display: none;
}
.fa.fa-times-circle.exit {
color: white;
font-size: 35px;
cursor: pointer;
display: none;
}
#media (max-width: 934px) {
.max-width {
padding: 0 50px;
}
.fa.fa-bars.menuBtn {
display: block;
padding-left: 10em;
}
.fa.fa-times-circle.exit {
display: inline-block;
}
.menu {
position: fixed;
height: 100vh;
width: 100%;
left: 0;
top: 0;
background-color: #111;
text-align: center;
padding-top: 110px;
display: none;
}
.menu ul li {
display: block;
}
.menu ul li a {
display: inline-block;
margin: 20px 0;
font-size: 35px;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#5.15.3/css/fontawesome.min.css" integrity="sha384-wESLQ85D6gbsF459vf1CiZ2+rr+CsxRY0RpiF1tLlQpDnAgg6rwdsUF1+Ics2bni" crossorigin="anonymous">
<header>
<nav class="navbar" id="nav">
<div class="max-width">
<div class="logo"><a id="headSpan" href="index.html">Port<span>folio.</span></a></div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Projects</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
<div>
<i class="fa fa-bars menuBtn" id="menuBtn" aria-hidden="true"></i>
<i class="fa fa-times-circle exit" id="exitBtn" aria-hidden="true"></i>
</div>
</div>
</nav>
<!--Head Banner-->
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Hadi Zouhbi</div>
<div class="text-3">And I'm a <span id="headSpan"><Developer></Developer></span></div>
</div>
</div>
</section>
</header>
I added a link to the logo(image) on the navbar, but when I go to the page the whole navbar apart from the links becomes the link. How do I make it so that it only applies to the image?
As per comments I have uipdated the code with CSS and JS. I'm very new to web development, this may explain my lack of knowledge and overuse of CSS.
the image.
function navHamburger() {
var x = document.getElementById("nav-links");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
nav {
background-color: #fff;
}
.nav-row {
/* margin: 0; */
overflow: hidden;
position: relative;
padding: 10px;
}
.nav-row #nav-links {
display: none;
}
.nav-row a {
color: #0075b2;
text-decoration: none;
font-weight: 500;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-align: center;
text-transform: uppercase;
padding: 20px;
}
.nav-row a.icon {
font-size: 200%;
display: block;
position: absolute;
right: 0;
top: 0;
margin-top: 0.1em;
margin-right: 25px;
}
.nav-row a:hover {
color: #19afff;
}
.main-nav {
text-decoration: none;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.mobile-menu {
text-decoration: none;
list-style: none;
}
.main-nav li a:link,
.main-nav li a:visited {
color: #0075b2;
text-decoration: none;
text-transform: uppercase;
font-size: 150%;
font-weight: 500;
padding: 4px;
}
.main-nav li a:hover,
.main-nav li a:active {
border-top: 2px solid #b36500;
border-bottom: 2px solid #b36500;
-webkit-transition: border-bottom 0.2s;
-o-transition: border-bottom 0.2s;
transition: border-bottom 0.2s;
}
#media (min-width: 601px) {
.mobile-menu {
display: none;
}
}
.desktop-menu {
display: none;
right: 0;
top: 0;
}
#media (min-width: 601px) {
.desktop-menu {
display: block;
position: absolute;
margin-top: 30px;
margin-right: 10px;
}
.nav-row {
margin-right: 20px;
}
.nav-row a {
margin-left: 20px;
}
}
#media (min-width: 901px) {
.desktop-menu {
margin-top: 50px;
margin-right: 10px;
}
}
#media (min-width: 1290px) {
.desktop-menu {
margin-top: 70px;
margin-right: 10px;
}
}
<nav>
<div class="nav-row">
<div>
<a href="index.html">
<img
src="resources/img/logo/fullLogo.svg"
alt="Archer Civils & Construction Logo"
class="logo"
/>
</a>
</div>
<div class="mobile-menu">
<div id="nav-links">
Civils
Fencing
Contact
</div>
<a
href="javascript:void(0);"
class="icon hamburger-icon"
onclick="navHamburger()"
>
<i class="fa fa-bars"></i>
</a>
</div>
<div class="desktop-menu">
<ul class="main-nav">
<li>Civils</li>
<li>Fencing</li>
<li>Contact </li>
</ul>
</div>
</div>
</nav>
You're using flex for the main nav class, which takes full inline value:
fiddle to playaround.
nav {
background-color: #fff;
}
.nav-row {
/* margin: 0; */
overflow: hidden;
position: relative;
padding: 10px;
}
.nav-row #nav-links {
display: none;
}
img {
height: 100px;
width: 100px;
}
.nav-row a {
color: #0075b2;
text-decoration: none;
font-weight: 500;
text-align: center;
text-transform: uppercase;
padding: 20px;
}
.nav-row a.icon {
font-size: 200%;
display: block;
position: absolute;
right: 0;
top: 0;
margin-top: 0.1em;
margin-right: 25px;
}
.nav-row a:hover {
color: #19afff;
}
.main-nav {
text-decoration: none;
list-style: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.mobile-menu {
text-decoration: none;
list-style: none;
}
.main-nav li a:link,
.main-nav li a:visited {
color: #0075b2;
text-decoration: none;
text-transform: uppercase;
font-size: 150%;
font-weight: 500;
padding: 4px;
}
.main-nav li a:hover,
.main-nav li a:active {
border-top: 2px solid #b36500;
border-bottom: 2px solid #b36500;
-webkit-transition: border-bottom 0.2s;
-o-transition: border-bottom 0.2s;
transition: border-bottom 0.2s;
}
#media (min-width: 601px) {
.mobile-menu {
display: none;
}
}
.desktop-menu {
display: none;
right: 0;
top: 0;
}
#media (min-width: 601px) {
.desktop-menu {
display: block;
position: absolute;
margin-top: 30px;
margin-right: 10px;
}
.nav-row {
margin-right: 20px;
}
.nav-row a {
margin-left: 20px;
}
}
#media (min-width: 901px) {
.desktop-menu {
margin-top: 50px;
margin-right: 10px;
}
}
#media (min-width: 1290px) {
.desktop-menu {
margin-top: 70px;
margin-right: 10px;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" rel="stylesheet" />
<nav>
<div class="nav-row">
<div>
<a href="index.html">
<img src="http://placekitten.com/301/301" alt="Archer Civils & Construction Logo" class="logo" />
</a>
</div>
<div class="mobile-menu">
<div id="nav-links">
Civils
Fencing
Contact
</div>
<a href="javascript:void(0);" class="icon hamburger-icon" onclick="navHamburger()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="desktop-menu">
<ul class="main-nav">
<li>Civils</li>
<li>Fencing</li>
<li>Contact </li>
</ul>
</div>
</div>
</nav>
"display:flex" is the culprit here. Due to "display:flex" css property on the link, link is taking complete line. But it is not like that other navigation items has also turned into link but because link is taking the complete width and layered above the other navigation items it must be giving feel like other navigation items has also become a same link. You can refer the below screenshot:
Here is the code of it:
<!DOCTYPE html>
<html>
<head>
<style>
.logo-link {
display: flex;
cursor: pointer
}
.logo-link img {
max-height: 200px;
}
</style>
</head>
<body>
<nav>
<a class="logo-link" href=""><img
src="https://i.pinimg.com/736x/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></a>
<div>
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
</div>
</nav>
</body>
</html>
You can create your code like this to resolve this issue:
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 100%;
height: 100px;
background-color: bisque;
box-sizing: border-box;
display: flex;
align-items: center;
}
nav .align-left {
margin-left: 10px;
margin-right: auto;
height: 90%;
}
nav .align-right {
margin-left: auto;
margin-right: 10px;
height: 100%;
display: flex;
justify-content: space-between;
width: 11%;
height: 20%;
}
nav .logo-link>img {
height: 100%;
}
</style>
</head>
<body>
<nav>
<div class="align-left">
<a class="logo-link" href=""><img
src="https://i.pinimg.com/736x/5b/b4/8b/5bb48b07fa6e3840bb3afa2bc821b882.jpg"></a>
</div>
<div class="align-right">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</nav>
</body>
</html>
Just insert tour image tag inside the anchor tag like this:
Text
I have found a tutorial for a navigation menu with a logo to the left. But now I would like it to have the hamburger icon for mobile devices and I'm not sure how to do this. Unfortunately, I have been unable to find a tutorial online with my specific needs but have tried using a tutorial for a hamburger icon but had no luck and went back to the beginning.
<div class="container">
<div class="logo">
<img src="images/logo-large.png" alt="Nathan Ashbury Logo" class="image-1">
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Coding</li>
<li>Photography</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
```
.container {
clear: both;
overflow: auto;
}
nav {
background-color: rgba(18,7,88,1.00);
margin: 10px auto;
text-align: center;
width: 95%;
}
.logo img {
float: left;
width: 130px;
}
.image-2 {
display: none;
}
.image-3 {
display: none;
}
nav ul li {
display: inline-block;
padding: 10px;
font-size: 20px;
font-family: "Helvetica", sans-serif;
}
nav ul li a {
text-decoration: none;
color: #fff;
}
nav ul li a:hover {
text-transform: uppercase;
}
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<header>
<h1>Example: Creating a hamburger menu</h1>
<div class="top">
<i class="material-icons">dehaze</i>
</div>
</header>
<nav class="menu">
home
about
products
services
contact
</nav>
<main>
Site content.
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
CSS
* { margin: 0 auto; font-family: sans-serif; }
body { margin: 0 auto; }
header {
height: 70px;
background-color: #3e739d;
border-bottom: 1px solid #494949;
display: flex;
align-items: center;
justify-content: center;
}
header > h1 {
width: calc(100% - 160px);
text-align: center;
font-size: 20px;
color: white;
}
header > .top {
position: absolute;
left: 20px;
}
header > .top a.menu_icon i {
color: #000;
font-size: 40px;
padding-top: 5px;
transition: .2s ease;
}
header > .top a.menu_icon:hover i {
color: #fff;
}
nav.menu {
width: 300px;
min-height: calc(100vh - 121px);
background-color: #03a9f4;
position: absolute;
left: -300px;
transition: .3s all;
}
nav.menu > a {
display: block;
padding: 5px;
margin: 15px 0 0px 20px;
color: #494949;
text-transform: uppercase;
}
main {
width: 100%;
padding: 30px;
box-sizing: border-box;
}
footer {
height: 50px;
background-color: #494949;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
bottom: 0;
position: fixed;
width: 100%;
}
.menu_show {
left: 0!important;
}
#media screen and (max-width: 425px) {
header h1 {
font-size: 16px;
}
}
#media screen and (max-width: 360px) {
nav.menu {
width: 100%;
left: -100%;
}
}
To activate the menu, displaying or hiding the navigation list when it
is clicked, we use the jQuery library. Here is the click event of the
button that contains the class top and jQuery's "toggleClass"
function, adding or removing the " menu_show" class from the menu,
making it visible or invisible, as follows:
$(document).ready(function() {
$("body").on('click', '.top', function() {
$("nav.menu").toggleClass("menu_show");
});
});
I have a navigation bar which is OK, but just underneath that there is a 1px line that I cannot get rid of, it should be flush with the address underneath. This is the code that I have can anyone suggest anything?
There is also some of the html which was so hard formatting on here anyhow they want me to add more text. So it is the address underneath the naviation
address.space {
width: 100%;
background: #FF9900;
font-family: 'Monserrat', sans-serif;
text-align: center;
display: inline-block;
font-size: 1em;
margin-bottom: 20px;
}
/*menu*/
.nav {
background-color: #3333FF;
width: 100%;
height: 40px;
line-height: 40px;
}
.menu {
font-family: Monserrat, sans-serif;
font-size: 20px;
color: white;
list-style-type: none;
padding: 0;
position: relative;
z-index: 1;
}
.menu a {
text-decoration: none;
color: #fff;
line-height: 40px;
height: 40px;
display: block;
}
.menu ul li {
text-align: center;
display: inline-block;
padding: 0 20px 0 20px;
width: 13.5%;
height: 40px;
}
.menu li:visited,
.menu li:active,
.active,
.menu li:hover {
background: #0000EE;
color: #fff;
}
label {
margin: 0 14px 0 0;
font-size: 20px;
display: none;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
html,
body,
#main,
#firstside,
.firstsidewider,
#second,
.wide {
width: 100%;
font-size: 1em;
}
h1 span {
display: none;
}
label {
cursor: pointer;
display: block;
color: #fff;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu li a {
border-bottom: 1px solid #F4F4F4;
display: block;
background: #3333FF;
margin: -20px;
padding: 0;
}
.active,
.menu li:hover {
color: #fff;
background: 0;
}
#toggle:checked+.menu {
display: block;
}
<header id="banner">
<div class="nav">
<label for="toggle">☰</label><input id="toggle" type="checkbox">
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>Contacts
</li>
<li>Members
</li>
<li>Policies
</li>
<li>Links</li>
<li class="active">
Volunteer/li>
</ul>
</div>
</div>
<address class="space">
Meeting Address: YMCA -The Lecture Room 29 Rush Green
Road
4.00pm - 6.00pm</address>
<section id="leftheader">
<h1>Hubb <span>support group</span></h1>
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">Item 1</li>
<li id="item2">Item 2</li>
<li id="mitem3">Item 3</li>
<li id="item4">Item 4</li>
<li id="item5">Item 5</li>
<li id="item6">Item 6</li>
<li id="item7">Item 7</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>
I have completely redesigned new Navigation bar as per your images. Please have a look.
It is 100% responsive
working fine in large screen
in mobile view, I have disabled collapse of navigation bar so design will be same in smaller devices
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>Home
</li>
<li>Item2
</li>
<li>Item3
</li>
<li>Item4
</li>
<li>Item5
</li>
<li>Item6
</li>
<li>Item7
</li>
</ul>
</div>
</div>
</div>
I could solve the issue by adding following code
.menu-items li{
padding:16px 38px;
}
I think I fixed your issue. Try use this 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>
body {
margin-bottom: 60px;
}
html {
position: relative;
min-height: 100%;
}
body {
margin: 0;
padding: 0;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container-m-tp {
width: 100%;
background-color: orange;
}
.container-m-btn {
width: 100%;
background: none repeat scroll 0 0 rgb(75, 0, 130);
min-height: 62px;
}
.container-m-btn>img {
max-height: 40px;
width: 100%;
position: absolute;
z-index: 99999;
}
.m-tp {
max-width: 970px;
max-width: 1237px;
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
position: relative;
}
.m-btn {
max-width: 1900px;
width: 100%;
height: 100%;
margin: 0 auto;
text-align: center;
text-align: left;
position: relative;
padding-top: 35px;
text-align: center;
}
.m-btn li:hover {
background-color: orange;
}
.m-tp-center {
display: inline-block;
//
width: 50%;
width: 80%;
height: 100%;
}
.m-tp-right {
display: inline-block;
float: right;
height: 100%;
margin-right: 3%;
//
width: 200px;
//
padding-left: 20px;
}
.m-btn {
position: relative;
}
.m-btn a {
color: #fff;
}
.m-btn ul {
padding: 0;
list-style: none;
margin: 0;
}
.m-btn li {
display: inline;
padding: 25px 32px 9px;
border-left: 1px solid #fff;
}
.m-btn li:last-child {
border-right: 1px solid #fff;
}
.burger {
width: 25px;
height: 25px;
background-image: url(img/burger.png);
position: absolute;
top: 7px;
right: 7px;
display: none;
color: #FFF;
}
#media only screen and (max-width:720px) {
.burger {
display: block;
}
.container-m-btn {
min-height: 40px;
}
.m-btn ul {
display: none;
border-top: 1px #fff solid;
}
.m-btn li {
display: block;
border: none;
padding: 16px 32px;
border-bottom: 1px #fff solid;
}
.m-btn li:last-child {
border-bottom: none;
}
.container-m-btn>img {
display: none;
}
}
.m-btn .visible {
display: block;
}
.m-btn li:hover {
background-color: orange;
}
.m-btn li:active {
background-color: orange;
}
</style>
</head>
<body>
<header>
<div class="container-m-btn">
<img src="http://i.stack.imgur.com/GRNPb.png" />
<div class="m-btn">
<ul id="">
<li id="item1"><i class="fa fa-home f24"></i> Home</li>
<li id="item2">Item2</li>
<li id="item3">Item3</li>
<li id="item4">Item4</li>
<li id="item5">Item5</li>
<li id="item6">Item6</li>
<li id="item7">Item7</li>
<li id="item8">Item8</li>
</ul>
<div class="burger"></div>
</div>
</div>
</header>
<style>
.m-btn #item7 {
background-color: orange;
}
</style>
<div class="container">
<p>This is body</p>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/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() {
$('.m-btn ul').toggleClass("visible");
});
});
</script>
</html>
If I change the top horizontal image to a curvy one the height of white borders of menu items would be too short for that, I need them to be a bit taller. (no clue)
//unclear, are you looking for this ?
//added border-bottom to the #media li,
.menuitems li {
display: block;
border-left:0px;
border-bottom:1px solid #fff;
}
In burger style the width of the last item is a bit short. (No idea why)
// add padding:0 to UL to remove empty space in first tab
.menuitems ul {
list-style: none;
margin: 0;
padding:0;
}
I need to make all menu items a bit wider. (Changing width did not work)
.menuitems li {
display: inline-block;
padding: 10px 15px 10px 35px;
border-left: 1px solid #fff;
width:80px;
}
Update these lines into your styles
.m-btn ul {
list-style: none;
margin: 0;
padding: 0;
}
It worked for me.....
EDIT
Or try this one
#media only screen and (max-width: 480px) {
.m-btn ul {
padding: 0;
}
}