I'm trying out the Simple Sidebar Demo . However after changing the sidebar title it messes up:
How do I fix it so that:
The menu items are pushed down instead of being overwritten
There is not all that whitespace between the two rows of the title
Here is a cut down version of the demo that still shows the problem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Sidebar - Start Bootstrap Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/simple-sidebar.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
This title does not appear to word-wrap properly
</a>
</li>
<li> Dashboard </li>
<li> Shortcuts </li>
<li> Overview </li>
</div>
<div id="page-content-wrapper">
<div class="container-fluid"> <div class="row"> <div class="col-lg-12"> Bla bla
</div> </div> </div> </div>
</div>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This is simple-sidebar.css:
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 250px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
}
Fixing the Wrapping:
You are setting two properties here:
line-height and text-indent:
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
Removing those two properties here makes the text wrap properly.
Perhaps you are looking for margin-left to push the entire element, and not just the first line?
Fixing the "pushing":
You are also fixing the list-item height, while your child <a> of your header list item has two lines, which make the <a> element go outside the bounding box you set.
Removing that height from this code:
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
(or making it min-height) will make it push the other list items down.
Perhaps you are looking for padding-top and padding-bottom to add some spacing to the entire element, rather than to each line?
Here's a total adjustment that makes use of the suggestions I just offered you
margin-left:
.sidebar-nav li {
margin-left: 20px;
line-height: 40px;
}
box-sizing, padding, and not line-height:
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: initial;
box-sizing: border-box;
-moz-box-sizing: border-box;
padding-top: 15px;
padding-bottom: 15px;
}
Related
I'm a new student in the web development world. I am trying to create a static page for personal study and I need to leave the image to the left well below the menu, however, I have already tried the forms that I know and all continue to present the same error, so I believe someone here can answer me. Can someone help me?
https://ibb.co/M8rsp49
This is the html code:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Home</title>
<link rel="shortcun icon" type="image/x-png" href="_imagens/icone-adv6.png"/>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="_css/estilo.css">
</head>
<body>
<header class="header">
<!-- inicio menu -->
<div class="logo">
<img src="_imagens/iconadv6.png">
</div>
<nav>
<ul>
<li><p class="gilroy-bold">equipe</p></li>
<li><p class="gilroy-bold">cases</p></li>
<li><p class="gilroy-bold">agência</p></li>
</ul>
</nav>
<!-- fim menu -->
</header>
<div class="zoom">
<img src="_imagens/predio.png">
<div class="text-item">
</div>
<div id="tituloadv6">
<h1><p class="gilroy-bold">Somos a <br />ADV6</h1></p>
</div>
<div id="texto1">
<h3><p class="gilroy-bold">Não fazemos a menor ideia. <br />Fazemos a maior.</h3></a>
</div>
<div id="texto2">
<p class="gilroy-bold">Passa aqui! <br/> Tem playstation, café, <br />cerveja e muita criatividade. </a>
</div>
</body>
</html>
This is the CSS code:
#font-face{
font-family: "gilroy-bold";
src: url("../_fonts/gilroy-bold.ttf");
}
.gilroy-bold{
font-family: "gilroy-bold";
}
.header ul li a:hover {
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 3px;
bottom: 0;
left: 0;
background-color: #FF8C00;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.zoom {
overflow: hidden;
}
.zoom img {
max-width: 90%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
float: right;
margin-top: 40px;
position: relative;
}
.zoom:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
#tituloadv6{
margin-left: 60px;
font-size: 30px;
padding-top: 60px;
}
#logo{
padding-left: 20px;
padding-bottom: 0px;
padding-top: 15px;
}
#texto1{
padding-left: 100px;
}
#texto2{
font-size: 13px;
padding-left: 100px;
}
.header{
margin: 0;
padding: 0;
}
nav{
width: 100%;
}
ul{
margin: 5px 5px 5px 10px;
padding: 0px;
padding-bottom: 40px;
list-style: none;
}
li{
float: right;
}
.logo img{
position: absolute;
margin-top: 15px;
margin-left: 10px;
}
nav a{
width: 100px;
display: block;
padding: 20px 15px;
text-decoration: none;
}
changing float: right to float: left and margin-top: 40px to margin-top: 100px
.zoom img {
max-width: 90%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
float: left;
margin-top: 100px;
position: relative;
}
Hope that helps!
Change the .zoom class to this:
.zoom {
overflow: hidden;
display: block;
width: 100%;
}
Then change the float of the img tag:
.zoom img {
.zoom img {
max-width: 90%;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
float: left;
margin-top: 40px;
position: relative;
}
You'll need to change the margins of the text to make sure text is readable.
See this codepen for more details: https://codepen.io/aharish-the-typescripter/pen/GPqqpw
This is my css code for my icons, the css code also changed my background and other stuff in my webpage how come. A lot of this CSS code is effecting my HTML code sort of making it not established i added colors but they won't run over the CSS code.
html {
font-size: 20px;
}
body {
background-color: #dde7f2;
padding: 50px;
text-align: center;
}
/* Wrapper */
.icon-button {
background-color: white;
border-radius: 3.6rem;
cursor: pointer;
display: inline-block;
font-size: 2.0rem;
height: 3.6rem;
line-height: 3.6rem;
margin: 0 5px;
position: relative;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 3.6rem;
}
/* Circle */
.icon-button span {
border-radius: 0;
display: block;
height: 0;
left: 50%;
margin: 0;
position: absolute;
top: 50%;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 0;
}
.icon-button:hover span {
width: 3.6rem;
height: 3.6rem;
border-radius: 3.6rem;
margin: -1.8rem;
}
.twitter span {
background-color: #4099ff;
}
.facebook span {
background-color: #3B5998;
}
.google-plus span {
background-color: #db5a3c;
}
/* Icons */
.icon-button i {
background: none;
color: White;
height: 3.6rem;
left: 0;
line-height: 3.6rem;
position: absolute;
top: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
width: 3.6rem;
z-index: 10;
}
.icon-button .icon-twitter {
color: #4099ff;
}
.icon-button .icon-facebook {
color: #3B5998;
}
.icon-button .icon-google-plus {
color: #db5a3c;
}
.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus {
color: White;
}
This is my html code, creating links, is there something i should add or delete. The
<!DOCTYPE html>
<head>
<title>Andis Place</title>
<link rel="stylesheet" type="text/css"href="stylesheet.css"/>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<body style="font-family:Courier New;" bgcolor="White"
<head>
<h1 style="color:Orange;"> <center>Welcome to Andis Place</center></h1>
</head>
</body>
<body>
<p style="font-size:15px;">Enjoy… </p>
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #dde7f2;
}
li a {
display: block;
color: #dde7f2;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color:#dde7f2;
color:Blue;
}
</style>
</head>
<body>
<ul>
<li class="external-link">
Soundcloud
</li>
<li class="external-link">
Shop
</li>
<li class="external-link">
Photos
</li>
<li class="external-link">
About Me
</li>
</ul>
</body>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: White;
}
li {
float: center;
}
li a {
display: block;
color: Blue;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color:Powderblue;
}
.active {
background-color: #dde7f2;
}
</style>
</head>
<body>
**<i class="icon-twitter"></i><span></span>
<i class="icon-facebook"></i><span></span>
<i class="icon-google-plus"></i><span></span>**
</body>
</html>
So I've been setting up my own streaming page with VideoJS, all I want now is to have a chat, in this case, a Twitch chat iframe, side by side. This is what I have now.
The problem is the video element going under the chat frame. I want it to end where the chat frame starts, so they both line up nicely. If anyone could help me with this I'd be truly grateful.
Since Stackoverflow is forcing me to also put code in this post, here goes I suppose..
HTML:
<head>
<link href="//vjs.zencdn.net/4.9.0/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.9.0/video.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.sc.gl/videojs-hotkeys/latest/videojs.hotkeys.min.js"></script>
</head>
<div id="sidebar-wrapper">
<iframe frameborder="0" scrolling="no" src="http://twitch.tv/test/chat?popout=" height="100%" width="350">
</iframe>
</div>
<div class="wrapper">
<div class="videocontent">
<video id="videostream" class="video-js vjs-default-skin vjs-big-play-centered vjs-fullscreen" controls width="auto" height="auto">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
</video>
<script>
videojs("videostream", {}, function(){
// Player (this) is initialized and ready.
});
videojs('videostream').ready(function() {
this.hotkeys({
volumeStep: 0.1,
seekStep: 5,
alwaysCaptureHotkeys: true
});
});
</script>
</div>
</div>
CSS:
.video-js {padding-top: 56.25%;
margin-right: 20px;
}
.vjs-fullscreen {padding-top: 0px}
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 10000;
position: fixed;
right: 250px;
width: 0;
height: 100%;
margin-right: -250px;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#media(min-width:768px) {
#wrapper {
padding-left: 250px;
}
#wrapper.toggled {
padding-left: 0;
}
#sidebar-wrapper {
width: 350px;
}
#wrapper.toggled #sidebar-wrapper {
width: 0;
}
#page-content-wrapper {
padding: 20px;
position: relative;
}
#wrapper.toggled #page-content-wrapper {
position: relative;
margin-right: 0;
}
#content
{
top: 0;
bottom: 0;
left: 0;
display: hidden;
}
You have set the width of your video container to 100% so it is taking the 100% of the width of its container (the webpage).
You can use calc function to get the behaviour intended because you have to rest the width of the chat(350px) from the 100% of the width of the container.
#videostream{
width: calc(100% - 350px) !important;
}
Updated Codepen.
My question is rather simple,
text-decoration:none - is not working in this example when a user hovers over an <a> tag. Where is my mistake?
I have provided the whole project to help you understand what I'm trying to achieve. There is a code snippet below that displays my code with the current problem.
Thanks in advance guys.
* {
font-family: "Helvetica Neue";
font-size: 22px;
text-decortion:none!important
}
.container {
color: #a2abbd;
width: 100%;
height: 100%;
background-color: #21212b;
}
.radio-container {
overflow: hidden;
position: relative;
margin: 7% auto;
height: 504px;
width: 320px;
background-color: #2c2c37;
border-top: 1px solid #f1be81;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
-ms-border-radius: 25px;
border-radius: 25px;
-webkit-box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
box-shadow: 0px 50px 151px -36px rgba(0, 0, 0, 0.75);
}
header {
text-align: center;
vertical-align: middle;
line-height: 79px;
height: 79px;
background-color: #edae61;
color: white;
font-weight: bold;
}
header a {
display: block;
position: absolute;
width: 60px;
height: 80px;
}
header .arrow {
left: 0;
top: 0;
}
header .arrow img {
margin-bottom: 5px;
}
header .on-off {
right: 0;
top: 0;
}
header .on-off img {
margin-bottom: 10px;
margin-right: 7px;
}
section {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul {
position: relative;
padding: 0;
margin: 11px 23px 0px 23px;
line-height: 1.364;
}
section ul li {
border-bottom: 1px solid #40404a;
list-style-type: none;
overflow: hidden;
}
section ul li:last-child {
border: none;
}
section ul li a {
display: block;
padding: 18px 0px 14px 0px;
cursor: pointer;
width: 100%;
height: 100%;
color: #a2abbd;
text-decoration: none;
}
section ul li a:hover p {
color: #848b9b;
}
section ul li a p {
display: inline;
}
section ul li a p strong {
float: right;
clear: both;
}
section ul li a p img {
padding-right: 0.5em;
padding-bottom: 0.2em;
}
section ul .dribbleFM {
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul .dribbleFM .dribble-anchor {
position: absolute;
top: -200px;
z-index: 1;
}
section ul .dribbleFM .dribble-anchor:target {
top: 18px;
margin-bottom: 18px;
position: relative;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
section ul .dribbleFM .dribble-anchor:target + .dribble-button1 {
display: none;
}
section ul .dribbleFM .dribble-anchor:target ~ .dribble-button2 {
display: block;
}
section ul .dribbleFM .dribble-anchor .volume {
pointer-events: none;
position: relative;
}
section ul .dribbleFM .dribble-anchor .volume a {
position: relative;
display: inline;
pointer-events: auto;
z-index: 100;
}
section ul .dribbleFM .dribble-anchor .volume .img-main {
margin-left: 33px;
margin-right: 33px;
padding-top: 40px;
padding-bottom: 40px;
}
section ul .dribbleFM .dribble-anchor .volume .clickable {
padding-top: 5px;
padding-bottom: 8px;
}
section ul .dribbleFM .dribble-button2 {
display: none;
}
footer {
position: absolute;
bottom: 0;
height: 79px;
width: 100%;
background-color: #22222b;
border-top: 1px solid #4d505c;
text-align: center;
vertical-align: middle;
line-height: 79px;
cursor: default;
}
<html lang="en">
<head>
<title>Page Title</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatibile" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="netguru recruitment task">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="radio-container">
<header><img src="https://imageshack.com/i/id8QV4sap">
<p>
STATIONS
</p><img src="https://imageshack.com/i/idUebcAVp">
</header>
<section>
<ul>
<li><a href="#">
<p>
Putin FM<strong>66,6</strong>
</p></a></li>
<li class="dribbleFM">
<div id="dribble-anchor-on" class="dribble-anchor">
<div class="volume"><img src="https://imageshack.com/i/exjVsiWzp"><img src="https://imageshack.com/i/ipxUWXkvp"><img src="https://imageshack.com/i/idsjoKxsp"></div>
</div><a href="#dribble-anchor-on" class="dribble-button1">
<p>
Dribbble FM<strong>101,2</strong>
</p></a><a href="#dribble-anchor-off" class="dribble-button2">
<p>
Dribbble FM<strong>101,2 </strong>
</p></a>
</li>
<li><a href="#">
<p>
Doge FM<strong>99,4</strong>
</p></a></li>
<li><a href="#">
<p>
Ballads FM<strong>87,1</strong>
</p></a></li>
<li><a href="#">
<p><img src="http://imageshack.com/a/img661/6406/acyLmg.png">Maximum FM<strong>142,2 </strong></p></a></li>
</ul>
</section>
<footer>
<p>High quality</p>
</footer>
</div>
</div>
</body>
</html>
By defualt, you have already set the text-decoration:none for anchors. But text-decoration is not acting on hover for anchors because you have not specified it for :hover state.
For :hover, Try this,
section ul li a:hover{text-decoration:none}
Hope this help.!
The solution already post should work fine. By the way, why are you keeping your styles first and then the bootstrap styles. You should keep your styles next to the bootstrap styles. Otherwise, whatever you will loose the impact of your styles overridden by bootstrap styles.
I have a transition that animates the height of the UL within my navigation. This is only for mobiles. I have used a media query to change the navigation when the viewport is wider.
When you make the viewport smaller in width, once the media query is triggered you can see that the UL height animates because I have a transition going on. The only two ways I've found that stop this are either lose the transition completely, or only have it so the transition happens when the checkbox is checked. Initially displaying the UL as none worked, however as I need to then set the display to block, the transition is lost.
Here is my code example. Hopefully someone can help with a workaround.
Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='http://fonts.googleapis.com/css?family=Fira+Sans:400,500,700|Ovo|Varela' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- Navigation -->
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox" autocomplete="off">
<nav>
<div id="nav_overlay"></div>
<ul>
<li>Home</li>
<li>My Work</li>
<li>Contact</li>
</ul>
<div class="navbar_handle">
<label for="navbar-checkbox" class="navbar_menu"></label>
</div>
</nav>
</body>
</html>
CSS:
a {
text-decoration: none;
color: inherit;
}
.navbar-checkbox {
display: none;
}
nav {
position: fixed;
width: 100%;
top: 0;
}
nav ul {
position: relative;
-webkit-transition: height .2s linear;
transition: height .2s linear;
height: 0;
background-color: #2b2b2b;
overflow: hidden;
color: white;
padding: 0;
text-align: center;
margin: 0;
z-index: 3;
}
nav li {
-webkit-transition: visibility .4s linear;
transition: visibility .4s linear;
visibility: hidden;
}
nav li:hover {
background-color: #0b0b0b;
}
nav li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
display: block;
padding: 1.25em;
}
nav .border {
border-bottom: 1px solid #f6f6f6;
}
nav .navbar_handle {
position: relative;
border-top: 4px solid #de1b1b;
width: 100%;
background: #f6f6f6;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
vertical-align: middle;
z-index: 3;
}
nav .navbar_handle .navbar_menu {
font-family: dan_custom-font;
width: auto;
height: 100%;
float: right;
padding: 10px;
margin-right: 0.5em;
cursor: pointer;
color: #de1b1b;
text-align: center;
-webkit-transition: color .3s;
transition: color .3s;
}
nav .navbar_handle .navbar_menu:before {
content: 'Menu';
font-size: 2em;
line-height: 1em;
}
nav .navbar_handle .navbar_menu:after {
display: none;
}
nav #nav_overlay {
width: 100%;
height: 100%;
position: fixed;
visibility: hidden;
background: #000;
opacity: 0;
-webkit-transition: all .4s;
transition: all .4s;
z-index: 2;
}
#navbar-checkbox:checked + nav ul {
height: 12.1875em;
}
#navbar-checkbox:checked + nav li {
visibility: visible;
width: 100%;
display: block;
}
#navbar-checkbox:checked + nav #nav_overlay {
visibility: visible;
opacity: .7;
}
#navbar-checkbox:checked + nav .navbar_menu:before {
display: none;
}
#navbar-checkbox:checked + nav .navbar_menu:after {
display: block;
content: 'Close';
font-size: 2em;
line-height: 1em;
}
.main {
line-height: 1.5em;
}
#media only screen and (min-width: 42em) {
nav {
background: #f6f6f6;
}
nav ul {
display: block;
background: none;
float: right;
height: 3.75em;
color: #2b2b2b;
-webkit-transition: none;
transition: none;
}
nav ul li {
visibility: visible;
display: inline-block;
-webkit-transition: none;
transition: none;
}
nav .navbar_handle {
display: none;
}
nav .border {
border-bottom: none;
}
}