When hoovering the menu element a drop down box shall appear. It does but it is cut. Not sure what is wrong here if the Ul nav list cuts it. The drop down menu has been tested ok but not with this menu. I also tried to change the z-index, but without any result. Can you see anything that can inhibit the drop down menu to show?
var navList = document.getElementById("nav-lists");
function Show() {
navList.classList.add("_Menus-show");
}
function Hide() {
navList.classList.remove("_Menus-show");
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.container {
height: 80px;
background-color: #333333;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
overflow: hidden;
}
.container .logo {
max-width: 250px;
padding: 0 10px;
overflow: hidden;
}
.container .logo a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 60px;
}
.container .logo a img {
max-width: 100%;
max-height: 60px;
}
.container .navbar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 10px;
}
.container .navbar ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.container .navbar ul li a {
text-decoration: none;
color: #999999;
font-size: 20px;
text-transform: uppercase;
display: block;
height: 60px;
line-height: 60px;
cursor: pointer;
padding: 0 10px;
}
.container .navbar ul li a:hover {
color: #ffffff;
background-color: rgba(23, 23, 23, 0.9);
}
.container .navbar ul .close {
display: none;
text-align: right;
padding: 10px;
}
.container .navbar ul .close span {
font-size: 40px;
display: inline-block;
border: 1px solid #cccccc;
padding: 0 10px;
cursor: pointer;
}
.container .navbar .icon-bar {
padding: 18px 8px;
width: 50px;
height: 60px;
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
}
.container .navbar .icon-bar i {
background-color: #ffffff;
height: 2px;
}
#media only screen and (max-width: 650px) {
.container {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.container .logo {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.container .navbar {
-webkit-box-flex: 0;
-ms-flex: 0;
flex: 0;
}
.container .navbar ul {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
position: fixed;
left: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: #ffffff;
width: 100%;
height: 100%;
overflow: auto;
-webkit-transition: left .3s;
-o-transition: left .3s;
transition: left .3s;
}
.container .navbar ul li a {
padding: 10px;
font-size: 20px;
height: auto;
line-height: normal;
color: #555555;
}
.container .navbar ul .close {
display: block;
}
.container .navbar .icon-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.container .navbar ._Menus-show {
left: 0;
}
}
.body {
max-width: 700px;
margin: 0 auto;
padding: 10px;
}
/* start of drop down */
/* dropdown css starts here */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0009f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
width: 400px;
height: 160px;
font-family: Arial;
}
.desc_Info {
padding: 15px;
width: 400px;
height: 220px;
font-family: Arial;
}
span {
cursor: pointer;
}
/* hand over menu item */
/* END drop down menu */
<html>
<head>
<title>Nav bar</title>
</head>
<body>
<div class="container">
<div class="logo">
<img src="./bilder/logo2.jpg" alt="Start">
</div>
<div class="navbar">
<div class="icon-bar" onclick="Show()">
<i></i>
<i></i>
<i></i>
</div>
<ul id="nav-lists">
<li class="close"><span onclick="Hide()">×</span></li>
<li class="elements">
<div class="dropdown">
Cars
<div class="dropdown-content">
<div class="desc">assadsadsad<br /><br /> asdasdsadasdsadsad
<br /><br /> adsasdsasaasdasdasdsdasad
</div>
</div>
</div>
</li>
<li>Bikes</li>
</ul>
</div>
</div>
<div class="body">
<p>Hello yes !</p>
</div>
</body>
</html>
Remove the overflow: hidden; from the .container. This cuts off the dropdown.
var navList = document.getElementById("nav-lists");
function Show() {
navList.classList.add("_Menus-show");
}
function Hide() {
navList.classList.remove("_Menus-show");
}
*,
*::before,
*::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.container {
height: 80px;
background-color: #333333;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.container .logo {
max-width: 250px;
padding: 0 10px;
overflow: hidden;
}
.container .logo a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
height: 60px;
}
.container .logo a img {
max-width: 100%;
max-height: 60px;
}
.container .navbar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 0 10px;
}
.container .navbar ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
margin: 0;
padding: 0;
}
.container .navbar ul li a {
text-decoration: none;
color: #999999;
font-size: 20px;
text-transform: uppercase;
display: block;
height: 60px;
line-height: 60px;
cursor: pointer;
padding: 0 10px;
}
.container .navbar ul li a:hover {
color: #ffffff;
background-color: rgba(23, 23, 23, 0.9);
}
.container .navbar ul .close {
display: none;
text-align: right;
padding: 10px;
}
.container .navbar ul .close span {
font-size: 40px;
display: inline-block;
border: 1px solid #cccccc;
padding: 0 10px;
cursor: pointer;
}
.container .navbar .icon-bar {
padding: 18px 8px;
width: 50px;
height: 60px;
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
}
.container .navbar .icon-bar i {
background-color: #ffffff;
height: 2px;
}
#media only screen and (max-width: 650px) {
.container {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.container .logo {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.container .navbar {
-webkit-box-flex: 0;
-ms-flex: 0;
flex: 0;
}
.container .navbar ul {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
position: fixed;
left: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: #ffffff;
width: 100%;
height: 100%;
overflow: auto;
-webkit-transition: left .3s;
-o-transition: left .3s;
transition: left .3s;
}
.container .navbar ul li a {
padding: 10px;
font-size: 20px;
height: auto;
line-height: normal;
color: #555555;
}
.container .navbar ul .close {
display: block;
}
.container .navbar .icon-bar {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.container .navbar ._Menus-show {
left: 0;
}
}
.body {
max-width: 700px;
margin: 0 auto;
padding: 10px;
}
/* start of drop down */
/* dropdown css starts here */
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #0009f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
width: 400px;
height: 160px;
font-family: Arial;
}
.desc_Info {
padding: 15px;
width: 400px;
height: 220px;
font-family: Arial;
}
span {
cursor: pointer;
}
/* hand over menu item */
/* END drop down menu */
<html>
<head>
<title>Nav bar</title>
</head>
<body>
<div class="container">
<div class="logo">
<img src="./bilder/logo2.jpg" alt="Start">
</div>
<div class="navbar">
<div class="icon-bar" onclick="Show()">
<i></i>
<i></i>
<i></i>
</div>
<ul id="nav-lists">
<li class="close"><span onclick="Hide()">×</span></li>
<li class="elements">
<div class="dropdown">
Cars
<div class="dropdown-content">
<div class="desc">assadsadsad<br /><br /> asdasdsadasdsadsad
<br /><br /> adsasdsasaasdasdasdsdasad
</div>
</div>
</div>
</li>
<li>Bikes</li>
</ul>
</div>
</div>
<div class="body">
<p>Hello yes !</p>
</div>
</body>
</html>
Related
I'm trying to implement a specific design but have stumbled upon quite a lot of complexities by now.
The main problem remains the background of linear gradient - it shall be stretched on the whole viewport to have the satisfactory effect (position: absolute;width: 100%;height: 100%).
But that's not the only problem, we also have a background image P above that gradient image (with higher z-index and opacity 0.3) and the gradient shall be only visible for header and footer (anything below must only have P and not gradient).
And I did that. (JSFiddle, view the code below)
Code
#index_header {
display: block;
position: relative;
}
#index_navigation {
position: relative;
top: 0px;
padding-top: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 850px;
width: 80%;
margin: 0 auto;
}
#index_logo {
display: block;
width: 150px;
height: 52px;
background-image: url("images/index/logo.png");
background-size: contain;
background-repeat: no-repeat;
}
#index_navigation_left {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#index_navigation_center {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: 80%;
flex-basis: 80%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#index_navigation_right {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#index_navigation_core {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style-type: none;
text-align: center;
min-width: 420px;
padding: 0;
width: 60%;
}
#index_navigation_core li {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
#index_navigation_core li a {
color: white;
font-size: 1.250em;
text-decoration: none;
cursor: pointer;
}
#navigator_authentication {
display: block;
background-color: white;
text-decoration: none;
color: #860001;
cursor: pointer;
font-size: 1.125em;
padding: 10px 30px 10px 30px;
border-radius: 20px;
}
#index_footer {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 850px;
width: 80%;
margin: 0 auto;
}
#index_footer_left {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#index_footer_right {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#index_footer_left p {
font-size: 0.938em;
font-family: 'bpg_arialregular';
color: white;
}
#social_media_btns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
list-style-type: none;
}
#social_media_btns li {
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
#social_media_btns li a {
display: block;
width: 30px;
height: 30px;
}
#social_media_facebook {
background-size: cover;
background-image: url("images/social_media_icons/universal/facebook.png");
}
#social_media_youtube {
background-size: cover;
background-image: url("images/social_media_icons/universal/youtube.png");
}
#social_media_twitter {
background-size: cover;
background-image: url("images/social_media_icons/universal/twitter.png");
}
.present {
border-bottom: solid white 3px;
}
.nav_button {
-webkit-transition: border 0.35s ease;
-o-transition: border 0.35s ease;
transition: border 0.35s ease;
}
.nav_button:hover {
border-bottom: solid white 3px;
}
#mobile_menu {
display: none;
width: 80px;
height: 80px;
cursor: pointer;
background-image: url("images/icons/menu.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
#media only screen and (max-width: 880px) {
#index_navigation {
min-width: 300px;
}
#index_navigation_center {
display: none;
}
#mobile_menu {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#index_footer {
min-width: 300px;
}
}
#media only screen and (max-width: 500px) {
#navigator_authentication {
font-size: 0.9em;
padding: 5px 10px 5px 10px;
}
#mobile_menu {
width: 60px;
height: 60px;
}
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
body {
background-color: #F5F5F5;
}
#index_overlay {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
z-index: 0;
}
#index_header {
z-index: 3;
}
#about_pattern {
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url("https://i.imgur.com/F8SFW2p.png");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
opacity: 0.3;
}
#about_pattern_2 {
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(100, 0, 1, 0.75) 0%, rgba(189, 0, 1, 0.75) 24.86%, rgba(210, 0, 1, 0.75) 82.87%, rgba(100, 0, 1, 0.75) 100%);
border: 1px solid #000000;
box-sizing: border-box;
}
#index_navigation {
padding-bottom: 25px;
}
#nav_background {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
#about_center {
position: relative;
display: flex;
z-index: -1;
overflow-y: scroll;
flex-grow: 1;
}
#about_background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #F5F5F5;
z-index: -1;
}
#foot_background {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
}
#intro_text {
position: relative;
padding-left: 10%;
padding-right: 10%;
padding-top: 60px;
padding-bottom: 60px;
font-size: 1.125em;
text-decoration: none;
line-height: normal;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
overflow-y: auto;
text-align: left;
color: #4F4F4F;
}
footer {
position: relative;
padding-top: 25px;
padding-bottom: 25px;
flex-shrink: 0;
z-index: 3;
}
<!DOCTYPE html>
<html lang="ge">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="about.css" type="text/css" charset="utf-8">
<link rel="stylesheet" href="universal.css" type="text/css" charset="utf-8">
</head>
<body>
<div id="index_overlay">
<div id="about_pattern"></div>
<div id="about_pattern_2"></div>
<header id="index_header">
<div id="nav_background"></div>
<div id="index_navigation">
<div id="index_navigation_left">
<a id="index_logo" href="/"></a>
</div>
<div id="index_navigation_center">
<ul id="index_navigation_core">
<li>
btn1
</li>
<li>
btn2
</li>
<li>
btn3
</li>
</ul>
</div>
<div id="mobile_menu"></div>
<div id="index_navigation_right">
btn4
</div>
</div>
</header>
<div id="about_center">
<div id="about_background"></div>
<div id="intro_text">
<div style="text-align: center;">text here</div>
<br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<footer>
<div id="foot_background"></div>
<div id="index_footer">
<div id="index_footer_left">
<p>© 2018 mysite</p>
</div>
<div id="index_footer_right">
<ul id="social_media_btns">
<li>
<a target="_blank" id="social_media_facebook"></a>
</li>
<li>
<a target="_blank" id="social_media_youtube"></a>
</li>
<li>
<a id="social_media_twitter"></a>
</li>
</ul>
</div>
</div>
</footer>
</div>
<script src="scripts/jquery/jquery.js"></script>
<script src="scripts/custom/main.js"></script>
</body>
</html>
Problem:
Even though I visually achieved it, there's a significant concern for practical usage.
If you look at the code, #about_pattern is a background image P and #about_pattern_2 is a gradient image.
#about_center element that is stuck between header and footer, must have lower z-index compared to #about_pattern (so it can pass through) and equal or higher z-index compared to #about_pattern2 (so we don't have gradient effect there).
But #about_pattern being on the top, makes every element in #about_center not accessible to user. Which seems to be a big problem if someone wants to for example scroll through text...
Is it possible to achieve this effect without blocking the central element? Thank you!
A solution is to remove z-index from #about_center to avoid stacking context issue1 then you will able to place #about_background and #intro_text like you want as they will be in the same stacking context of the gradient background. You can then place one below and the other above.
So you remove this:
#about_center {
position: relative;
display: flex;
/*z-index: -1; */
overflow-y: scroll;
flex-grow: 1;
}
And add this:
#intro_text {
....
z-index:3;
}
Full code:
https://jsfiddle.net/tfx9pLrq/3/
#index_header {
display: block;
position: relative;
}
#index_navigation {
position: relative;
top: 0px;
padding-top: 25px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 850px;
width: 80%;
margin: 0 auto;
}
#index_logo {
display: block;
width: 150px;
height: 52px;
background-image: url("images/index/logo.png");
background-size: contain;
background-repeat: no-repeat;
}
#index_navigation_left {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#index_navigation_center {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-ms-flex-preferred-size: 80%;
flex-basis: 80%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#index_navigation_right {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#index_navigation_core {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
list-style-type: none;
text-align: center;
min-width: 420px;
padding: 0;
width: 60%;
}
#index_navigation_core li {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
}
#index_navigation_core li a {
color: white;
font-size: 1.250em;
text-decoration: none;
cursor: pointer;
}
#navigator_authentication {
display: block;
background-color: white;
text-decoration: none;
color: #860001;
cursor: pointer;
font-size: 1.125em;
padding: 10px 30px 10px 30px;
border-radius: 20px;
}
#index_footer {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-width: 850px;
width: 80%;
margin: 0 auto;
}
#index_footer_left {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#index_footer_right {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#index_footer_left p {
font-size: 0.938em;
font-family: 'bpg_arialregular';
color: white;
}
#social_media_btns {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 0;
list-style-type: none;
}
#social_media_btns li {
display: inline-block;
margin-left: 10px;
margin-right: 10px;
}
#social_media_btns li a {
display: block;
width: 30px;
height: 30px;
}
#social_media_facebook {
background-size: cover;
background-image: url("images/social_media_icons/universal/facebook.png");
}
#social_media_youtube {
background-size: cover;
background-image: url("images/social_media_icons/universal/youtube.png");
}
#social_media_twitter {
background-size: cover;
background-image: url("images/social_media_icons/universal/twitter.png");
}
.present {
border-bottom: solid white 3px;
}
.nav_button {
-webkit-transition: border 0.35s ease;
-o-transition: border 0.35s ease;
transition: border 0.35s ease;
}
.nav_button:hover {
border-bottom: solid white 3px;
}
#mobile_menu {
display: none;
width: 80px;
height: 80px;
cursor: pointer;
background-image: url("images/icons/menu.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
#media only screen and (max-width: 880px) {
#index_navigation {
min-width: 300px;
}
#index_navigation_center {
display: none;
}
#mobile_menu {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
#index_footer {
min-width: 300px;
}
}
#media only screen and (max-width: 500px) {
#navigator_authentication {
font-size: 0.9em;
padding: 5px 10px 5px 10px;
}
#mobile_menu {
width: 60px;
height: 60px;
}
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
overflow: hidden;
}
body {
background-color: #F5F5F5;
}
#index_overlay {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
height: 100%;
z-index: 0;
}
#index_header {
z-index: 3;
}
#about_pattern {
position: absolute;
z-index: 1;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url("https://i.imgur.com/F8SFW2p.png");
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 100%;
opacity: 0.3;
}
#about_pattern_2 {
position: absolute;
z-index: -1;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: linear-gradient(180deg, rgba(100, 0, 1, 0.75) 0%, rgba(189, 0, 1, 0.75) 24.86%, rgba(210, 0, 1, 0.75) 82.87%, rgba(100, 0, 1, 0.75) 100%);
border: 1px solid #000000;
box-sizing: border-box;
}
#index_navigation {
padding-bottom: 25px;
}
#nav_background {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
#about_center {
position: relative;
display: flex;
overflow-y: scroll;
flex-grow: 1;
}
#about_background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #F5F5F5;
z-index: -1;
}
#foot_background {
display: inline-block;
position: absolute;
width: 100%;
height: 100%;
}
#intro_text {
position: relative;
padding-left: 10%;
padding-right: 10%;
padding-top: 60px;
padding-bottom: 60px;
font-size: 1.125em;
text-decoration: none;
line-height: normal;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
overflow-y: auto;
text-align: left;
color: #4F4F4F;
z-index: 3;
}
footer {
position: relative;
padding-top: 25px;
padding-bottom: 25px;
flex-shrink: 0;
z-index: 3;
}
<div id="index_overlay">
<div id="about_pattern"></div>
<div id="about_pattern_2"></div>
<header id="index_header">
<div id="nav_background"></div>
<div id="index_navigation">
<div id="index_navigation_left">
<a id="index_logo" href="/"></a>
</div>
<div id="index_navigation_center">
<ul id="index_navigation_core">
<li>
btn1
</li>
<li>
btn2
</li>
<li>
btn3
</li>
</ul>
</div>
<div id="mobile_menu"></div>
<div id="index_navigation_right">
btn4
</div>
</div>
</header>
<div id="about_center">
<div id="about_background"></div>
<div id="intro_text">
<div style="text-align: center;">text here</div>
<br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<footer>
<div id="foot_background"></div>
<div id="index_footer">
<div id="index_footer_left">
<p>© 2018 mysite</p>
</div>
<div id="index_footer_right">
<ul id="social_media_btns">
<li>
<a target="_blank" id="social_media_facebook"></a>
</li>
<li>
<a target="_blank" id="social_media_youtube"></a>
</li>
<li>
<a id="social_media_twitter"></a>
</li>
</ul>
</div>
</div>
</footer>
</div>
1For a more accurate explanation we can refer to the specification:
For those with 'z-index: auto', treat the element as if it created a
new stacking context, but any positioned descendants and descendants
which actually create a new stacking context should be considered part
of the parent stacking context, not this new one.
So by removing z-index it will fall back to auto and we removed the restriction of making our elements in the stacking context of their parent and controled by the z-index of their parent. They now belong to the upper stacking context which is the same as the gradient.
In other words, adding z-index to the parent element will make z-index of child elements to only be consider inside their parent after that everything will be placed considering the z-index of the parent. Either everything will be above the gradient or everything below it.
I know there are a lot of questions about this, I've tried some of them and I didn't have that much luck.
I have this structure:
HTML:
<header>
<div class="logo">
<a><img style="height: 50px;" src="https://user94.files.wordpress.com/2009/12/ubuntu-logo.png"></a>
</div>
<div class="header-content">
<nav>
About me
Education
Personal life
My work
Contact me
</nav>
</div>
</header>
CSS:
header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
align-items: center;
align-items: center;
text-align: center;
min-height: 100vh;
width: 100%;
background: url(http://via.placeholder.com/1920x1080) no-repeat 10% 10% / cover;
}
.header-content {
margin-top: 2em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;;
justify-content: center;
align-items: center;
text-align: center;
}
.logo{
padding-right: 0;
}
nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
font-weight: 400;
color: rgb(49, 41, 61);
font-size: .8em;
margin-top: 2em;
margin-left: 30em;
}
I'm trying to move the logo to the left without affecting my navigation items to the right, I was so much in trouble getting the nav items to the right and over the image that I don't get how to make both of them positioned correctly.
How can I make it work?
https://codepen.io/anon/pen/zLMzpO
This CSS for header should do what you want:
header {
display: flex;
align-items: baseline;
justify-content: space-between;
min-height: 100vh;
background: url(http://via.placeholder.com/1920x1080) no-repeat 10% 10% / cover;
}
https://codepen.io/anon/pen/YjRQRV
(no column direction, justify-content: space-between; and align-items: baseline; are the essential changes to your version)
Here is my solution:
.logo{
padding-right: 0;
opacity: 1;
}
.logo img{
opacity: 0;
}
.logo::after{
content: "";
width: 50px;
height: 54px;
opacity: 0.99;
position: absolute;
top: 10px;
left: 10px;
background: url("https://user94.files.wordpress.com/2009/12/ubuntu-logo.png") no-repeat;
background-size: 100% 100%;
}
in navigation bar you should use flex-direction: row.
here is a useful link flexbox basic navigation - menu items and logo
body{
margin:0;
}
header {
display: flex;
align-items: baseline;
justify-content: space-between;
min-height: 100vh;
background: url(http://via.placeholder.com/1920x1080) no-repeat 10% 10% / cover;
}
.header-content {
margin-top: 2em;
}
header a,
header a:visited {
color: rgb(252, 252, 252);
text-decoration: none;
padding-bottom: 0.1em;
}
header a:hover {
color: #FA26BF;
}
.logo{
padding-right: 0;
}
.logo img{
vertical-align: bottom;
}
nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
font-weight: 400;
color: rgb(49, 41, 61);
font-size: .8em;
margin-top: 2em;
margin-left: 30em;
}
nav a {
margin: 1em;
}
nav a,
nav a:visited {
padding-bottom: 0.1em;
letter-spacing: 0.1em;
text-decoration: none;
color: rgb(252, 252, 252);
}
nav a:hover,
nav a:active {
color: #FA26BF;
}
<header>
<div class="logo">
<a><img style="height: 50px;" src="https://user94.files.wordpress.com/2009/12/ubuntu-logo.png"></a>
</div>
<div class="header-content">
<nav>
About me
Education
Personal life
My work
Contact me
</nav>
</div>
</header>
Working on this gallery I can't figure out why it is adding the extra space on the right side on the inside of the gallery. The blue border is just there to show the gallery window and will eventually be taken away. This is all I have in the gallery css.
.gallery {
display: -ms-flexbox;
display: flex;
justify-content: space-between;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
margin: 0 auto;
border: 2px solid blue;
}
Fiddle: https://jsfiddle.net/3crrxdax/5/ Thanks.
* {
box-sizing: border-box;
font-family: Georgia, Arial, sans-serif;
}
html {
background-color: #FFFF20;
}
body {
background-color: #FFFF20;
height: 100%;
}
#wrapper {
width: 1500px;
height: 100%;
margin: auto;
background-color: #233237;
color: #FFFF20;
box-shadow: 5px 5px 5px #000000;
}
header {
color: #FFFF20;
font: Georgia, serif;
text-align: center;
}
h1 {
background-image: url(ebaylogo.png);
background-repeat: no-repeat;
background-position: right;
height: 72px;
background-size: 120px;
line-height: 200%;
margin-bottom: 0;
}
h3 {
text-align: center;
padding-top: 50px;
padding-bottom: 5px;
}
h3,
.smallp {
margin: 0;
}
nav {
text-align: center;
font-weight: bold;
}
nav a {
text-decoration: none;
color: #FFFF20;
}
nav ul li {
list-style-type: none;
display: inline;
margin-right: 30px;
padding: 2px;
border: 2px solid #FFFF20;
}
footer {
padding-top: 50px;
font-size: .70em;
font-style: italic;
text-align: center;
color: #FFFF20;
margin: auto;
text-align: center;
}
footer a {
color: #FFFF20;
}
main {
padding: 0px 20px 0px 20px;
display: block;
}
.unorderedlist {
display: flex;
display: -ms-flexbox;
flex-wrap: wrap;
-ms-flex-pack: justify;
border: 1px blue solid;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-flow: row wrap;
padding-left: 0px;
list-style-type: none;
margin: 100px auto;
width: 60%;
height: 100%;
text-align: center;
}
.list {
padding-bottom: 50px;
background-color: #18121E;
width: 220px;
height: 375px;
box-shadow: 5px 5px 5px;
margin-bottom: 25px;
}
.list a {
text-decoration: none;
color: #FFFF20;
}
.smallp {
color: #FFFF20;
width: 300px;
}
.smallp2 {
width: 300px;
}
.secondh3 {
text-align: center;
margin-bottom: -15px;
}
.pawnstarimg {
margin-top: 50px;
border: 2px solid #FFFF20;
}
.peaceimg {
border: 2px solid #FFFF20;
order: 4;
-ms-flex-order: 4;
}
.malebox a {
color: #FFFF20;
}
.femalebox a {
color: #FFFF20;
}
a:hover {
color: #0000FF;
}
/** a:visited{
color:#000000;
Able to check a:hover without clearing cache
}**/
a:active {
color: #00FF00;
}
.test {
display: flex;
display: -ms-flexbox;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-flow: row wrap;
width: 60%;
margin: auto;
justify-content: space-around;
-ms-flex-pack: justify;
}
.testbox2 {
display: flex;
display: -ms-flexbox;
flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
.testbox3 {
display: flex;
display: -ms-flexbox;
flex-direction: column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
.gallery {
display: -ms-flexbox;
display: flex;
justify-content: space-between;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
margin: 0 auto;
border: 2px solid blue;
}
.gallery>div {
padding: 5px;
}
.gallery>div>img {
display: block;
transition: .3s transform;
}
.gallery>div:hover {
z-index: 1;
}
.gallery>div:hover>a>img {
transform: scale(2.5, 2.5);
transition: .2s transform;
}
.cf:before,
.cf:after {
display: table;
content: "";
line-height: 0;
}
<main id="wrapper">
<header>
<h1>CDC Shop</h1>
</header>
<nav>
<ul>
<li> Home</li>
<li> Shirts</li>
<li> Pants</li>
<li> Jackets</li>
<li> Shoes</li>
<li> Contact</li>
</ul>
</nav>
<div class="gallery">
<div>
<a href="angels.gif"><img src="angels.gif" height="150px" width="75px" />
</div>
<div>
<a href="angels2.jpg"><img src="angels2.jpg" height="150px" width="75px" />
</div>
</div>
<footer>
Copyright © 2017 CDCShop <br>
...#gmail.com
</footer>
</main>
Remove width: 1500px; and update to make it to good look
* { box-sizing: border-box;
font-family: Georgia, Arial, sans-serif;
}
html{
background-color:#FFFF20;
}
body{
background-color:#FFFF20;
height:100%;
}
#wrapper { //width: 1500px;
height:100%;
margin: auto;
background-color: #233237;
color: #FFFF20;
box-shadow: 5px 5px 5px #000000;
}
header{
color: #FFFF20;
font: Georgia, serif;
text-align: center;
}
h1{
background-image: url(ebaylogo.png);
background-repeat: no-repeat;
background-position: right;
height: 72px;
background-size: 120px;
line-height: 200%;
margin-bottom: 0;
}
h3{
text-align:center;
padding-top:50px;
padding-bottom:5px;
}
h3, .smallp{
margin:0;
}
nav{
text-align: center;
font-weight: bold;
}
nav a{
text-decoration: none;
color:#FFFF20;
}
nav ul li {
list-style-type: none;
margin: 10px 11px;
padding: 2px;
border: 2px solid #FFFF20;
width: fit-content;
float: left;
}
footer{
padding-top: 50px;
font-size: .70em;
font-style: italic;
text-align: center;
color: #FFFF20;
margin:auto;
text-align:center;
}
footer a{
color: #FFFF20;
}
main{
padding: 0px 20px 0px 20px;
display: block;
}
.unorderedlist{
display: flex;
display:-ms-flexbox;
flex-wrap:wrap;
-ms-flex-pack: justify;
border: 1px blue solid;
justify-content: space-between;
-webkit-flex-wrap: wrap;
-ms-flex-flow: row wrap;
padding-left:0px;
list-style-type: none;
margin: 100px auto;
width:60%;
height:100%;
text-align:center;
}
.list{
padding-bottom: 50px;
background-color: #18121E;
width:220px;
height:375px;
box-shadow: 5px 5px 5px;
margin-bottom:25px;
}
.list a{
text-decoration:none;
color:#FFFF20;
}
.smallp{
color: #FFFF20;
width:300px;
}
.smallp2{
width:300px;
}
.secondh3{
text-align:center;
margin-bottom:-15px;
}
.pawnstarimg{
margin-top:50px;
border: 2px solid #FFFF20;
}
.peaceimg{
border: 2px solid #FFFF20;
order:4;
-ms-flex-order: 4;
}
.malebox a {
color:#FFFF20;
}
.femalebox a {
color:#FFFF20;
}
a:hover{
color: #0000FF;
}
/** a:visited{
color:#000000;
Able to check a:hover without clearing cache
}**/
a:active {
color: #00FF00;
}
.test{
display:flex;
display:-ms-flexbox;
flex-wrap:wrap;
-webkit-flex-wrap: wrap;
-ms-flex-flow: row wrap;
width:60%;
margin:auto;
justify-content:space-around;
-ms-flex-pack: justify;
}
.testbox2{
display:flex;
display:-ms-flexbox;
flex-direction:column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
.testbox3{
display:flex;
display:-ms-flexbox;
flex-direction:column;
-webkit-box-direction: normal;
-ms-flex-direction: column;
}
.gallery {
display:-ms-flexbox;
display:flex;
justify-content:space-between;
-webkit-justify-content: space-around;
-ms-flex-pack: justify;
margin:0 auto;
border:2px solid blue;
clear: both;
}
.gallery > div {
padding:5px;
}
.gallery > div > img {
display: block;
transition: .3s transform;
}
.gallery > div:hover {
z-index: 1;
}
.gallery > div:hover > a > img {
transform: scale(2.5,2.5);
transition: .2s transform;
}
.cf:before, .cf:after {
display: table;
content: "";
line-height: 0;
}
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CDC Shop</title>
<link rel="stylesheet" type="text/css" href="../test3.css">
</head>
<body>
<main id="wrapper">
<header>
<h1>CDC Shop</h1>
</header>
<nav>
<ul>
<li> Home</li>
<li> Shirts</li>
<li> Pants</li>
<li> Jackets</li>
<li> Shoes</li>
<li> Contact</li>
</ul>
</nav>
<div class="gallery">
<div>
<img src="https://i.stack.imgur.com/m8iXH.jpg?s=328&g=1" height="150px" width="75px" />
</div>
<div>
<img src="https://i.stack.imgur.com/m8iXH.jpg?s=328&g=1" height="150px" width="75px" />
</div>
</div>
<footer>
Copyright © 2017 CDCShop <br>
ccoburn713#gmail.com
</footer>
</main>
</body>
</html>
I have a flex container that comes after another flex container,
first one is navigation bar and the second is the page content.
I tried making the content take the whole height of the page, and found only one thing to work which is setting container's height to 100vh.
But then I faced a problem where I need to subtract from the viewport, the height of the navigation.
/* Mixins Definitions */
/* Actual CSS */
.navbar {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
background: rgba(0, 0, 0, 0.81);
font-size: 14px;
-webkit-flex-flow: row nowrap;
justify-content: flex-end;
align-items: stretch;
list-style: none;
}
.navbar li {
margin: 0;
line-height: 3.2em;
display: block;
}
.navbar li i {
margin-right: 10px;
}
.navbar li a {
color: #9d9d9d;
text-decoration: none;
padding: 15px;
margin: 0;
}
.navbar li a:hover {
color: #FFFFFF;
}
.navbar li:first-child {
margin-right: auto;
}
.navbar li:first-child a {
font-size: 20px;
}
#media all {
}
#media all and (max-width: 600px) {
.navbar {
justify-content: space-around;
}
.navbar li:first-child {
display: none;
}
}
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
}
.container .sidebar {
width: 16.5%;
border-right: 1px solid #ee0005;
}
.container .sidebar .navigation {
padding: 0;
list-style: none;
}
.container .sidebar .navigation a {
padding: 10px 15px 10px 20px;
text-decoration: none;
display: inline-block;
color: #337ab7;
width: 100%;
}
.container .sidebar .navigation a:hover {
background-color: #EEEEEE;
}
.container .sidebar .navigation .active > a {
background-color: #428bca;
color: #FFFFFF;
}
.container .content {
flex: 1;
height: 100%;
padding: 30px;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background-color: #f8f8f8;
margin: 0;
min-height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<ul class="navbar">
<li>Company</li>
<li><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</li>
<li>Dashboard</li>
</ul>
<div class="container">
<div class="sidebar">
<ul class="navigation">
<li>Dashboard</li>
<li class="active">Hosts <span class="sr-only">(current)</span></li>
<li>Users</li>
</ul>
</div>
<div class="content">Content</div>
</div>
</body>
https://jsfiddle.net/0xj1v8mw/1/
You can set height on the body, instead of .container, and add some additional flex rules:
fiddle
/* Mixins Definitions */
/* Actual CSS */
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.navbar {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
background: rgba(0, 0, 0, 0.81);
font-size: 14px;
-webkit-flex-flow: row nowrap;
justify-content: flex-end;
align-items: stretch;
list-style: none;
}
.navbar li {
margin: 0;
line-height: 3.2em;
display: block;
}
.navbar li i {
margin-right: 10px;
}
.navbar li a {
color: #9d9d9d;
text-decoration: none;
padding: 15px;
margin: 0;
}
.navbar li a:hover {
color: #FFFFFF;
}
.navbar li:first-child {
margin-right: auto;
}
.navbar li:first-child a {
font-size: 20px;
}
#media all {}
#media all and (max-width: 600px) {
.navbar {
justify-content: space-around;
}
.navbar li:first-child {
display: none;
}
}
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
flex: 1;
}
.container .sidebar {
width: 16.5%;
border-right: 1px solid #ee0005;
}
.container .sidebar .navigation {
padding: 0;
list-style: none;
}
.container .sidebar .navigation a {
padding: 10px 15px 10px 20px;
text-decoration: none;
display: inline-block;
color: #337ab7;
width: 100%;
}
.container .sidebar .navigation a:hover {
background-color: #EEEEEE;
}
.container .sidebar .navigation .active>a {
background-color: #428bca;
color: #FFFFFF;
}
.container .content {
flex: 1;
height: 100%;
padding: 30px;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background-color: #f8f8f8;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
}
<body>
<ul class="navbar">
<li>Company</li>
<li><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</li>
<li>Dashboard</li>
</ul>
<div class="container">
<div class="sidebar">
<ul class="navigation">
<li>Dashboard</li>
<li class="active">Hosts <span class="sr-only">(current)</span></li>
<li>Users</li>
</ul>
</div>
<div class="content">sdfsd</div>
</div>
</body>
Added height: 100% to the html, body and .container elements:
/* Mixins Definitions */
/* Actual CSS */
html, body {
height: 100%;
}
.navbar {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
background: rgba(0, 0, 0, 0.81);
font-size: 14px;
-webkit-flex-flow: row nowrap;
justify-content: flex-end;
align-items: stretch;
list-style: none;
}
.navbar li {
margin: 0;
line-height: 3.2em;
display: block;
}
.navbar li i {
margin-right: 10px;
}
.navbar li a {
color: #9d9d9d;
text-decoration: none;
padding: 15px;
margin: 0;
}
.navbar li a:hover {
color: #FFFFFF;
}
.navbar li:first-child {
margin-right: auto;
}
.navbar li:first-child a {
font-size: 20px;
}
#media all {
}
#media all and (max-width: 600px) {
.navbar {
justify-content: space-around;
}
.navbar li:first-child {
display: none;
}
}
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
height: 100%;
}
.container .sidebar {
width: 16.5%;
border-right: 1px solid #ee0005;
}
.container .sidebar .navigation {
padding: 0;
list-style: none;
}
.container .sidebar .navigation a {
padding: 10px 15px 10px 20px;
text-decoration: none;
display: inline-block;
color: #337ab7;
width: 100%;
}
.container .sidebar .navigation a:hover {
background-color: #EEEEEE;
}
.container .sidebar .navigation .active > a {
background-color: #428bca;
color: #FFFFFF;
}
.container .content {
flex: 1;
height: 100%;
padding: 30px;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background-color: #f8f8f8;
margin: 0;
min-height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
}
<body>
<ul class="navbar">
<li>Company</li>
<li><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</li>
<li>Dashboard</li>
</ul>
<div class="container">
<div class="sidebar">
<ul class="navigation">
<li>Dashboard</li>
<li class="active">Hosts <span class="sr-only">(current)</span></li>
<li>Users</li>
</ul>
</div>
<div class="content">sdfsd</div>
</div>
</body>
For container class just use height: calc(100vh - 46px);.
Where I saw your navigation bar height is 46px from your given demo.
I've got a header like that:
<header id="top">
<a id="logourl" href="/"><img src="/images/logo.jpg" alt="LOGO" id="logo"></a>
<nav>
<ul>
<li id="firstli">Home</li>
<li>Macchine</li>
<li>Rivenditori</li>
<li>Dove siamo</li>
<li>Contatti</li>
</ul>
</nav>
</header>
With the CSS:
header{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width:100%;
background-color: #3498DB;
}
#logo{
box-shadow: 0px 0px 5px #fff;
border-radius: 50%;
width: 20%;
}
#logourl{
margin-top: 10px;
margin-bottom: 15px;
display: block;
}
header nav {
width: auto;
/*-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;*/
margin-bottom: 20px;
}
header nav ul{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
/*justify-content: space-between;*/
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
list-style: none;
text-align: center;
}
header nav li {
text-align: center;
padding: 5px 10px;
/*border-right: 2px solid white;*/
/*border-radius: 10px;*/
/*margin-right: 10px;*/
color: white;
margin-left: 20px;
}header nav li>a {
margin:0;
width: 100%;
height: 100%;
color: #F2F1EF;
font-weight: bolder;
text-transform: uppercase;
font-size: 25px;
}
header nav li>a:hover{
color: white;
}
The problem is that the "a" tag should fit to image size, but that's not true, because it stretches from the left to the middle of the page width, so some nav menu entries wrap to a new even in full screen.
try this css:
#logourl{
overflow:hidden;
}
It's not entirely clear how this is supposed to look but just setting display:flex on the parent doesn't automatically tell the children how to behave.
I saw a width of 20% in there which I assume was mean to be for the logo area (not the logo image)....so that receives flex:0 0 20%;
The nav therefore should be flex:1 to take up the remaining space.
Codepen Demo
You will, of course, require media queries at some point to avoid any unwanted wrapping.
header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background-color: #3498DB;
}
#logo {
box-shadow: 0px 0px 5px #fff;
border-radius: 50%;
}
#logourl {
margin-top: 10px;
margin-bottom: 15px;
display: block;
-webkit-box-flex: 0;
-webkit-flex: 0 0 20%;
-ms-flex: 0 0 20%;
flex: 0 0 20%;
text-align: center;
}
header nav {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
/*-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;*/
margin-bottom: 20px;
}
header nav ul {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
/*justify-content: space-between;*/
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style: none;
text-align: center;
}
header nav li {
text-align: center;
padding: 5px 10px;
/*border-right: 2px solid white;*/
/*border-radius: 10px;*/
/*margin-right: 10px;*/
color: white;
margin-left: 20px;
}
header nav li>a {
margin: 0;
width: 100%;
height: 100%;
color: #F2F1EF;
font-weight: bolder;
text-transform: uppercase;
font-size: 25px;
}
header nav li>a:hover {
color: white;
}
<header id="top">
<a id="logourl" href="/">
<img src="http://lorempixel.com/output/fashion-q-c-250-100-10.jpg" alt="LOGO" id="logo">
</a>
<nav>
<ul>
<li id="firstli">Home
</li>
<li>Macchine
</li>
<li>Rivenditori
</li>
<li>Dove siamo
</li>
<li>Contatti
</li>
</ul>
</nav>
</header>