I am trying to get an image for the navbar of my page to link back to my site's homepage. I have tried using the code below, but for some reason only the top of the image is clickable. I have inspected it and tried for ages but I cannot find anything that looks out of place or has incorrect syntax.
Is there anything I can do to fix this problem?
nav {
height: 85px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: none;
padding-left: 60px;
padding-right: 60px;
user-select: none;
transition: 0.5s ease-in-out;
z-index: 100;
}
nav img {
height: 70px;
margin-top: 5px;
}
nav a:hover {
color: var(--primary) !important;
transition: 0.15s;
}
nav img {
margin: 0px;
}
nav .responsive-nav {
display: none;
}
nav .right {
position: fixed;
top: 27px;
right: 60px;
width: 100%;
text-align: right;
height: 85px;
text-transform: uppercase;
}
nav .right ul {
position: fixed;
top: 27px;
right: 60px;
width: 100%;
height: 85px;
margin-top: 0px;
}
nav .right li {
margin-top: 7px;
}
nav .right a {
text-decoration: none;
color: #ffffff;
font-size: 16px;
margin-left: 20px;
}
nav h1 a {
text-decoration: none;
color: #ffffff;
transition: 0.15s;
}
nav h1 a:hover {
color: var(--primary);
transition: 0.15s;
}
nav .menu {
display: none;
position: fixed;
top: 18px;
right: 30px;
font-size: 25px;
border: 2px solid var(--primary);
border-radius: 5px;
padding: 5px;
color: var(--primary);
cursor: pointer;
}
<nav>
<img src="https://www.gsr-technology.co.uk/wp-content/uploads/2015/10/partner-logo-placeholder.jpg" />
<div class="right">
<ul>
<li>Home</li>
<li>Services</li>
</ul>
</div>
<i class="fas fa-bars menu"></i>
</nav>
In above code nav .right and nav .right ul both have width: 100%; remove that and try it will done and whole image will be clickable.
Related
The navbar I created overlaps when I switch my site to a mobile view.
I tried making it fit-content, but it still overlaps. The part that overlaps is the listed items
#navBar {
overflow: hidden;
text-align: center;
border-top: double black 2px;
}
#navBar ul {
padding: 0;
list-style: none;
width: fit-content;
}
#navBar li {
display: inline;
padding-top: 23px;
position: relative;
}
#navBar a {
font-size: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
border: 4px solid lime;
padding-bottom: 10px;
padding-top: 20px;
padding-left: 10px;
font-family: American Typewriter, serif;
color: #262626;
text-transform: uppercase;
border-radius: 0px 0px 25px 25px;
}
#navBar a:hover {
color: lime;
}
#navBar a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: lime;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
#navBar::hover::before {
width: 100%;
}
<nav id="navBar">
<div class="bar">
<ul>
<li>Tab1</li>
<li>Tab2 </li>
<li> Tab3</li>
</ul>
</div>
</nav>
I expect the navbar items to be side by side but the actual result in them overlapping.
You can use inline-flex for that
change
#navBar ul {
padding: 0;
margin: 0; /* reset margin */
list-style: none;
width: fit-content;
}
#navBar li {
display: inline-flex; /* change to inline-flex and remove the padding */
position: relative;
}
#navBar {
overflow: hidden;
text-align: center;
border-top: double black 2px;
}
#navBar ul {
padding: 0;
margin: 0;
list-style: none;
width: fit-content;
}
#navBar li {
display: inline-flex;
position: relative;
}
#navBar a {
font-size: 20px;
padding-right: 20px;
text-decoration: none;
text-align: center;
border: 4px solid lime;
padding-bottom: 10px;
padding-top: 20px;
padding-left: 10px;
font-family: American Typewriter, serif;
color: #262626;
text-transform: uppercase;
border-radius: 0px 0px 25px 25px;
}
#navBar a:hover {
color: lime;
}
#navBar a::before {
content: '';
display: block;
height: 5px;
width: 100%;
background-color: lime;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
#navBar::hover::before {
width: 100%;
}
<nav id="navBar">
<div class="bar">
<ul>
<li>Tab1</li>
<li>Tab2 </li>
<li> Tab3</li>
</ul>
</div>
</nav>
You will see in my snippet below that I am trying to turn "Get a Quote" to more of a button style. Anytime I add padding to this element navInverse, it causes run off for the background color to the next line. I am also trying to get the :after effect to not take place with the navInverse object.The after effect currently puts a red line under the button.
If I add the following code to navInverse, it looks like the image below. This is how I want the button padding to appear, minus the overlapping part that gets pushed to the bottom.
Also, I cannot figure out why the navInverse color will not show as white. I have it coded as
color:#FFF;
vertical-align: middle;
padding: 10px 12px;
Does anyone see what I am doing wrong?
Jsfiddle
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 1px 1px #E5E5E5;
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
/*color: #4b4b4b;*/
color: #747678;
letter-spacing: 1px;
vertical-align: middle;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #BE1E2D;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover {
color: #4b4b4b;
transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after {
width: 100%;
transition: width .3s;
}
#navInverse {
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
color: #FFF;
background: linear-gradient(to right bottom, #BE1E2D, #981824);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
<nav>
<div id="nav-logo">
<img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/logoBR.png" alt="MB Kit Systems">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li>SERVICES</li>
<li>DESIGN</li>
<li>CONTACT</li>
<li>GET A QUOTE</li>
</ul>
</div>
</nav>
You need to increase the selector specificity, the regular selector (#nav-list li a) as a specificity of 3, but the override selector (#navInverse) has 1, so it get overridden.
One way to increase your selector specificity is make it #nav-list li a#navInverse.
I'm not sure that this is the result you wanted, but this is works.
nav {
background: #FFF;
height: 70px;
width: 100%;
max-width: 100%;
box-shadow: 1px 1px #E5E5E5;
position: fixed;
top: 0;
z-index: 999;
box-sizing: border-box;
}
#nav-logo {
float: left;
height: 100%;
width: auto;
display: block;
position: relative;
margin-left: 5%;
}
#nav-logo img {
height: 80%;
width: auto;
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
#nav-list li {
display: inline-block;
margin: 0 17px;
}
#nav-list li:first-child {
margin-left: 0px;
}
#nav-list li:last-child {
margin-right: 0px;
}
#nav-list li a {
text-decoration: none;
font-family: 'Muli', sans-serif;
font-size: .9rem;
/*color: #4b4b4b;*/
color: #747678;
letter-spacing: 1px;
vertical-align: middle;
transition: all .3s;
-webkit-transition: all .3s;
}
#nav-list li a:after {
content: '';
display: block;
width: 0;
margin-top: 6px;
background: #BE1E2D;
height: 2px;
transition: width .3s;
}
#nav-list li a:hover {
color: #4b4b4b;
transition: all .3s;
-webkit-transition: all .3s;
}
#nav-list li a:hover:after {
width: 100%;
transition: width .3s;
}
#nav-list li a#navInverse {
border-radius: 2px;
box-sizing: border-box;
font-family: 'Muli', sans-serif;
font-size: 1.4rem;
color: #FFF;
background: linear-gradient(to right bottom, #BE1E2D, #981824);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
#navInverse:after {
content: '';
display: none;
width: 0px;
height: 0px;
transition: none;
}
<nav>
<div id="nav-logo">
<img src="https://s3.us-east-2.amazonaws.com/mbkitsystems/logoBR.png" alt="MB Kit Systems">
</div>
<div id="mobile-button"><img src="" class="hidden" alt=""></div>
<div id="nav-pop">
<div id="nav-pop-close"></div>
<ul id="nav-list">
<li>ABOUT</li>
<li>SERVICES</li>
<li>DESIGN</li>
<li>CONTACT</li>
<li>GET A QUOTE</li>
</ul>
</div>
</nav>
I'm having trouble with the header div of this website I'm making. There is padding or something appearing underneath my horizontal menu bar even though my padding is set to 0. I know that similar posts have been made about the but I have read quite a few and none of the answers seemed to do the trick for me. I have changed the background of the header div to yellow to make it more visible. There is also a pixel or two on either side of the menu bar which are unwanted. I'll put my css and html code below. screenshot
<div class="big header">
<img src="Images/headerphoto.jpg" alt="header_photo">
<div class="navbar">
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<ul class="logo">
<li><a class="logo" href="http://www.linkedin.com"><img alt="in" src="Images/linkedinlogo.png"></a></li>
<li><a class="logo" href="http://www.facebook.com"><img alt="fb" src="Images/facebooklogo.png"></a></li>
<li><a class="logo" href="http://www.twitter.com"><img alt="tw" src="Images/twitterlogo.png"></a></li>
<li><a class="logo" href="http://www.rss.com"><img alt="rs" src="Images/rsslogo.png"></a></li>
</ul>
</ul>
And here is the relevant CSS. (The 'Big' class is what I'm using for all the major elements on the page.)
body {
background-image:url("Images/background.png");
background:tile;
}
.header img {
width: 100%;
}
.header {
background-color: yellow;
height: auto;
padding-top: 30px;
padding-left: 0px;
padding-bottom: 0px;
margin-top: 10px;
}
.big {
width: 80%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 0px 20px #C5C5C5;
}
Here is the css for my navbar.
.button {
background-color: #3EB5F5;
border: none;
color: white;
transition: all 0.5s;
cursor: pointer;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.navbar {
width: 100%;
margin-top: 15px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
.navbar ul {
list-style-type: none;
margin: 0px;
padding: 0;
overflow: hidden;
background-color: #828080;
height: 38px;
}
.navbar li {
float: left;
}
.navbar li a[href$=".asp"]{
display: block;
color: white;
text-align: center;
padding: 16px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
height: 100%;
}
.navbar li a[href^="http"] {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
.navbar li a:hover {
background-color: #111;
}
.logo img {
width: 25px;
}
.logo {
float:right;
list-style-type:none;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
}
.active {
background-color: #106AAA
}
I have added an example to show http://codepen.io/simondavies/pen/jWjoBy
It working please check out the css, html etc
I have guestimated some stuff... Hope it will be a help
<div class="big header">
<div class="header-img"><img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=1000%C3%97150&w=1000&h=150" alt="header_photo"></div>
<div class="navbar">
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<li><!--<ul class="logo"></ul>--></li>
</ul>
</div>
</div>
CSS
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background-color: yellow;
height: auto;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header-img{
width: 100%;
height: 150px;
padding: 30px 0 15px 0;
margin: 0;
}
.header-img img {
width: 100%;
height: 150px;
padding: 0;
margin: 0;
}
.big {
margin: 0 auto;
padding: 0;
margin-top: 10px;
width: 80%;
box-shadow: 0px 0px 20px #C5C5C5;
}
.button {
background-color: #3EB5F5;
border: none;
color: white;
transition: all 0.5s;
cursor: pointer;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.navbar {
width: 100%;
margin: 0;
padding: 0;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #828080;
height: 38px;
}
.navbar li {
float: left;
}
.navbar li a[href$=".asp"] {
display: block;
color: white;
text-align: center;
padding: 16px;
padding-bottom: 10px;
padding-top: 10px;
text-decoration: none;
height: 100%;
}
.navbar li a[href^="http"] {
padding-top: 6px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 5px;
}
.navbar li a:hover {
background-color: #111;
}
.logo img {
width: 25px;
}
.logo {
float: right;
list-style-type: none;
padding-bottom: 0px;
padding-top: 0px;
vertical-align: middle;
}
.active {
background-color: #106AAA
}
You have an error in your HTML:
<ul>
<li><a class="active" href="default.asp">Home</a></li>
<li>Contact</li>
<li>About Us</li>
<ul class="logo">
The only descendants of either <ul> or <ol> should be <li>. It is possible that this could be the issue.
I corrected the markup in two ways, without reproducing your issue:
By wrapping <ul class="logo"> inside of an <li> (essentially assuming it was a sublist in your list
By closing your first <ul>, and then letting the second list sit adjacent to it
But I also could not reproduce your issue by leaving the markup alone
So, the issue may be:
You need to use a CSS reset to remove default margins and paddings that the browser is providing
There is another ruleset that is adding padding to your .header
That other ruleset may have a higher specificity
That other ruleset may have an !important declaration
I wanted to know a few things:
1)How to get the circular profile image on the right-most side to get in the header and not be out of it?
2)How to Align the Last Three Images on the bottom(in "R" class) properly and have spacing between them while keeping care of the cropping?
I am adding a Fiddle here: https://jsfiddle.net/cLbfnu7p/1/
Code:
<div class="header">
<div class="nav-container">
<div class="logo"><img src="Images/logo.png" height="75px" width="auto"></div>
<div class="menu">
<ul class="menu-ul">
<li>Home</li>
<li>Login</li>
<li>Contact</li>
<li>Store</li>
<li>Buy</li>
</ul>
</div>
<div class="user-details">
<div class="profile_pic">
<div class="img_cont_pro">
<img src="Images/pro_pic.png">
</div>
</div>
</div>
</div>
</div>
<div class="section-divider">-<p>STUDIO</p></div>
<div class="showcase">
<div class="R">
<div class="r1"><img src="Images/Random/one.jpg" width="400px" height="auto"></div>
<div class="r1"><img src="Images/Random/two.jpg" width="400px" height="auto"></div>
</div>
<div class="R">
<div class="r2 c"><img src="Images/Random/three.jpg" width="400px" height="225px"></div>
<div class="r2 c2"><img src="Images/Random/four.jpg" width="auto" height="140px"></div>
<div class="r2 c3"><img src="Images/Random/five.jpg" width="auto" height="140px"></div>
</div>
</div>
Edit
html,body{
max-width: 100%;
overflow-x: hidden;
}
body{
//background-image: url("../Images/Design.png");//opacity: 0.4;
background-color: #ededed;
background-size: 1600px auto;
font-family: 'Roboto',sans-serif;
margin: 0;
padding: 0;
}
.header{
background-color: #FFFFFF;
width: 100%;
height: 123px;
text-align: center;
font-family: 'TypographLight';
border-bottom: 1px solid #B0B0B0;
}
.header .logo{
padding: 25px;
padding-left:44px;
float: left;
}
.header .menu li{
display: inline;
}
.header .menu a:hover{
color: #000000;
text-decoration: underline;
}
.header .menu{
display: inline-block;
margin-right: 230px;
}
.header ul {
padding: 10px;
margin-top: 0px;
}
.header .menu a {
color: #777777;
font-size: 23px;
text-decoration: none;
line-height: 114px;
padding:11px;
}
.header .menu .active {
color: #000000;
}
.image-slideshow .container-text {
font-family: CodeBold;
color: white;
left: 0;
position: absolute;
top: 34%;
width: 100%;
}
.image-slideshow .container-text .heading{
font-size: 97px;
}
.image-slideshow .container-text .sub-heading{
font-size: 20px;
font-family: 'TypographLight';
}
.container-slide{
position:relative;
text-align:center;
}
.container-slide img{
margin-top: -5px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.image-slideshow .container-text .img-button{
margin-top: 20px;
font-family: 'TypographLight';
background-color:rgba(112,112,112,.7);
border:2px solid #DBDBDB;
color: #FFFFFF;
cursor: pointer;
border-radius: 4px;
outline: none;
width: 150px;
height: 40px;
font-size: 15px;
-webkit-transition:all 0.2s;
transition-timing-function: ease-in;
}
.image-slideshow .container-text .img-button:hover{
background-color:rgba(67,67,67,.7);
-webkit-transition:all 0.2s;
border:2px solid #CDCDCD;
transition-timing-function: ease-out;
}
#font-face{
font-family: TypographLight;
src: url('../Fonts/TYPOGRAPH PRO Light.ttf');
}
#font-face{
font-family: CodeBold;
src: url('../Fonts/CODE Bold.otf');
}
.section-divider{
text-align: center;
font-style: 'Roboto';
font-size: 40px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
margin-top: -7px;
}
.section-divider p{
font-size: 20px;
margin-top: 4px;
}
.showcase{
max-width: 1200px;
text-align: center;
margin: auto;
}
.showcase img{
-webkit-filter:grayscale(40%);
-webkit-transition:all 0.2s;
transition-timing-function: ease-in;
}
.showcase img:hover{
-webkit-filter:grayscale(0%);
-webkit-transition:all 0.2s;
transition-timing-function: ease-in;
}
.r1{
display: inline;
}
.r2{
display: inline;
}
.R{
display: block;
}
.c{
left: 390px;
position: absolute;
margin-top: -50px;
clip:rect(50px,400px,190px,0px);
}
.c2{
position: absolute;
left: 945px;
}
.c3{
position: absolute;
left: 793px;
}
.header .img_cont_pro img{
display: inline;
margin: 0 auto;
height: 150%;
width: auto;
}
.header .img_cont_pro{
width: 40px;
height: 40px;
position: relative;
overflow: hidden;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
float: right;
}
.user-details{
margin-right: 2%;
padding-top: none;
margin-top: none;
overflow: hidden;
}
Thanks A Lot
For number 1 you should move the user-details div block to after the logo but before the menu. I would then make padding-top:40px;.
For both padding and margin you cant use none as that isnt allowed you should use 0 if you dont want it to have any visible margin or padding.
You should be using inspect element developer tools (right click menu in chrome if you're using that) to look at your code and you would see this and get a better understanding of what the code is doing and where its positioning on the page.
Also for your second point why have you made the images in two different divs with class 'R' (you should call your classes better names that make sense and allude to what they do) and in the second div you have used a new class on the images:
.c {
left: 390px;
position: absolute;
margin-top: -50px;
clip: rect(50px,400px,190px,0px);
}
This is whats making them not line up with the top 2 images. Plus r1 and r2 classes are both the same so no need for them unless you plan to add extra styling to one of them.
In regards to the 3rd point not sure what you are asking for. A dropdown menu? Hover styles? On click animations of some kind?
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.