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;
}
}
Related
I am trying to create a navbar but the animation are not working, As you can see, I have put position: fixed; and right: -100%; to the .nav-links so that it can hide and not create white space at the right and #nav-btn:checked~.nav-links { right: 0; width: 100% !important; }
And when I click at the checkbox it does not show the animation and appear without any animation and that's my problem.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn,
label {
display: none;
}
#media(min-width: 600px) {
label {}
.nav-links a {
color: white;
}
.nav-links {
float: right;
justify-content: space-between;
}
.nav-links a:hover {
background-color: white;
color: black;
padding-top: 2.5px;
padding-bottom: 2.5px;
border-radius: 5px;
padding-right: 2.5px;
padding-left: 2.5px;
}
.title,
.nav-links {
display: inline;
}
}
#media(max-width: 599px) {
.nav-links {
background-color: black;
}
label {
display: inline;
float: right;
padding-right: 20px;
}
.extra {
display: none;
}
.nav-links {
text-align: center;
display: block;
}
.nav-links a {
display: block;
transition: .9s;
}
nav {
padding-right: 0px;
}
.nav-links a:hover,
.active {
background: #ff000a;
color: white;
}
a {
text-decoration: none;
color: white;
}
.nav-links {
position: fixed;
right: -100%;
}
#nav-btn:checked~.nav-links {
right: 0;
width: 100% !important;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
If I understand correctly, you need to put the transition on the nav links container, not the links. That's where the open/close happens.
I've also moved your width rule to the container for all states, not just when it's shown. That fixes the close transition.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
nav {
background: black;
width: 100% !important;
color: white;
height: 76px;
line-height: 76px;
padding-right: 10px;
font-size: 20pt !important;
}
.nav-links a {
font-size: 20px;
text-decoration: none;
}
#nav-btn,
label {
display: none;
}
#media(max-width: 9599px) {
.nav-links {
background-color: black;
transition: .9s;
text-align: center;
display: block;
width: 100%;
}
label {
display: inline;
float: right;
padding-right: 20px;
}
.extra {
display: none;
}
.nav-links a {
display: block;
}
nav {
padding-right: 0px;
}
.nav-links a:hover,
.active {
background: #ff000a;
color: white;
}
a {
text-decoration: none;
color: white;
}
.nav-links {
position: fixed;
right: -100%;
}
#nav-btn:checked~.nav-links {
right: 0;
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://kit.fontawesome.com/e8f9edfb9f.js" crossorigin="anonymous"></script>
</head>
<body>
<nav>
⠀<span class="title">Nav</span>
<label for="nav-btn"><i class="fas fa-bars"></i></label>
<input type="checkbox" name="" id="nav-btn">
<div class="nav-links">
Home
About
Contact Us
Feedback
</div>
</nav>
</body>
some device like iMac it look perfect but some i see white box in other pc.in tablet and mobile screen gets auto zoom its not fit to device i have to zoom out which makes content small.
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f7f7f7;
color: #545454;
}
/* NAVIGATION */
.navbar {
width: 100%;
height: 150px;
background: black;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
}
.navbar .inner_navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.navbar .hamburger {
display: none;
}
.navbar .menu ul {
display: flex;
}
.navbar .menu ul li a {
display: block;
width: 120px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px;
border-radius: 25px;
letter-spacing: 2px;
transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a {
margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active {
background: #5db485;
}
.container {
margin-top: 150px;
width: 1906px;
height: 397px;
}
.promo {
width: 1906px;
}
/* Safari Tours*/
.safari-tours {
background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
;
width: 1906px;
}
.safari-title {
text-align: center;
padding-top: 30px;
font-size: 50px;
}
.banner {
display: flex;
justify-content: center;
}
.safari {
margin: 2%;
}
.safari img {
width: 500px;
}
/*Tablet*/
#media (max-width: 992px) {
.navbar {
height: 218px;
padding: 12px;
}
.navbar .inner_navbar {
flex-direction: column;
}
.container {
margin-top: 218px;
}
}
/*Mobile*/
#media (max-width: 728px) {
.navbar {
height: 150px;
}
.navbar .inner_navbar {
flex-direction: row;
}
.navbar .menu ul {
position: absolute;
top: 150px;
left: 0;
display: block;
background: orangered;
width: 100%;
}
.navbar .menu ul li {
padding: 10px;
}
.navbar .menu ul li a {
width: 100%;
padding: 12px;
}
.navbar .hamburger {
display: block;
position: absolute;
top: 15px;
right: 25px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.navbar .menu {
display: none;
}
.navbar .menu.activate {
display: block;
}
.container {
margin-top: 150px;
width: 690px;
height: 144px;
}
.promo {
width: 690px;
}
.safari-tours {
background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
width: 690px;
}
.safari {
margin: 1%;
}
.safari img {
width: 300px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="wrapper">
<div class="navbar">
<div class="inner_navbar">
<div class="logo">
<img src="/images/Final Logo.png" style="width: 150px;">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Desert Safari</li>
<li>Tours</li>
<li>Activities</li>
<li>Contact-Us</li>
</ul>
</div>
</div>
<div class="hamburger">
<img src="/images/menu-btn.png" style="width: 40px;">
</div>
</div>
<div class="container">
<img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
</div>
</div>
</header>
<section>
<div class="safari-tours">
<h1 class="safari-title">SAFARI TOURS</h1>
<div class="banner">
<div class="safari">
<img src="https://i.imgur.com/9QH8NFE.jpeg" alt="Morning Safari" />
</a>
</div>
<div class="safari">
<a href="https://bigdunestours.com/desert-safari" target="_top">
<img src="https://i.imgur.com/2E9ytwc.jpeg" alt="Evening Safari" />
</a>
</div>
</div>
</div>
</section>
<script>
var hamburger = document.querySelector(".hamburger");
var menu = document.querySelector(".menu");
hamburger.addEventListener("click", function() {
menu.classList.toggle("activate");
})
</script>
</body>
</html>
some device like iMac it look perfect but some i see white box in other pc.in tablet and mobile screen gets auto zoom its not fit to device i have to zoom out which makes content small.
edited i did try as one of the comment mention but still no luckk the results are something like this
*{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #f7f7f7;
color: #545454;
}
/* NAVIGATION */
.navbar{
width: 100%;
height: 150px;
background: black;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
}
.navbar .inner_navbar{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.navbar .hamburger{
display: none;
}
.navbar .menu ul{
display: flex;
}
.navbar .menu ul li a{
display: block;
width: 120px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px;
border-radius: 25px;
letter-spacing: 2px;
transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a{
margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active{
background: #5db485;
}
.container{
width: 100%;
max-width: 1906;
}
/*Tablet*/
#media (max-width: 992px){
.navbar{
height: 218px;
padding: 12px;
}
.navbar .inner_navbar{
flex-direction: column;
}
.container {
max-width: 991.98px;
}
}
/*Mobile*/
#media (max-width: 728px){
.navbar{
height: 150px;
}
.navbar .inner_navbar{
flex-direction: row;
}
.navbar .menu ul{
position: absolute;
top: 150px;
left: 0;
display: block;
background: orangered;
width: 100%;
}
.navbar .menu ul li{
padding: 10px;
}
.navbar .menu ul li a{
width: 100%;
padding: 12px;
}
.navbar .hamburger{
display: block;
position: absolute;
top: 15px;
right: 25px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.navbar .menu{
display: none;
}
.navbar .menu.activate{
display: block;
}
.container{
max-width: 727.98px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
<div class="inner_navbar">
<div class="logo">
<img src="/images/Final Logo.png" style="width: 150px;">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Desert Safari</li>
<li>Tours</li>
<li>Activities</li>
<li>Contact-Us</li>
</ul>
</div>
</div>
<div class="hamburger">
<img src="/images/menu-btn.png" style="width: 40px;">
</div>
<div class="container">
<img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
</div>
</div>
</div>
<script>
var hamburger = document.querySelector(".hamburger");
var menu = document.querySelector(".menu");
hamburger.addEventListener("click", function(){
menu.classList.toggle("activate");
})
</script>
</body>
</html>
Use 100% width and set a max-width for each #media.
Important: use % in your main layout, not absolute pixels.
By using this the content will not overflow the .container
.container {
width: 100%;
max-width: 1906px;
}
#media (max-width: 992px) {
.container {
/* width 100% is set aboven*/
max-width: 991.98px;
}
}
#media (max-width: 728px) {
.container {
/* width 100% is set aboven*/
max-width: 727.98px;
}
}
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>
My mobile css hamburger menu isn't working, if I click on it it doesn't stay open, and I have no clue on how to open the dropdown menu inside the hamburger menu. Also my nav title (.logo) is hard to center, does anyone have a solution for that?
JSFidlle for easy viewability (Mobile css & Style.css in are merged here only the background is missing)
Thanks for any help, and sorry if my code looks messy :/
My Code:
Index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, I'm Sten</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/mobile.css">
<link rel="stylesheet" href="css/animate.css">
</head>
<body>
<div class="nav animated slideInDown">
<img src="img/hamburger.png" alt="" class="hamburger">
<div class="logo">
<h1>STEN</h1>
</div>
<ul>
<li>
PAGE
<ul>
<li>DROPDOWN</li>
<li>DROPDOWN</li>
</ul>
</li>
<li>PAGE</li>
<li>PAGE</li>
<li>PAGE</li>
</ul>
</div>
<div class="landing animated fadeIn">
<div class="container">
<h1>STEN</h1>
<hr>
<p>I'M A</p>
<h2>-OCCUPATION-</h1>
<button>KNOP</button>
<button>KNOP</button>
</div>
<div class="scroll" onClick="">
</div>
</div>
<div class="about">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script scr="main.js"></script>
</body>
</html>
Style.css (Master css file)
* {
padding: 0;
margin: 0;
border: 0;
}
html, body {
height: 100%;
width: 100%;
font-family: 'Open Sans', sans-serif;
}
h1 {
font-weight: 300;
font-size: 50px;
}
.nav {
width: 100%;
height: 10%;
background-color: #F2F2F2;
border-bottom: 1px solid #E4E4E4;
text-align: center;
position: fixed;
z-index: 999;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav .hamburger {
display: none;
}
.nav .logo {
float: left;
margin-left: 10%;
}
.nav .logo h1 {
color: #000;
line-height: 10vh;
font-size: 32px;
}
.nav > ul {
height: 100%;
width: auto !important;
display: inline-block;
float: right;
margin-right: 10%;
}
.nav > ul > li {
display: inline-block;
list-style: none;
padding: 0 20px 0 20px;
vertical-align: top;
position: relative;
}
.nav > ul > li:first-child > a:after {
width: 6px;
height: 6px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
position: absolute;
margin-top: calc(5vh - 5px);
margin-left: 8px;
content: "";
transform: rotate(45deg);
}
.nav > ul > li > ul {
display: none;
margin-left: -50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.nav > ul > li > ul > li {
list-style: none;
background-color: #F2F2F2;
padding: 0 20px 0 20px;
position: relative;
}
.nav li:hover > ul {
display: block;
position: absolute;
}
.nav ul a {
color: #000;
text-decoration: none;
line-height: 10vh;
}
.nav a:hover {
color: #999;
}
.landing {
padding-top: 10vh;
height: 90%;
width: 100%;
background: url('../img/bg.jpg');
background-size: cover;
background-position: center;
position: fixed;
text-align: center;
color: #FFF;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
z-index: 0;
}
.landing:before {
content: " ";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
}
.landing .container {
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 100%;
}
.landing .container h1 {
letter-spacing: 6px;
font-size: 78px;
}
.landing .container p {
font-size: 20px;
font-weight: 100;
}
.landing hr {
width: 300px;
margin: 25px 0 25px 0;
margin-left: calc(50% - 150px);
border-bottom: 3px solid #EF2D56;
}
.landing button {
width: 200px;
padding: 24px;
margin-top: 20px;
position: relative;
color: #FFF;
background-color: transparent;
border: 1px solid #FFF;
}
.landing button:first-child {
margin-right: 1%;
}
.landing button:last-child {
margin-left: 1%;
background-color: #EF2D56;
border: 1px solid #EF2D56;
}
.landing button:hover {
cursor: pointer;
}
.landing button:focus {
outline: none;
}
.scroll {
width: 16px;
height: 16px;
border-bottom: 1px solid #FFF;
border-right: 1px solid #FFF;
position: absolute;
content: " ";
transform: rotate(45deg);
bottom: 0;
margin-bottom: 30px;
margin-left: calc(50% - 8px);
cursor: pointer;
}
.about {
height: 200%;
width: 100%;
background-color: #FFF;;
z-index: 50;
position: absolute;
margin-top: 100vh;
}
Mobile css file
#media only screen and (max-device-width: 850px){
.nav .hamburger {
height: 6vh;
width: 6vh;
display: inline-block;
float: left;
margin: 2vh 0 0 2vh;
}
.nav .logo {
position: relative;
}
.nav > ul {
display: none;
float: none;
margin-top: 10vh;
}
.nav .hamburger:hover ~ ul {
display: block;
width: 100%;
margin: 0;
}
.nav > ul > li {
display: block;
background-color: #F2F2F2;
}
.about {
margin-top: 100vh;
}
}
Change the way you wrote media query, Try this way:
#media only screen and (max-width: 850px) {
//Your mobile CSS code
}
See the fiddle: https://jsfiddle.net/7xjyutuf/1/
chnage your media query into this #media only screen and (max-width:850px){}.
If you are using the max-device-width, when you change the size of the browser window on your desktop, the CSS style won't change to different media query setting;
If you are using the max-width, when you change the size of the browser on your desktop, the CSS will change to different media query setting and you might be shown with the styling for mobiles, such as touch-friendly menus.
for more info you can visit this http://www.menucool.com/3613/max-device-width-vs-max-width-Which-one-should-I-use
check this fiddle https://jsfiddle.net/ok7hmodo/1/
For making the menu static use Jquery.Please check this https://jsfiddle.net/7xjyutuf/10/.
This is a css only solution.You have to make the ul display block when user hovers on it
https://jsfiddle.net/tucsgohy/1/
I want to create a horizontal sub menu when hover on main menu like this
But this is what I have made
How do I resolve this problem?
create this
but i want this enter image description here
/**********************************************************************/
body {
margin: 0;
padding: 0;
}
#iri-header {
font-family: 'Iranian Sans';
font-size: 15px;
line-height: 1.142;
display: block;
border: 0;
width: 1349px;
height: 40.5px;
border-bottom: 1px solid gray;
}
#orb-header {
position: relative;
}
.iri-header-container {
width: 1008px;
height: 39.5px;
margin: 0 auto;
border: 0;
padding: 0 16px;
}
.logo {
width: 96px;
height: 39.5px;
border-left: 1px solid black;
float: right;
}
.logo img {
float: right;
padding-top: 8px;
}
.loging {
width: 197.5px;
height: 39.5px;
float: right;
cursor: pointer;
border-left: 1px solid black;
}
.loging:hover {
border-bottom: 2px solid black;
}
#vorod {
float: right;
padding: 12px;
}
.loging img {
width: 30px;
height: 30px;
margin-top: 6px;
margin-left: 8px;
}
.search {
width: 300px;
height: 39.5px;
border-right: 1px solid black;
}
.Search {
width: 45px;
height: 39.5px;
float: right;
margin-right: 10px;
}
.Search img {
width: 100%;
height: 100%;
}
.brand {
width: 1349px;
height: 95px;
background-color: #BB1919;
display: block;
border: 0;
position: relative;
}
.site-brand {
width: 976px;
height: 59px;
margin: 0 auto;
}
.brand .site-brand a > span {
float: right;
font-family: A Ketab;
font-size: 35px;
margin-top: 6px;
color: #ffffff;
text-decoration: none;
}
.menu {
width: 1349px;
height: 36px;
}
.menu-container {
width: 1349px;
height: 35px;
background-color: #A91717;
}
.menu-ul {
margin: 0 auto;
height: 35px;
}
#main_menu {
list-style: none;
float: right;
margin-right: 93px;
font-size: 16px;
}
#main_menu li {
display: inline-block;
vertical-align: bottom;
}
#main_menu li a {
display: block;
padding: 10px; /* For example */
position: relative;
}
li a {
display: inline-block; /* To enable padding */
padding: 10px; /* For example */
}
li:not(:hover) .submenu {
display: none;
}
li:hover .submenu {
position: absolute;
right: 0; /* If you want to stick it to the left edge, remove this line. */
white-space: nowrap;
}
#main_menu li:hover {
background-color: #eb4b4b;
}
#main_menu li ul {
list-style: none;
background-color: #820e0e;
position: absolute;
width: 100%;
float: right;
display: none;
direction: rtl;
margin-right: 60px;
}
#main_menu li:hover ul {
display: block;
}
#main_menu li ul li {
float: left;
direction: rtl;
border-bottom: 1px solid #BB4545;
display: block;
}
#main_menu li ul li a {
float: none;
display: block;
}
li {
display: inline-block;
position: relative;
vertical-align: bottom;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>سایت IRI</title>
<link href="~/Content/StyleSheet.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-rtl.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap-theme-rtl.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.1.0.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</head>
<div>
<header id="iri-header">
<div id="orb-header">
<div class="iri-header-container">
<div class="logo">
<a href="#">
<img src="~/Content/img/Logo.png" />
</a>
</div>
<div class="loging">
<a href="/Home/Register">
<div class="loging-container">
<span id="vorod">ورود/ثبت نام</span>
<img src="~/Content/img/pic1.png" />
</div>
</a>
</div>
<div class="search">
#Html.Partial("P_Search")
</div>
</div>
</div>
</header>
<div class="brand">
<div class="site-brand">
<a href="/Home/Index">
<span>اخبار ایران و جهان</span>
</a>
</div>
<div class="menu">
<div class="menu-container">
<div class="menu-ul">
<ul id="main_menu">
<li>1صفحه اصلی</li>
<li>صفحه اصلی2</li>
<li>3صفحه اصلی</li>
<li>4صفحه اصلی</li>
<li>
صفحه اصلی5
<ul class="sub-menu">
<li>صفحه اصلی</li>
<li>صفحه اصلی</li>
<li>صفحه اصلی</li>
<li>صفحه اصلی</li>
</ul>
</li>
<li>صفحه اصلی6</li>
<li>7صفحه اصلی</li>
<li>
8صفحه اصلی
<ul class="sub-menu">
<li>صفحه اصلی</li>
<li>صفحه اصلی</li>
<li>صفحه اصلی</li>
<li>صفحه اصلی</li>
</ul>
</li>
<li>صفحه اصلی9</li>
<li>10صفحه اصلی</li>
<li>صفحه اصلی11</li>
</ul>
</div>
</div>
</div>
</div>
</div>
You mean something like this?
http://codepen.io/bra1N/pen/yJwZWo
This code is important:
#main_menu li {
float: right;
border-left: 1px solid #BB4545;
position: static;
}
#main_menu li ul {
list-style: none;
background-color: #820e0e;
position: absolute;
width: 100%;
top: 110px;
float: left;
display: none;
direction: rtl;
}
This code should make .submenu appear only if a is hovered.
/* Reset */
ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Important part */
li {
display: inline-block;
position: relative;
vertical-align: bottom;
}
li a {
display: inline-block; /* To enable padding */
padding: 10px; /* For example */
}
li:not(:hover) .submenu {
display: none;
}
li:hover .submenu {
position: absolute;
right: 0; /* If you want to stick it to the left edge, remove this line. */
white-space: nowrap;
}
DEMO:
http://codepen.io/anon/pen/dXArNx