I'm not sure why hover isn't working for this page, the other work fine. Can anybody find a solution to this, because I tried but for some reason I can't get it to work?
My CSS code is below my HTML.
I think it the issue may lie here but I can't seem to figure it out.
Everything seems fine to me when I validated it.
Could it be I used too many hover for this CSS?
HTML
<body>
<input type="checkbox" id="menutoggle">
<label for="menutoggle" class="menu-icon">☰</label>
<header>
<div id="brand"><img src="http://www.grazinburger.com/images/menu_icon.png" alt="menu"></div>
</header>
<nav class="menu">
<ul>
<li id="video">Favorites</li>
<li id="portfolio">Portfolio</li>
<li id="blog">Blog</li>
</ul>
</nav>
</body>
CSS
body {
font-family: sans-serif;
}
a { color: red;
text-decoration: none;
}
li {
list-style: none;
}
ul {
padding: 0;
margin: 0;
}
header {
width: 100%;
height: 50px;
margin: auto;
color: red;
}
#brand {
float: left;
line-height: 50px;
color: #EEE;
font-size: 25px;
font-weight: bolder;
font-family: 'Anonymous Pro', ;
}
#brand img {
max-width: 12%;
}
nav { width:100%;
text-align:center;
}
nav a:hover {
background-color: black;
opacity: .4;
}
nav a {
display: block;
padding: 15px 0;
border-bottom: 1px solid gray;
color: antiquewhite;
font-family: 'Anonymous Pro', ;
font-weight: bold;
font-size: 1.25em;
}
nav li:last-child a {
border-bottom: none;
}
.menu li {
border-left: none;
}
#video {
background-image: url(http://clearancebinreview.com/wp-content/uploads/2011/01/1-30-11_news_video_game_backgrounds1.jpg);
}
#portfolio {
background-image: url(http://www.digitalgov.gov/files/2015/01/600-x-400-Composite-image-of-file-transfer-background-Wavebreakmedia-Ltd-Wavebreak-Media-Thinkstock-488641549.jpg);
background-position: center;
}
#blog {
background-image:url(../img/Anime-Panti-Ando-with-Gun-and-Sword-600x375.jpg);
background-position: top;
}
.menu {
width: 240px;
height: 210px;
position: absolute;
left: -240px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
}
.menu-icon {
padding: 10px 20px;
color: aquamarine;
cursor:pointer;
float: right;
}
#menutoggle {
display: none;
}
#menutoggle:checked ~ .menu {
position:absolute; left: 0; }
Hover appears to work for me:
https://jsfiddle.net/bd2d6jac/
Assuming your referring to nav a:hover
Related
I have tried altering the padding, using object-fit, and toyed around with different image sizes/settings. The image is obviously on there fine, but only way I can fit it is by making it super tiny which will not work for this.
<footer class="footer" id="footer-fixed">
<div class="footer-main">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="widget widget-text">
<div class="logo logo-footer"> <img class="logo logo-display" src="assets/images/logo-footer.png" height=auto width=300 alt=""> </div>
<p>We’re nuts about making your wedding great.</p>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="widget widget-text widget-links">
<h5 class="widget-title">Contact Us</h5>
<ul>
<li><i class="mdi mdi-cellphone"></i>(712) 253-3765</li>
<li> <i class="mdi mdi-email"></i>micdropentertainment515#gmail.com</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Here's the relevant css for it. Didn't want to make a big text dump but it feels like I didn't have enough info in my original post. Most of this is unrelated to the image but I'm so new to coding that some this may be relevant in different ways.
//--Footer CSS--//
/*=============================================
Footer
=============================================*/
#media only screen and (min-width: 992px) {
#footer-fixed {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.footer{
font-size:16px;
}
.footer-main{
padding:80px 0 60px;
background-color: #212121;
position: relative;
}
.footer .widget-title{
position: relative;
font-size: 14px;
line-height: 1.4;
text-transform: uppercase;
margin-bottom: 30px;
color: #fff;
letter-spacing: 1px;
font-weight: 700;
font-family: 'Source Sans Pro', sans-serif;
}
.footer .widget-text p {color:#fff;}
.footer .widget-title:before{
content:'';
position: absolute;
top:100%;
margin-top: 10px;
left: 0;
width: 40px;
border-top: 1px solid #333;
}
.footer .widget-links{
font-size: 16px;
font-family: 'Source Sans Pro', sans-serif;
}
.footer .widget-links li{
margin-bottom: 14px;
list-style:none;
}
.footer .widget-links li i {
color:#fff;
padding-right: 10px;
}
.footer .widget-links a{
color: #fff;
}
.footer .widget-links a:hover{
color:#2196F3;
text-decoration: none;
}
.footer-copyright{
padding: 30px 0;
background-color: #111312;
}
.copy-right{margin-top:5px;color:#fff;}
.footer-copyright ul.social-media{
float:left;
display:block;
margin-bottom:0;
margin-top: 5px;
}
.footer-copyright ul.social-media li {
display:inline-block;
margin-right: 17px;
}
.footer-copyright ul.social-media li:last-child {
margin-right:0;
}
.footer-copyright ul.social-media li a{
font-size: 20px;
display: inline-block;
color: #fff;
}
.footer-copyright ul.social-media li a:hover{
color: #2196F3;
}
.flat-footer ul.social-media{
float:none;
display:block;
margin-bottom:0;
margin-top: 5px;
}
.flat-footer ul.social-media li {
display:inline-block;
margin-right: 17px;
}
.flat-footer ul.social-media li:last-child {
margin-right:0;
}
.flat-footer ul.social-media li a{
font-size: 20px;
display: inline-block;
color: #fff;
}
.flat-footer ul.social-media li a:hover{
color: #2196F3;
}
ul.footer-gallery {margin:0;}
ul.footer-gallery li {
display: inline-block;
width: 24%;
padding: 0 2px 0px 0;
margin-bottom: 5px;
}
ul.footer-gallery li img {
max-width: 100%;
width: 100%;
}
.footer-gallery-box {
position: relative;
overflow: hidden;
}
.footer-gallery-box .skin-overlay {
background-color: rgba(30, 192, 255, 0.9);
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
-o-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
.footer-gallery-box:hover .skin-overlay{
opacity: 1;
}
.footer-gallery-box .zoom-wrap {
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
}
.footer-gallery-zoom {
position: absolute;
left: 0;
top: 40%;
width: 100%;
}
.footer-gallery-zoom li {
position: relative;
bottom: -40px;
opacity: 0;
visibility: hidden;
transform: translateZ(0);
}
.footer-gallery-box:hover .footer-gallery-zoom li{
bottom: 0;
opacity: 1;
visibility: visible;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.footer-gallery-zoom li a {
color:#fff;
}
.footer-gallery-zoom li a:hover, .footer-gallery-zoom li a:focus {
color:#212121;
}
.logo-footer {
height: 60px;
width: 300px;
}
.logo-footer img {
width: 100%;
}
.contact-widget.widget ul li {
padding-left: 25px;
position: relative;
}
.contact-widget.widget ul li i {
position: absolute;
left: 0;
top: 1px;
}
The cut off half fist that's giving me issues
If I understand your problem correctly, then the code you provided doesn't look like it cuts off any part of the image either.
Usually when an image is being cut off it's because the container it's in has this CSS being applied to it:
overflow: hidden;
Nevertheless, here's what I think you're looking for as a solution.
https://jsfiddle.net/nmfqc6dj/
I have a combined local docs, group docs, and f.a.q. page I've been collating my documentation into. It's turning out very well and is easily updated and added to. There's a static navbar at the top with drop-down menus to navigate to parts of the document. Ideally, I'd like to hide all content other than that which is currently linked.
CSS:
<style>
/* Block Elements */
body { margin-bottom: 150px; background-color: white; }
section { margin-left: 35px; }
/* Select/Display Elements */
section:not(#welcome) { display: none; }
section:target { display: block; }
...
</style>
I've also tried:
section:active { display: block; }
section:focus { display: block; }
I've also tried to add !important to the section:target { display: block !important; } without success. In a simpler page without additional CSS I can get it to work, but I can't seem to get it to work with my full styles.
Suggestions?
Edit: A sample that seems to work as I'd like albeit with divs and not sections:
<html>
<head>
<title> Test Target Selector </title>
<style>
div { display: none; }
div:target { display: block; }
</style>
</head>
<body>
<nav>
1
2
3
</nav>
<section>
<div id="1"> <h2> 1 </h2> <p> Content 1 </p> </div>
<div id="2"> <h2> 2 </h2> <p> Content 2 </p> </div>
<div id="3"> <h2> 3 </h2> <p> Content 3 </p> </div>
</section>
</body>
</html>
Edit2: Adding original full CSS and framework HTML.
<html>
<head>
<style>
/* Block Elements */
body { font-family: "Antic Slab", "Source Sans Pro", Helvetica, sans-serif; margin-bottom: 150px; background-color: white; }
section { margin-left: 35px; }
/* Select/Display Elements */
section:not(#welcome) { display: none; }
section:target { display: block; }
/* Block Elements Continued */
h1 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.4em; }
h2 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.3em; }
h3 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.2em; }
h4 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.1em; }
h5 { padding-top: 70px; text-align: left; font-weight: bold; font-size: 1.0em; }
p { text-align: justify; font-size: 1.0em; margin-right: 50px; }
blockquote { margin: 15px 0 0 15px; margin-right: 50px; }
blockquote p { padding-left: 15px; margin-right: 50px; }
ol, ul, dl { margin: 15px 0 0 15px; margin-right: 50px; }
li { padding: 5px; }
dt { padding: 5px; font-weight: bold; float: left; }
dd { padding: 5px; }
img { display: none; border: 1px solid black; margin: 20px; padding: 0; width: 200px; }
/* Inline Elements */
a { text-decoration: none; color: blue; }
a:hover { color: cyan; }
code { font-family: monospace; font-size: 1.1em; }
cite { color: darkgray; font-style: italic; }
cite a { color: navy; }
cite a:hover { color: cyan; }
code { font-family: monospace; font-size: 1.10em; }
blockquote.email { margin: 25px; border-left: 1px solid lightgray; }
/* Classes */
.email { border-left: 1px solid gray; }
.lower-alpha { list-style-type: lower-alpha; }
.outdated { color: red; }
.indent { margin-left: 50px; }
.center { text-align: center; }
.indent { margin-left: 25px; }
.no-wrap { white-space: nowrap; }
.outdated { text-decoration: none; font-size: 0.9em; color: lightgray; }
/* Main Navigation */
nav ul { margin: 0 2px; position: fixed; top: 0; width: 100%; list-style: none; background-color: black; padding: 0; text-align: center; }
nav ul li { position: relative; float: left; color: white; background-color: black; display: inline-block; text-align: center; margin: 0; padding: 10px; font-size: 0.90em; }
nav ul li:before { content: ""; }
nav ul li a { color: white; margin: 0; padding: 10px; text-decoration: none; -webkit-transition: color 0.2s linear, background 0.2s linear; -moz-transition: color 0.2s linear, background 0.2s linear; -o-transition: color 0.2s linear, background 0.2s linear; transition: color 0.2s linear, background 0.2s linear; }
nav ul li a:hover { color: white; }
nav ul li:hover > a { background: black; }
/* Drop-Down Navigation */
nav ul li:hover > ul { visibility: visible; opacity: 1; }
nav ul ul, nav ul ul li ul { list-style: none; margin: 0; padding: 10px; visibility: hidden; opacity: 0; position: absolute; z-index: 99999; width: 180px; background: white; -webkit-transition: opacity 0.2s linear, visibility 0.2s linear; -moz-transition: opacity 0.2s linear, visibility 0.2s linear; -o-transition: opacity 0.2s linear, visibility 0.2s linear; transition: opacity 0.2s linear, visibility 0.2s linear; }
nav ul ul { top: 43px; left: 1px; }
nav ul ul li ul { top: 0; left: 181px; }
nav ul ul li { clear: both; width: 100%; border: 0 none; border-bottom: 1px solid #c9c9c9; }
nav ul ul li a { background: none; padding: 7px 15px; color: white; text-decoration: none; display: inline-block; border: 0 none; float: left; clear: both; width: 150px; }
/* Lists */
ul { margin: 25px; list-style-type: none; }
ul li { padding: 5px; font-size: 0.90em; text-align: justify; }
ul li:before { content: "\2022"; }
ol { margin: 25px; }
ol li { padding: 5px; font-size: 0.90em; text-align: justify; }
ol li.lower-alpha { list-style-type: lower-alpha; }
/* Tables */
table { margin: 25px 25px auto; border-collapse: collapse; }
table caption { margin: 25px 0 25px 0; text-align: left; color: gray; }
th, td { padding: 5px; border: 1px solid lightgray; vertical-align: center; }
th { font-size: 0.8em; font-weight: bold; text-align: center; }
td { font-size: 0.8em; text-align: justify; white-space: nowrap; }
td:hover { background-color: lightcyan; }
</style>
</head>
<body>
<nav>
<ul id="sitemap">
<li class="h1"> Site Doc
<ul>
<li class="h2"> Backup </li>
<li class="h2"> Data </li>
</ul>
</li>
<li class="h1"> Notes
<ul>
<li class="h2"> Manual </li>
</ul>
</li>
</ul>
</nav>
<section id="welcome">
<h1> Documentation Page </h1>
<p> Welcome to the documentation page. </p>
<p> This page is under development. </p>
</section>
<section id="site_doc">
<h1> Site Doc </h1>
<section id="backup">
<h2> Backup </h2>
<p> Backup procedures. </p>
</section>
<section id="data">
<h2> Data </h2>
<p> Data storage procedures. </p>
</section>
</section>
<section id="notes">
<h1> Notes </h1>
<section id="manual">
<h2> Manual </h2>
<p> Manual. </p>
</section>
</section>
</body>
</html>
The only reason your simplified example didn't work is because you had all sections wrapped in yet another section. Replace that wrapper with something else and it will work. As for the more generic problem with your other CSS, there's two ways of approaching it: either find out which rules are mixing up your custom CSS, or add more specific rules, e.g. CSS classes to your toggable sections.
<html>
<head>
<title> Test Target Selector </title>
<style>
section { display: none; }
section:target { display: block; }
</style>
</head>
<body>
<nav>
1
2
3
</nav>
<div>
<section id="1"> <h2> 1 </h2> <p> Content 1 </p> </section>
<section id="2"> <h2> 2 </h2> <p> Content 2 </p> </section>
<section id="3"> <h2> 3 </h2> <p> Content 3 </p> </section>
</div>
</body>
</html>
When I hover to one of the elements, that elements itself expands, and other will adjust when the font-size gets bigger. How to stop that?
Same is happening to the red background, so I set a height: 38px; to avoid expanding:
header {
position: relative;
top: 10px;
margin: 0 auto;
height: 38px;
width: 100%;
background: red;
}
Now I tried to set a height and width to a single <li> to see if it won't move/expand at all, but doesn't work:
<li style="width: 130px; height: 38px;">Home</li>
* {
margin: 0;
padding: 0;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
top: 10px;
margin: 0 auto;
height: 38px;
width: 100%;
background: red;
}
.parent-ul {
position: relative;
top: 0px;
list-style: none;
text-align: center;
padding: 11px 0;
}
.parent-ul li {
margin: -4px;
display: inline;
padding: 7px 13px;
border-left: 1px solid silver;
transition: background 1s, border 1s,
border-radius 1s;
}
#prod {
border-right: 1px solid silver;
padding-right: 15px;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 0px 50px;
font-size: 14px;
transition: color 1s, font-size .5s;
}
/* Effects ================================ */
li:hover {
background: black;
border: 0;
border-radius: 2px;
}
li:hover + li {
border: 0;
}
li:hover a {
color: gold;
font-size: 18px;
}
#prod:hover {
border: 0;
}
<body>
<header>
<ul class="parent-ul">
<li style="width: 130px; height: 38px;">Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li id="prod">Products</li>
</ul>
</header>
</body>
Yoy can use float: left and box-sizing: border-box to align the nav items. Also, use padding : 0 so that when you make the text big, it is centered. Here is an example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
margin: 0 auto;
height: 38px;
width: 100%;
background: red;
}
.parent-ul {
position: relative;
list-style: none;
text-align: center;
}
.parent-ul li {
height: 38px;
width: 20%;
float: left;
transition: background 1s, border 1s,
border-radius 1s;
}
.parent-ul li:not(:first-child) {
border-left: 1px solid silver;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 0;
font-size: 14px;
transition: color 1s, font-size .5s;
line-height: 38px;
}
/* Effects ================================ */
li:hover {
background: black;
border: 0;
border-radius: 2px;
cursor: pointer;
}
li:hover a {
color: gold;
font-size: 18px;
}
<body>
<header>
<ul class="parent-ul">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Services</li>
<li>Products</li>
</ul>
</header>
</body>
You need to set its display property so that it accepts height and width of the element.
Try this
<li style="display:inline-block;width: 130px; height: 38px;">Home</li>
I give it a try with a different approach. Instead of changing the fontsize, you could scale the text (which is wrapped with <span></span> tag). Take a look at this https://jsbin.com/fekihusasi/edit?html,css,output.
You can use, Transform: scale(1.3 , 1.3); for the text when you hover on it.
take a look at this: https://plnkr.co/edit/JG3Y1PmLJK2hiL8JNGSy
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: royalblue;
font-family: monospace;
}
header {
position: relative;
margin: 0 auto;
height: 38px;
width: 100%;
background: red;
}
.parent-ul {
list-style: none;
text-align: center;
}
.parent-ul li {
width: 18%;
display: inline-block;
transition: background 1s, border 1s, border-radius 1s;
}
.parent-ul a {
text-decoration: none;
color: white;
padding: 0;
font-size: 14px;
transition: all .3s linear;
line-height: 38px;
}
/* Effects ================================ */
li:hover {
background: black;
border: 0;
border-radius: 2px;
cursor: pointer;
transition: all .3s linear;
}
li:hover a {
color: gold;
display: block;
transition: all .3s linear;
transform: scale(1.3, 1.3);
-ms-transform: scale(1.3, 1.3);
-webkit-transform: scale(1.3, 1.3);
}
In my css I have the following :
style.css
* {
margin: 0;
padding: 0;
}
body {
width: 100%;
font-family: 'Cabin', sans-serif;
}
/*.clear {
clear: both;
}*/
.clear:after {
display: block;
clear: both;
visibility: hidden;
content: "";
height: 0;
}
/* HEADER BLOCK */
.header-background {
padding-top: 50px;
}
.header-background > div:first-child {
width: 100%;
background: #232323;
}
.header {
background: #232323;
color: #B2B2B2;
width: 80%;
margin: auto;
}
.header a {
text-decoration: none;
color: white;
}
.header a:active {
color: #19A3A3;
}
#nav {
position: relative;
display: block;
height: 55px;
line-height: 55px;
width: 100%;
max-width: none;
margin: 0;
background: #333;
z-index: 1;
border-bottom: 1px solid #666;
font-weight: 600;
font-family: helvetica, arial, sans-serif;
font-size: 14px;
}
#nav, #nav * {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.nav-item {
color: #fff;
text-transform: uppercase;
text-decoration: none;
}
/* Desktop */
#desktop-nav .nav-item {
display: block;
padding: 0 20px;
float: right;
-webkit-transition: color 200ms linear;
-moz-transition: color 200ms linear;
-ms-transition: color 200ms linear;
-o-transition: color 200ms linear;
transition: color 200ms linear;
}
#desktop-nav .nav-item:hover, #desktop-nav .nav-item:active {
opacity: 0.7;
}
And I have the following html:
<body>
<div class="header-background">
<!-- <div> -->
<div id="nav">
<nav id="desktop-nav">
<a class="nav-item" href="#1">Github</a>
<a class="nav-item" href="#2">About</a>
<a class="nav-item" href="#3">Community</a>
<a class="nav-item" href="#4">Docs</a>
</nav>
</div>
</div>
</body>
Now I am getting the view:--
But I want the view like :--
The menu should be in the middle. I have used text-align: center; but it is not executing. What I am doing wrong?
Change this
#nav {
margin: 0 auto; //added this
width: 400px; //added this
position: relative;
display: block;
height: 55px;
line-height: 55px;
max-width: none;
background: #333;
z-index: 1;
border-bottom: 1px solid #666;
font-weight: 600;
font-family: helvetica, arial, sans-serif;
font-size: 14px;
}
Fiddle: https://jsfiddle.net/fuehunfz/
Currently the #desktop-nav is centered but it's 100% wide so you need to shrink-wrap it by making it inline-block.
Then text-align:center on the #nav` will center it.
#nav {
text-align: center;
}
#desktop-nav {
display: inline-block;
}
JSfiddle Demo
Use following CSS Style in CSS class
margin: 0 auto;
I would like to see my menu links.
I have implemented a CSS dropdown menu using the checkbox hack.
I have attached an icon to the bottom of the menu. When triggered, the menu drags the icon down along with it.
However, the icon's "margin" (according to dev tools) covers the entire width of the menu, such that the only way to display the links in the menu is to make the menu drop down significantly lower, changing:
#navbar-checkbox:checked + .menu ul {
max-height: 50px; ==============> 75px
z-index: 3;
}
I have tried just about everything I can think of: from z-index, to all kinds of positions, to transparent to opacity etc.
I simply want to display the links.
body {
background-color: purple;
}
.menu {
padding: 15px 15px 0px 15px;
background: transparent;
min-height: 2.75em;
line-height: 0em;
border-bottom: 1px solid white;
position: relative;
}
.logo {
color: white;
transition: 0.4s ease-in-out;
}
#logo {
background-image: url("http://www.rocstarr.com/Tipapalooza/files/tipapalooza-icon-100x100.png");
background-repeat: no-repeat;
background-color: transparent;
background-size: 80%;
display: block;
margin-top: 35px;
margin-bottom: -10px;
height: 50px;
width: 50px;
transition: 0.4s ease-in-out;
z-index: 2;
}
.logo:hover {
color: mediumturquoise;
transition: 0.4s ease;
}
.menu .logo div {
position: absolute;
width: 200px;
margin-top: -20px;
}
.logo p {
margin-left: 15px;
margin-top: 35px;
font-size: 20px;
font-weight: 800;
font-family: 'Coustard', serif;
}
.menu ul {
font-family: 'Open Sans', sans-serif;
color: white;
transition: max-height 0.4s linear 0;
margin: 0;
padding: 0;
text-align: right;
}
.menu a {
text-decoration: none;
color: white;
transition: 0.4s ease-in-out;
}
.menu a:hover {
color: black;
transition: 0.4s ease-in-out;
}
.menu li {
display: inline-block;
padding: .45em 1.1em;
}
#media(max-width:321px){
#logo {
margin-left: 5%;
}
}
#media (min-width: 0px) {
.menu ul {
max-height: 0;
overflow: hidden;
}
.menu li {
visibility: visible;
display: inline-block;
padding: 4em 0 0.5em;
border: none;
margin-right: 4px;
}
.menu .navbar-handle {
display: block;
}
#navbar-checkbox:checked + .menu ul {
max-height: 50px;
z-index: 3;
}
#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: white;
}
}
.navbar-handle {
display: none;
cursor: pointer;
position: relative;
font-size: 45px;
padding: .5em 0;
height: 0;
width: 1.6666666666666667em;
border-top: 0.13333333333333333em solid;
}
.navbar-handle:before,
.navbar-handle:after {
position: absolute;
left: 0;
right: 0;
content: ' ';
border-top: 0.13333333333333333em solid;
}
.navbar-handle:before {
top: 0.37777777777777777em;
}
.navbar-handle:after {
top: 0.8888888888888888em;
}
.menu {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.menu .navbar-handle {
position: absolute;
font-size: 1.2em;
top: 1.3em;
color: white;
right: 25px;
z-index: 10;
}
.navbar-checkbox {
display: none;
}
<input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">
<nav class="menu">
<a class="logo" href="http://myapp.com">
<div class="logo">
<p>myapp.com</p>
</div>
</a>
<ul>
<li>how it works
</li>
<li>about us
</li>
<li>contact
</li>
</ul>
<p id="logo"></p>
<label for="navbar-checkbox" class="navbar-handle"></label>
</nav>
Inorder to see the links visible just try to adjust the padding of .menu li padding: 4em 0 0.6em; to padding: 2em 0 0.6em;
here are corrections:
put these before
<p id="logo"></p>
<label for="navbar-checkbox" class="navbar-handle"></label>
<ul></ul>
these style must be added and edited
#logo {float: left;}
#navbar-checkbox:checked + .menu ul {
max-height: 75px;}
My advice:
#navbar-checkbox:checked + .menu ul {
display: block;
}
#navbar-checkbox + .menu ul {
display: none;
}
Do not use height as parameter.