This question already has answers here:
Using z-index to get div above another div
(4 answers)
Closed 6 years ago.
I designed a mobile menu and I have applied a z-index to the drop down mobile menu, but other elements still show over it. I have tried putting the z-index in these two elements:
.nav_list {}
.nav_list > a {}
Please note you have to be under 640px to see the button. Then when you press it, you will see the word "Hello" appear over the menu.
What am I doing wrong?
$('span.nav-btn').click(function () {
$('ul.nav_list').slideToggle(500);
})
$(window).resize(function (){
if ( $(window).width() > 640 ) {
$('ul.nav_list').removeAttr('style');
}
});
body {
padding: 0;
margin: 0;
max-width: 100%;
background: green;
}
.header {
margin: 0;
background-color: #333;
height: 80px;
}
.header_wrap {
/*margin: 0 15%;*/
width: 960px;
text-align: center;
}
.nav-btn {
display: none;
}
.nav_list {
text-decoration: none;
background-color: #333;
color: #FFF;
margin: 0;
list-style: none;
width: 100%;
}
.nav_list > a {
display: inline-block;
padding: 25px 12px;
text-decoration: none;
}
.nav_list > a > li {
text-decoration: none;
font-size: 1em;
color: #FFF;
}
#media screen and (max-width:640px) {
body {
background: blue;
}
.header_wrap {
margin: 0%;
width: 100%;
}
.nav_list {
padding: 0;
text-align: center;
display: none;
margin-top: 60px;
width: 100%;
}
.nav_list > a {
display: block;
border-bottom: 1px solid #FFF;
width: auto;
}
.nav-btn {
display: block;
background-color: #333;
color: #FFF;
font-size: 1.5em;
/*text-align: right;*/
cursor: pointer;
padding-top: 20px;
}
.nav-btn:before {
background-image: url('http://optimumwebdesigns.com/icons/mobile_menu_white.png');
background-size: 28px 28px;
background-repeat: no-repeat;
width: 28px;
height: 28px;
content:"";
display: block;
float: right;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
<div class="header_wrap">
<span class="nav-btn"></span>
<ul class="nav_list">
<li>Home</li>
<li>Spray Foam Insulation</li>
<li>Portable Spray Foam Kits</li>
<li>Polyurea</li>
<li>Personal Protective Equipment</li>
<li>Financing</li>
<li>Contact us</li>
</ul>
</div>
</header>
<p>
Hello
</p>
You need to add the position property to your elements for z index to work
so for instance adding position: relative; to .nav-list then adding your z-index should show the element above the others.
Add a position:absolute; or position:relative; to .nav_list {}. Otherwise, z-index won't work.
Related
Layout of what I'mm trying to achieve
I've done the top half of the nav bar and I'm trying to do the second part where the boxes (represent words), which I have circled in the image. I'm trying to directly make that section below the logo sign centered like the image shows but I am unsure on how to do that.
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
/* align-items: center; */
justify-content: center;
}
header {
background: #ffe9e3;
height: 100px;
}
.logo {
text-align: center;
margin: 0;
display: block;
}
.business {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
.menu {}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav class=m enu>
<ul>
<li>Hair</li>
<li>Nails</li>
<li>Makeup</li>
<li>Face</li>
</ul>
</nav>
<nav class=b usiness>
<ul>
<li>List Your Business</li>
</ul>
</nav>
<<div class="menu">
<nav>
</nav>
</div>
</div>
</header>
I have done the way you wanted it to look
CSS Part :
* {
padding: 0;
margin: 0;
}
body {
background: #333333;
min-width: 100vw;
min-height: 100vh;
}
.header {
height: 150px;
background: pink;
}
.logo {
padding: 10px;
text-align: center;
}
.nav > ul {
display: flex;
justify-content: space-evenly;
padding: 10px;
margin-top: 20px;
}
.nav > ul > li {
width: 100px;
list-style: none;
border: 2px solid #000;
border-radius: 20px;
}
.nav > ul > li > a {
text-decoration: none;
color: #fff;
font-size: 1.3rem;
padding: 3px 5px;
display: flex;
justify-content: center;
}
check the whole code here: https://codepen.io/the-wrong-guy/pen/GRoyKMa?editors=1100
And you have made a lot of syntax errors like not giving double quotes to the class names
I'm coding a menu in french but I need to move all the buttons (Home, About us...) to the right.
I tried with float: right; but it doesn't work.
Here is my Result :
My Result
The <a> Home, Informations, etc.. are in a div. It's this div that i want to push right !
My Objective :
My Objective
My Code:
/*
==============================
NAVBAR
==============================
*/
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #9ebd11/*55d6aa*/
;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
/*padding: 10px 0;*/
}
nav {
float: right;
}
nav #navbar-ul {
margin: 0;
padding: 0;
list-style: none;
}
nav .navbar-li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav .navbar-button {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav .navbar-button:hover {
color: #000;
}
nav .navbar-button::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav .navbar-button:hover::before {
width: 100%;
}
nav #register-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #register-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav #login-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #login-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul {
list-style-type: none;
}
nav,
.container {
display: flex;
}
.connection {
line-height: 2;
}
<header>
<div class="container">
<h1 class="logo">
<img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image">
</h1>
<nav>
<ul id="navbar-ul">
<li class="navbar-li">Home</li>
<li class="navbar-li">Informations</li>
<li class="navbar-li">About us</li>
</ul>
<ul class="connection">
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</nav>
</div>
</header>
Thanks
Float won't work because your container is a flex-container.
Just use:justify-content:space-between`
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #9ebd11/*55d6aa*/
;
}
nav #navbar-ul {
margin: 0;
padding: 0;
list-style: none;
}
nav .navbar-li {
display: inline-block;
padding-top: 23px;
position: relative;
}
nav .navbar-button {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav .navbar-button:hover {
color: #000;
}
nav .navbar-button::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav .navbar-button:hover::before {
width: 100%;
}
nav #register-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #register-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav #login-li {
position: relative;
}
nav #login-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul {
list-style-type: none;
}
nav,
.container {
display: flex;
justify-content: space-between;
}
.connection {
line-height: 2;
}
<header>
<div class="container">
<h1 class="logo">
<img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image">
</h1>
<nav>
<ul id="navbar-ul">
<li class="navbar-li">Home</li>
<li class="navbar-li">Informations</li>
<li class="navbar-li">About us</li>
</ul>
<ul class="connection">
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</nav>
</div>
</header>
Bootstrap's "Container" class has a max-width of something like 1800px(not certain of exact px count).
Try using "container-fluid". This should allow the nav items to move to the far right but will probably move your logo to the far left because of your .logo float-left css.
You can give the logo a margin-left that works for you.
Edit: I just noticed you've defined your own .container class in the css. And margin set to 0 auto. This is going to center your content within the container class and give you max width of 80% so your content won't reach the far right side of the browser unless you set this items to "position:absolute" and then give them the necessary margins.
Try changing your nav class from:
nav{
floaf: right;
}
to:
nav{
position: absolute;
right: 20px;
top: 0px;
}
This should force your nav element to position it's right 20px left of the parent elements right. Tested in chrome.
remove the float: right from your .nav and add float:left from .logo
Now add display:flex to your .logo and for your container add:
.container{
justify-content: space-between;
}
I have not tested this. Let me know if this is what you wanted.
I was attempting to build a responsive nav using flexbox. When the screen is smaller than 744px, I wanted a toggle button to appear, the main nav to have a max-height of 0, and then on click, have the nav display in block. Fairly typical stuff.
However, I'm used to doing this just with floats and I'm running into several problems:
I don't understand how to drop the UL below the nav without pushing the nav logo and toggle up;
The UL with the LI doesn't seem to be responding to the max-height trick.
If anyone can provide some assistance or point me in the direction of tutorial that would be great.
* {
margin: 0;
padding: 0;
}
body {
font-family: 'open-sans', 'sans-serif';
font-size: 17px;
color: #444;
}
.navText {
font-size: 14px;
}
nav {
height: 100%;
width: 100%;
background-color: white;
}
.nav-fixedWidth {
//border: 1px solid;
min-height: 120px;
width: 960px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.mainNav {
list-style: none;
display: flex;
}
.mainNav li {
margin-right: 60px;
padding: 10px;
//border: 1px solid;
}
.mainNav li:nth-child(5){
margin-right: 10px;
}
.mainNav li a {
text-decoration: none;
color: #444;
display: block;
}
.mainNav li a:hover {
color: #9d9d9d;
}
.logo {
height: 60px;
width: 60px;
background-color: #ccc;
}
.toggle {
height: 60px;
width: 60px;
background-color: #ccc;
display: none;
}
#media screen and (max-width: 960px) {
.nav-fixedWidth
{
width: 95vw;
}
}
#media screen and (max-width: 744px) {
.nav-fixedWidth
{
flex-wrap:wrap;
}
.toggle
{
display: block;
}
}
<nav>
<div class="nav-fixedWidth">
<div class="logo"></div>
<div class="toggle"></div>
<ul class="mainNav">
<li class="navText">Webinars</li>
<li class="navText">e-Books</li>
<li class="navText">Blog</li>
<li class="navText">e-Course</li>
<li class="navText">Search</li>
</ul>
</div>
</nav>
I know this might be a bit late for your particular need, but you might want to take a look at this solution by Chris Coiyer
https://codepen.io/chriscoyier/pen/GJRXYE
html {
background: #666;
}
body {
width: 60%;
margin: 0 auto;
background: white;
}
.nav {
position: relative;
ul {
display: flex;
height: 3rem;
overflow: hidden;
flex-wrap: wrap;
list-style: none;
padding: 0;
width: 80%;
}
li {
a {
display: block;
padding: 1rem 0.5rem;
text-decoration: none;
white-space: nowrap;
}
}
&.open {
ul {
height: auto;
display: block;
}
}
}
.x {
position: absolute;
top: 0.75rem;
right: 0.75rem;
cursor: pointer;
}
This solution does require a small amount of JavaScript to toggle the menu.
Hope it helps :-)
How am I able to center the photo with the text, without minimizing the photo itself?
I've tried; max-height: xx, but that wasn't it.
The photo is centered in height, but not the text. How's this possible?
http://jsfiddle.net/gLpqoamn/
.hoyre{
background-color:#f19f00;
}
.hoyre:hover{
background-color:#d98500;
}
header{
background-color: white;
}
.logo{
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body{
margin:0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container{
max-width:1300px;
margin-left:auto;
margin-right:auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li><img src="http://i.imgur.com/QAEzQxp.png" class="logo"></li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre" style="float:right;">Donate</li>
</ul>
</div>
</header>
</body>
I would use flex on the ul, then you can use align-items to vertically center or position the children. A margin-left: auto on the last link will push it to the right, then you can move the background color to the link to keep it from stretching the height of the parent
.hoyre {
margin-left: auto;
background-color: #f19f00;
min-height: 100%;
align-self: stretch;
display: flex;
align-items: center;
}
.hoyre:hover {
background-color: #d98500;
}
header {
background-color: white;
}
.logo {
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
display: flex;
align-items: center;
}
li {}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li>
<img src="http://i.imgur.com/QAEzQxp.png" class="logo">
</li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre">Donate</li>
</ul>
</div>
</header>
</body>
For using height:100% in your css you should define parent element height first. then you change li element to behave like table and fill 100% height.
Update your styles like this(new styles have comment in front of them):
li {
float: left;
height: 100%; /*fill height */
display: table; /* behave as table*/
}
li a {
display: table-cell; /* behave as table-cell then you can use vertical alignment*/
vertical-align: middle;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
height: 100% ; /*fill height */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
height: 80px; /*define height for using height:100% for child elements */
}
I am not sure why, but whenever I scale the following to a viewport of under 640px, the width exceeds past 100%. I have the set the bodies width to 100% and even tried max-width: 100%.
Does anyone see what is causing this to happen?
$('span.nav-btn').click(function () {
$('ul.nav_list').slideToggle(500);
})
$(window).resize(function (){
if ( $(window).width() > 640 ) {
$('ul.nav_list').removeAttr('style');
}
});
body {
padding: 0;
margin: 0;
max-width: 100%;
background: green;
}
.header {
margin: 0;
background-color: #333;
height: 80px;
}
.header_wrap {
/*margin: 0 15%;*/
width: 960px;
text-align: center;
}
.nav-btn {
display: none;
}
.nav_list {
text-decoration: none;
background-color: #333;
color: #FFF;
margin: 0;
list-style: none;
width: 100%;
}
.nav_list > a {
display: inline-block;
padding: 25px 12px;
text-decoration: none;
}
.nav_list > a > li {
text-decoration: none;
font-size: 1em;
color: #FFF;
}
#media screen and (max-width:640px) {
body {
background: blue;
}
.header_wrap {
margin: 0%;
}
.nav_list {
padding: 0;
text-align: center;
display: none;
margin-top: 60px;
width: 100%;
}
.nav_list > a {
display: block;
border-bottom: 1px solid #FFF;
width: auto;
}
.nav-btn {
display: block;
background-color: #333;
color: #FFF;
font-size: 1.5em;
text-align: right;
cursor: pointer;
padding-top: 20px;
}
.nav-btn:before {
background-image: url('http://optimumwebdesigns.com/icons/mobile_menu_white.png');
background-size: 28px 28px;
background-repeat: no-repeat;
width: 28px;
height: 28px;
content:"";
display: block;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
<div class="header_wrap">
<span class="nav-btn"></span>
<ul class="nav_list">
<li>Home</li>
<li>Spray Foam Insulation</li>
<li>Portable Spray Foam Kits</li>
<li>Polyurea</li>
<li>Personal Protective Equipment</li>
<li>Financing</li>
<li>Contact us</li>
</ul>