I added code to hamburger menu below. I want to close menu after click on specific section.
For example, if you click on 'contact' section menu should hide and move me to contact section on page. I waste about one hour and really don't have an idea how to fix it, menu still appears on screen.
/* CORE STYLES */
:root {
--primary-color: rgba(13, 110, 139, 0.75);
--overlay-color: rgba(24, 39, 51 , 0.85);
--menu-speed: 0.75s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
line-height: 1.4;
}
.container {
max-width: 960px;
margin: auto;
overflow: hidden;
padding: 0 3rem;
}
.showcase {
background: var(--primary-color);
color: #fff;
height: 100vh;
position: relative;
}
.showcase:before {
content: '';
background: url('https://images.pexels.com/photos/533923/pexels-photo-533923.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.showcase .showcase-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
.showcase h1 {
font-size: 4rem;
}
.showcase p {
font-size: 1.3rem;
}
.btn {
display: inline-block;
border: none;
background: var(--primary-color);
color: #fff;
padding: 0.75rem 1.5rem;
margin-top: 1rem;
transition: opacity 1s ease-in-out;
text-decoration: none;
}
.btn:hover {
opacity: 0.7;
}
/* MENU STYLES */
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
}
/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: '';
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
/* Moves Line Down */
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
.menu-wrap .toggler:checked:hover + .hamburger > div {
transform: rotate(225deg);
}
/* Show Menu */
.menu-wrap .toggler:checked ~ .menu {
visibility: visible;
}
.menu-wrap .toggler:checked ~ .menu > div {
transform: scale(1);
transition-duration: var(--menu-speed);
}
.menu-wrap .toggler:checked ~ .menu > div > div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu > div {
background: var(--overlay-color);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
.menu-wrap .menu > div > div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
}
.menu-wrap .menu > div > div > ul > li {
list-style: none;
color: #fff;
font-size: 1.5rem;
padding: 1rem;
}
.menu-wrap .menu > div > div > ul > li > a {
color: inherit;
text-decoration: none;
transition: color 0.4s ease;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/menu.css">
<title>Hamburger Menu Overlay</title>
</head>
<body>
<div class="menu-wrap">
<input type="checkbox" class="toggler">
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<header class="showcase">
<div class="container showcase-inner">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas maiores sint impedit delectus quam molestiae explicabo cum facere ratione veritatis.</p>
Read More
</div>
</header>
</body>
</html>
Instead using a :checked input which is an issue if you want to unchecked it while you click on a link (make a choice click the input or the link) , you may use :focus that can easily be lost clicking anywhere else.
Possible example
/* CORE STYLES */
:root {
--primary-color: rgba(13, 110, 139, 0.75);
--overlay-color: rgba(24, 39, 51, 0.85);
--menu-speed: 0.75s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
line-height: 1.4;
}
.container {
max-width: 960px;
margin: auto;
overflow: hidden;
padding: 0 3rem;
}
.showcase {
background: var(--primary-color);
color: #fff;
height: 100vh;
position: relative;
}
.showcase:before {
content: "";
background: url("https://images.pexels.com/photos/533923/pexels-photo-533923.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") no-repeat center center/cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.showcase .showcase-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
}
.showcase h1 {
font-size: 4rem;
}
.showcase p {
font-size: 1.3rem;
}
.btn {
display: inline-block;
border: none;
background: var(--primary-color);
color: #fff;
padding: 0.75rem 1.5rem;
margin-top: 1rem;
transition: opacity 1s ease-in-out;
text-decoration: none;
}
.btn:hover {
opacity: 0.7;
}
/* MENU STYLES */
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 60px;
height: 60px;
padding: 1rem;
background: var(--primary-color);
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Line */
.menu-wrap .hamburger>div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s 0.4s ease;
}
/* Hamburger Lines - Top & Bottom */
.menu-wrap .hamburger>div::before,
.menu-wrap .hamburger>div::after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
/* Moves Line Down */
.menu-wrap .hamburger>div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .hamburger:focus>div {
transform: rotate(135deg);
}
/* Turns Lines Into X */
.menu-wrap .hamburger:focus>div:before,
.menu-wrap .hamburger:focus>div:after {
top: 0;
transform: rotate(90deg);
}
/* Rotate On Hover When Checked */
.menu-wrap .hamburger:focus>div {
transform: rotate(225deg);
}
/* Show Menu */
.menu-wrap .hamburger:focus~.menu {
visibility: visible;
}
.menu-wrap .hamburger:focus~.menu>div {
transform: scale(1);
transition-duration: var(--menu-speed);
}
.menu-wrap .hamburger:focus~.menu>div>div {
opacity: 1;
transition: opacity 0.4s ease 0.4s;
}
.menu-wrap .menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .menu>div {
background: var(--overlay-color);
border-radius: 50%;
width: 200vw;
height: 200vw;
display: flex;
flex: none;
align-items: center;
justify-content: center;
transform: scale(0);
transition: all 0.4s ease;
}
.menu-wrap .menu>div>div {
text-align: center;
max-width: 90vw;
max-height: 100vh;
opacity: 0;
transition: opacity 0.4s ease;
}
.menu-wrap .menu>div>div>ul>li {
list-style: none;
color: #fff;
font-size: 1.5rem;
padding: 1rem;
}
.menu-wrap .menu>div>div>ul>li>a {
color: inherit;
text-decoration: none;
transition: color 0.4s ease;
}
/* whatever only for the demo */
div.boxe {
height: 100vh;
width: 100vw;
position: fixed;
top: 100vh;
left: 0;
transition: 0.5s;
z-index: 10;
display:flex;
align-items:center;
justify-content:space-around;
font-size: 5vmax
}
div.boxe:target {
top: 0;
background: rgba(13, 110, 139, 1);
}
<div class="menu-wrap">
<!--<input type="checkbox" class="toggler"> removed for a tabindex attribute -->
<div tabindex="0" class="hamburger">
<!-- give it a tabindex to make it clikable and be focused -->
<div></div>
</div>
<div class="menu">
<div>
<div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
<header class="showcase">
<div class="container showcase-inner">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas maiores sint impedit delectus quam molestiae explicabo cum facere ratione veritatis.</p>
Read More
</div>
</header>
<!-- whatever, just for a demo -->
<div id="aa" class="boxe">topbox A</div>
<div id="bb" class="boxe">topbox B</div>
<div id="cc" class="boxe">topbox C</div>
<div id="dd" class="boxe">topbox D</div>
Related
So I've got a problem where I've got two tabs (https://codepen.io/databell/pen/LYjxvyx) where the first tab opens up content and the second opens up a modal.
Now to be clear, those functions work. That's not the issue. So for those purposes, I deleted those out of my example. Focusing on CSS here.
My problem is I want plus + symbols to appear to the right side of each tab (really a div) and instead one tab has the symbol to the far right of the container, even though the tab is set to width 100%. So I'm stumped as to what the problem is.
This is meant to go into a Shopify store using the Dawn theme, so I'm using their elements here to create this interface.
Here's the code.
<div id="info-additions" class="product__accordion accordion info-additions-content" >
<details>
<summary>
<div class="summary__title info-additions-tab g-flex">
<h2 class="h4 accordion__title t-body benefits">
Tab One
<span></span>
</h2>
</div>
<div class="summary__title info-additions-tab g-flex">
<modal-opener class="product-popup-modal__opener no-js-hidden" data-modal="#PopupModal-ingr">
<button id="ProductPopup-ingr" class="summary__title t-body ingredients" type="button" aria-haspopup="dialog" data-additions-tab="ingredients">
<h2 class="h4 accordion__title">
Tab Two
<span></span>
</h2>
</button>
</modal-opener>
</div>
</summary>
<div class="accordion__content rte">
<p>Content</p>
</div>
</details>
</div>
CSS:
body {
font-size: 1.6rem;
}
*, ::before, ::after {
box-sizing: inherit;
}
.h0, .h1, .h2, .h3, .h4, .h5, h1, h2, h3, h4, h5 {
letter-spacing: .06rem;
line-height: 1.3;
}
.h4, h4 {
font-size: 1.6rem;
}
.grid {
list-style: none;
}
.g-flex {
display: flex;
display: -webkit-flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
}
.accordion summary {
cursor: pointer;
display: flex;
position: relative;
list-style: none;
line-height: 1;
padding: 1.5rem 0;
}
.accordion__title {
display: inline-block;
max-width: calc(100% - 6rem);
min-height: 1.6rem;
margin: 0;
word-break: break-word;
}
details > * {
box-sizing: border-box;
}
.accordion__title {
word-break: break-word;
}
.accordion .summary__title {
display: flex;
flex: 1;
}
#info-additions {
clear: both;
height: auto;
margin: 15px 0 0;
border-top: 2px solid;
border-bottom: 2px solid;
width: 100%;
}
.info-additions-content {
position: relative;
height: 0;
transition: .6s var(--a-cubic-1);
}
.info-additions-tab {
justify-content: space-between;
}
.info-additions-tab span {
display: block;
position: absolute;
width: 18px;
height: 18px;
top: 13px;
right: 2rem;
}
.info-additions-tab button {
position: relative;
padding: 16px 0!important;
line-height: 1;
font-weight: 500;
text-align: left;
}
.info-additions-tab button.benefits {
width: 50%;
}
.info-additions-tab .product-popup-modal__opener {
width: 100% !important;
}
.info-additions-tab button.ingredients {
width: 100%;
}
.info-additions-tab span {
display: block;
position: absolute;
width: 18px;
height: 18px;
top: 13px;
right: 2rem;
}
.info-additions-tab span:before,
.info-additions-tab span:after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
width: 2px;
height: 18px;
background-color: black;
transition: 0.3s;
}
.info-additions-tab button:not(.active) span:after {
-webkit-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
.info-additions-content {
position: relative;
height: 0;
transition: 0.6s var(--a-cubic-1);
}
.info-additions-content [data-additions-content] {
position: absolute;
width: 100%;
top: 0;
left: 0;
padding: 5px 0 20px;
opacity: 0;
pointer-events: none;
transition: 0.3s 0s;
}
.info-additions-content [data-additions-content].active {
opacity: 1;
pointer-events: auto;
transition-delay: 0.4s;
}
#info-additions button {
padding: 0;
background: transparent;
color: inherit;
cursor: pointer;
border: 0;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
transition: 0.2s;
}
if you want an absolute element like + to stay in the parent element you have to set the position of the parent to "relative".
you have two problems. summary__title doesn't have a position so + doesn't stay in it .
for the second tab, your modal button has a relative position that makes the + stay inside of it instead of the summary__title.
.accordion .summary__title {
...
position: relative; // add position
}
#info-additions button {
...
position: unset; // unset the position of the button
}
I followed this tutorial to create a responsive hamburger menu. But i can't figure out why the menu items don't show when my screen is desktop size.
When the screen is mobile size i can click the hamburger menu and the items appear. If i scale up my screen to desktop size while the menu is "open" they do appear the way i want to (because of my media querie). But when i refresh the page (while my screen is desktop size) my menu items don't appear. I can't seem to figure it out, please help if you see my mistake. Thanks!
This is what i want:
This is what i get now:
This is what i get when i scale to mobile screen:
body {
margin: 0;
background-color: #fff;
}
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
.menu-btn {
display: none;
&:checked ~ .menu {
max-height: 240px;
}
&:checked ~ .menu-icon .nav-icon {
background: transparent;
&:before {
transform: rotate(-45deg);
top: 0;
}
&:after {
transform: rotate(45deg);
top: 0;
}
}
}
.menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
.nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition:background .2s ease-out;
&:before {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 5px;
}
&:after {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -5px;
}
}
}
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
color: #403e3f;
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
li {
a {
display: block;
padding: 20px;
border-right: 1px solid #aaa;
text-decoration: none;
}
}
}
}
#media (min-width: 48em) {
li {
float: left;
a {
padding: 20px 30px;
}
}
.menu {
clear: none;
float: right;
max-height: none;
}
.menu-icon {
display: none;
}
}
<header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li>oplossingen</li>
<li>product</li>
<li>about</li>
</header>
You need to remove the max-height: 0;and max-height:250px set a height: auto;on the menu in the media query for the menu to show up in desktop.
Update I've revised the snippet, it works now.
body {
margin: 0;
background-color: #fff;
}
.header {
background-color: #fff;
position: fixed;
width: 100%;
z-index: 3;
}
.menu-btn {
display: none;
}
.menu-btn:checked ~
.menu {
height: auto;
}
.menu-btn:checked ~ .menu-icon .nav-icon {
background: transparent;
}
.menu-btn:checked ~ .menu-icon .nav-icon:before {
transform: rotate(-45deg);
top: 0;
}
.menu-btn:checked ~ .menu-icon .nav-icon:after {
transform: rotate(45deg);
top: 0;
}
.menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
}
.nav-icon {
background: #333;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
.nav-icon:before {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: 5px;
}
.nav-icon:after {
background: #333;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
top: -5px;
}
.menu {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
color: #403e3f;
clear: both;
height: 0;
transition: height .2s ease-out;
}
.menu a {
display: block;
padding: 20px;
text-decoration: none;
}
#media screen and (min-width: 48em) {
.menu-icon {
display: none;
}
.menu {
float: right;
height: auto;
}
.menu li {
display: inline-block;
}
}
<header class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li>oplossingen</li>
<li>product</li>
<li>about</li>
</header>
Here is my code and the javascript. I've tried deleting the width off the original class .sidebar but it doesn't work. The nav-links come in smooth but the .sidebar background snaps into place. It doesn't smoothly transition with the rest of the elements but when the browser resizes the transitions take place. It's just that when I click on the event action it snaps into place.
var toggler = document.getElementsByClassName('toggler')[0]
var sideBar = document.getElementsByClassName('sidebar')[0]
toggler.addEventListener('click', function openSideBar() {
sideBar.classList.toggle('open')
});
.menu {
height: 100vh;
width: 100%;
background: #eeefcf;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.menu-toggler{
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
background: purple;
z-index: 1;
transition: ease-in .4s;
}
.toggler {
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 2;
opacity: 0;
transition: all ease-in .9s;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: -200px;
background: rgb(45, 125, 218);
transition: ease 0.9s;
}
.nav-links {
position: absolute;
top: 100px;
left: -70px;
display: flex;
flex-direction: column;
transition: ease-in .4s;
}
.nav-link {
margin: 15px 0px;
}
.nav-link a {
color: white;
text-decoration: none;
}
.open {
width: 250px;
transition: ease 2s all;
}
.open .nav-links {
left: 70px;
transition: ease-in all .5s;
}
<div class="menu">
<h1>Move It over</h1>
<div class="menu-toggler">
<input type="checkbox" class="toggler">
</div>
<aside class="sidebar">
<ul class="nav-links">
<li class="nav-link">Home</li>
<li class="nav-link">About</li>
<li class="nav-link">Services</li>
<li class="nav-link">Contact</li>
</ul>
</div>
</aside>
You have set the width of .sidebar to -200px, which is an invalid value.
If you set it to 0px it will animate.
I have made following demo on Codepen. Problem is when the height of viewport is decreased scroll appear which i want but logo is hidden under icon-list which is the unwanted behavior. Everything works properly if viewport height is enough.
<input type="checkbox" id="menu-expander" name="ert">
<div class="main-menu-container">
<div class="logo-area">
<div class="logo"><img src="http://extensiondl.maxthon.com/skinpack/11018970/1375652328/icons/icon_32.png"></div>
</div>
<ul class="sidebar-icon-list">
<li class="sidebar-icon">
<img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
<span>Week</span>
</li>
<li class="sidebar-icon menu-active">
<img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
<span>Projects</span>
</li>
<li class="sidebar-icon" title="Life">
<img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
<span>Life</span>
</li>
<li class="sidebar-icon">
<img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
<span>Analysis</span>
</li>
<li class="sidebar-icon">
<img src="http://www.clipartsfree.net/vector/small/go-home_Clipart_Free.png">
<span>Projects</span>
</li>
</ul>
<div class="sidebar-wt">
<label for="menu-expander"><img src="https://cdn3.iconfinder.com/data/icons/awesome-lineca-vol-1/17/angle-right-128.png"></label>
</div>
<div class="user-area">
<div class="user-pic"></div>
</div>
CSS
input[name="ert"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
overflow: hidden;
}
/* Main Menu Contaier */
.main-menu-container {
width: 6em;
position: fixed;
top: 0;
left: 0;
height: 100vh;
background-color: hsl(207,6%,12%);
color: #fff;
display: flex;
flex-direction: column;
z-index: 100;
border-right: 1px solid black;
transition: width 0.2s ease-in;
overflow-y: auto;
overflow-x: hidden;
}
input[name="ert"]:checked + .main-menu-container {
width: 12em;
transition: width .3s linear;
}
/* Logo Area */
.logo-area {
height: 6em;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 4em;
width: 4em;
}
.logo img {
height: 4em;
width: 4em;
}
/* Icon List */
.sidebar-icon-list {
display: flex column;
list-style: none;
width: 100%;
padding: 0;
margin: 0;
flex-grow: 1;
}
.sidebar-icon {
color: #eaeaea;
width: 100%;
border-left: 3px solid hsl(207,6%,12%);
height: 3em;
margin: 1em 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
position: relative;
transition: all 0.3s linear;
}
.sidebar-icon:hover {
color: #fff;
border-left: 3px solid #EEFF22;
}
.sidebar-icon img {
color: #fff;
width: 2em;
height: 2em;
}
.sidebar-icon span {
font-size: 0.75em;
opacity: 0;
position: absolute;
transition: all 0.1s linear;
}
input[name="ert"]:checked + .main-menu-container .sidebar-icon-list .sidebar-icon {
flex-direction: row;
justify-content: flex-start;
padding-left: 1em;
transition: all 0.3s linear;
}
input[name="ert"]:checked + .main-menu-container .sidebar-icon-list .sidebar-icon span {
font-size: 0.75em;
opacity: 1;
position: relative;
transition: all 0.3s linear;
margin-left: 1em;
}
.menu-active {
border-left: 3px solid #EEFF22;
color: #EEFF22;
}
/* Sidebar Expander */
.sidebar-wt {
display: flex;
justify-content: flex-end;
}
.sidebar-wt label img {
height: 1.5em;
width: 1.5em;
cursor: pointer;
}
.main-menu-container .sidebar-wt label img {
transition: all 0.3s linear;
}
input[name="ert"]:checked + .main-menu-container .sidebar-wt label img {
transform: rotateZ(180deg);
transition: all 0.3s linear;
}
/* USer Area at Bottom */
.user-area {
height: 4em;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.user-pic {
width: 100%;
height: 5em;
border-bottom: 2px solid #2ca58d;
background-image: url(http://soccer1x2.net/wp-content/uploads/2012/03/leo-messi1.png);
background-size: cover;
}
.main-menu-container .sidebar-wt label img {
transition: all 0.3s linear;
}
input[name="ert"]:checked + .main-menu-container .sidebar-wt label img {
transform: rotateZ(180deg);
transition: all 0.3s linear;
}
It looks like the height of .logo-container is changing, when you decrease the window's height.
If you min-height: 6em; for .logo-area the height will not decrease.
the navigation works fine until a specific width (about 1100px). If the width gets smaller the links are not clickable anymore. And I don't know why. The only thing I found out, is that, when I add some text (for example in line 51 "mediaquery..."), than the navigation works, but the backgroundcolor of it become white instead of original dark grey.
Do you know what I am doing wrong?
Here is the code:
<html lang="de">
<head>
<meta charset="utf -8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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="main.css">
<!--The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!--[if lt IE 8]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Arbeitsgruppe Wolken und globales Klima - Universität Leipzig (Fakultät für Physik und Geowissenschaften)</title>
<style>
*{
font-family: helvetica,arial,sans-serif;
}
#media (max-width: 1300px) and (min-width: 0px) {
#luecke_nav1 {
display: none;
}
}
#media (max-width: 1029px) {
.heading #seitentitel h1 {
font-size: 140%;
}
}
#media (min-width: 1029px) {
.menu {
font-size: 1.2em;
}
}
mediaqueryzerhautklassedanach
.menu {
padding: 0.5em;
background: #414141;
min-height: 3em;
line-height: 1em;
position: fixed;
top: 0;
left: 0;
z-index: -6;
}
.menu > ul {
transition: max-height 0.25s linear;
}
.menu ul {
margin: 0;
padding: 0;
text-align: center;
}
.menu li {
transition: visibility .25s linear;
display: inline-block;
padding: .45em 1.1em;
margin: 0 .3em;
position: relative;
}
#media (min-width: 841px) {
.menu li ul {
display: none;
position: absolute;
top: 100%;
margin-top: 1px;
left: -1px;
right: -1px;
}
.menu li:hover ul {
display: block;
}
.menu li li {
margin: -1px 0 0 0;
box-sizing: border-box;
width: 100%;
}
#logo {
display: none;
}
}
#media (max-width: 841px) {
#nav_kasten {
display: none;
}
.hvr-bounce-in{
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
-webkit-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
}
#luecke_nav{
display: none;
}
.menu > ul {
max-height: 0;
overflow: hidden;
margin: 0 3.5em 0 1em;
}
.menu li {
visibility: hidden;
display: block;
padding: 0.5em 0.6em;
border: none;
}
.menu li ul {
margin-top: 0.5em;
border-left: 1px solid #000;
}
.menu .navbar-handle {
display: block;
}
#navbar-checkbox:checked + .menu ul {
max-height: 300px;
}
#navbar-checkbox:checked + .menu li {
visibility: visible;
}
#navbar-checkbox:checked + .menu .navbar-handle,
#navbar-checkbox:checked + .menu .navbar-handle:after,
#navbar-checkbox:checked + .menu .navbar-handle:before {
border-color: #2098d1;
}
}
.navbar-checkbox {
display: none;
}
.navbar-handle {
display: none;
cursor: pointer;
position: relative;
font-size: 45px;
padding: .5em 0;
height: 0;
width: 1.66666667em;
border-top: 0.13333333em solid;
color: #2098d1;
}
.navbar-handle:before,
.navbar-handle:after {
position: absolute;
left: 0;
right: 0;
content: ' ';
border-top: 0.13333333em solid;
}
.navbar-handle:before {
top: 0.37777778em;
}
.navbar-handle:after {
top: 0.88888889em;
}
.menu {
top: 0;
left: 0;
right: 0;
}
.menu .navbar-handle {
position: fixed;
font-size: 1.2em;
top: 0.7em;
right: 12px;
z-index: 10;
}
/* Overline From Center */
.hvr-overline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 2px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hvr-overline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
background: #2098d1;
height: 7px;
top: -20%;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-overline-from-center:hover:before, .hvr-overline-from-center:focus:before, .hvr-overline-from-center:active:before {
left: 0;
right: 0;
}
a:link, a:visited, a:active {
text-decoration: none;
color: #2098d1;
}
a:hover {
text-decoration: none;
color: #2098d1;
}
#lim_logo {
width: 50%;
margin-top: 8%;
text-align: center;
z-index: 99;
}
#nav_kasten {
width: 14.7%;
height: 40%;
z-index: 99;
position: absolute;
top: 0;
margin-left: 42%;
}
#base {
position: relative;
display: inline-block;
width: 100%;
text-align: center;
color: white;
background: gray;
text-decoration: none;
padding-bottom:15%;
background-clip:content-box;
overflow:hidden;
}
#base:after {
content: "";
position: absolute;
top:83%;
left: 0;
background-color:inherit;
padding-bottom:50%; width:57.7%;
z-index: -1;
-webkit-transform-origin:0 0;
-ms-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform: rotate(-30deg) skewX(30deg);
-ms-transform: rotate(-30deg) skewX(30deg);
transform: rotate(-30deg) skewX(30deg);
}
.hvr-bounce-in {
}
.hvr-bounce-in:hover, .hvr-bounce-in:focus, .hvr-bounce-in:active {
}
#logo{
width: 15%;
top: 2%;
left: 1%;
z-index: 4;
position: fixed;
}
.heading {
background: url(https://pixabay.com/static/uploads/photo/2012/10/26/01/38/cold-front-63037_960_720.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
z-index:-7;
padding: 18%;
}
#seitentitel {
background-color:rgba(255,255,255,0.7);
text-align: center;
padding: 2%;
margin: 0.5%;
}
.linie {
border :none;
border-top: 1px solid #0090E0;
background-color:#FFFFFF;
height: 1px;
margin: 0px 80px 0px 80px;
}
</style>
</head>
<body>
<header>
<div id="nav_kasten">
<img id="lim_logo" src="http://www.uni-leipzig.de/~strahlen/web/images/LOGOLIM_trans_white.gif">
</div>
<div id="logo">
<img id="lim_logo" src="http://www.uni-leipzig.de/~strahlen/web/images/LOGOLIM_trans_white.gif">
</div>
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
<ul>
<li>Home</li>
<li>Team</li>
<li>Veröffentlichungen</li>
<li id="luecke_nav"><div id="luecke_nav1"> </div>
<div id="luecke_nav2"> </div></li>
<li>Projekte</li>
<li>Abschlussarbeiten</li>
<li>Links</li>
</ul>
<label for="navbar-checkbox" class="navbar-handle hvr-bounce-in">
</nav>
</header>
<div class="col-md-12 heading">
<div id="seitentitel">
<hr class="linie">
<h1> Arbeitsgruppe <br> Wolken und globales Klima</h1>
<hr class="linie">
</div>
</div>
<div class="col-md-12 text2">
<h2 style="text-align: center;"></h2>
<br>
<div class="col-md-6">
</div>
<div class="col-md-12">
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
</script>
</body>
So all adding that text does is essentially stop the browser from rendering the rest of the css that follows. What you need to do is;
1) Remove that text you've added in the css.
2) Remove the z-index on both the .menu and .heading. This is the problem. You've applied a lower z-index to the .heading but because it exists in the html at a higher stacking order than the .menu, it isn't working as you've intended it. So .heading is hiding your .menu
That should fix your problem.
Also i noticed:
a) You used a duplicate id on your logo image. #lim_logo use a class instead and then undate your css accordingly.
b) Just before your closing </nav> you are missing a closing </label> tag.
c) Update your media query expressions. Max-width should (in most cases) stop below the breakpoint. for example you might have a breakpoint at 1300px, so the max-width for targeting below that breakpoint would be 1299px. and then the min-width for targeting from that breakpoint and up would be 1300px. And there's no point including the min-width:0px as that would be implied.