I am trying to make my navigation bar scroll with the website so it is visible at all times.
When testing this locally, it works perfectly for mobile and desktop. However, when I published this code live on my website the nav bar doesn't follow the scroll (only on mobile). I thought I was missing the position:sticky attribute below the media tag, but that didn't seem to fix it either. Any help anyone can offer would be great, I'm very new to this so I might be missing something obvious. Also if there is an easier way to do this entirely, let me know.
Here's my CSS and HTML:
.nav-toggle{
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: auto;
min-height: 4rem;
line-height: 4rem;
position: sticky;
top: 0;
display:block;
width: 100%;
background-color: #ffffff;
z-index: 2;
}
.links{
float: right;
background-color: #ffffff;
padding-right: 69px;
}
.links a{
text-decoration: none;
font-family: 'Open Sans', sans-serif;
color:#58606C;
line-height: 4rem;
}
label {
font-size: 26px;
line-height: 70px;
margin-right: 40px;
display: none;
color: #63C3EF;
}
#toggle{
display: none;
}
.logo-mobile {
display: block;
float: left;
width: 48px;
margin-left:120px;
line-height: 4rem;
}
#media only screen and (max-width: 700px) {
.nav-toggle{
position: sticky;
top: 0;
}
label {
display: block;
cursor: pointer;
width: 26px;
float: right;
margin-right: 15px;
}
.logo-mobile{
width: 35px;
height: 35px;
line-height: 4rem;
display: block;
float: left;
margin-left: 15px;
padding-top: 15px;
}
.links{
text-align: center;
width: 100%;
display: none;
padding-right: 0;
}
.links a {
clear: right;
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
.links .current { /*the state when the link is active*/
color: #63C3EF;
}
}
#toggle:checked + .links {
display: block;
}
<div class="nav-toggle">
<img src="images/logom#2x.png" alt="KM">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="links">
Work
About
</div>
</div>
Related
My drop down navigation in the 1st and 2nd media queries just cover the hero image instead of pushing the hero image down, also the width of the drop down is suspiciously small. I have a working example on a different website I made, but I can't figure the difference that causes it to break on this one. I hope someone knows what is causing this and/or how to fix it. Here is the code:
*{
font-family: 'Zilla Slab';
}
nav ul li a {
margin-left: 5%;
text-decoration: none;
color: rgb(219,183,86);
font-weight: bold;
}
nav ul li {
display: inline;
list-style-type: none;
width: 100%;
margin-bottom: 20%;
}
nav {
position: absolute;
top: 70px;
right: 2px;
width: 550px;
height: 10px;
}
#hamburger, label {
display: none;
}
h1{
color: rgb(219,183,86);
}
.infobox {
width: 35%;
float: left;
margin: 2%;
}
.button {
width: 180px;
height: 180px;
}
.button a{
text-decoration: none;
font-weight: bold;
font-size: 1.4em;
color: rgb(219,183,86);
}
.button a p{
position: relative;
top: -25px;
}
.button img{
width: 120px;
height: 120px;
}
#buttons{
float: left;
margin-left: 5%;
}
#header{
text-align: center;
position: absolute;
top: -10px;
left: 2px;
width: 550px;
height: 10px;
}
#logo{
float: left;
width: 240px;
height: 175px;
position: absolute;
right: 315px;
}
#logoname{
font-size: 35px;
color: rgb(219,183,86);
font-weight: bold;
position: relative;
top: 35px;
left: 130px;
}
#content{
text-align: center;
width: 100%;
margin: auto;
}
#hero{
margin: 0;
width: 100%;
margin-top: 180px;
}
#footer{
clear: both;
float: none;
font-style: italic;
text-align: center;
margin-bottom: 2%;
color: ;
}
#media screen and (max-width: 1088px) and (min-width: 705px){
#buttons{
float: none;
clear: both;
width: 100%;
margin-left: 1%;
}
.button{
text-align: center;
display: inline-block;
}
/* Menu Items */
/* Menu Items */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
padding: 1%;
box-sizing: border-box;
margin-bottom: 10px;
}
nav ul li a {
text-decoration: none;
}
/* Show Hamburger */
label {
display: block;
position: absolute;
top: -45px;
right: 20px;
color: white;
color: rgb(219,183,86);
font-style: normal;
font-size: 3.5em;
padding: 3%;
font-weight: bold;
}
/* Break down menu items into vertical */
nav ul li {
display: block;
}
nav ul li {
border-top: solid grey 1px;
}
/* Toggle show/hide menu on checkbox click */
nav ul {
display: none;
}
nav input:checked ~ ul {
display: block;
}
.infobox {
width: 46%;
}
}
#media screen and (max-width: 704px) {
.infobox {
width: 96%;
}
#buttons{
float: none;
display: block;
clear: both;
margin-left: 33%;
}
#logo{
float: left;
width: 160px;
height: 110px;
right: 390px;
}
#logoname{
font-size: 20px;
color: rgb(219,183,86);
font-weight: bold;
position: relative;
top: 20px;
left: -10px;
}
/* Menu Items */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
padding: 1%;
box-sizing: border-box;
margin-bottom: 10px;
}
nav ul li a {
text-decoration: none;
}
/* Show Hamburger */
label {
display: block;
position: absolute;
top: -80px;
right: 20px;
color: white;
color: rgb(219,183,86);
font-style: normal;
font-size: 3.5em;
padding: 3%;
font-weight: bold;
}
/* Break down menu items into vertical */
nav ul li {
display: block;
}
nav ul li {
border-top: solid grey 1px;
}
/* Toggle show/hide menu on checkbox click */
nav ul {
display: none;
}
nav input:checked ~ ul {
display: block;
}
#hero{
margin-top: 110px;
}
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zilla+Slab&display=swap" rel="stylesheet">
<div id="container">
<div id="header"><img id="logo" src="https://cdn.discordapp.com/attachments/644747093558165514/974882993036472370/logo.png" alt="logo" /><p id="logoname">Bizzy B's TUMBLEBUS</p></div>
<nav>
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<ul>
<li>Home</li>
<li>About</li>
<li>Parties</li>
<li>Policies</li>
<li>Inside</li>
<li>Contact</li>
</ul>
</nav>
<div id="content">
<img id="hero" src="https://cdn.discordapp.com/attachments/644747093558165514/974882992591884348/hero.png" alt="hero" />
<h1>Welcome to the TUMBLEBUS </h1>
<div class="infobox">
<p> The TUMBLEBUS is a full sized school bus that has been converted into a safe and fun child sized
gym bringing fitness and fun to your children.
The TUMBLEBUS is equipped with tumbling and climbing equipment including monkey bars, trampoline, bars,
beam, vault, zip line, rings, slide and lots more!
</p>
</div>
<div class="infobox">
<p>We are excited that you
have decided to take the time
to tumble through to learn
about TUMBLEBUS. We have a
unique and fun way to keep your
little ones happy and fit. We would
love to come to your child's daycare,
school, birthday or special event.
Please contact us to learn more about how we can buzz the fun to your little one!
</p>
</div>
<div id="buttons">
<div class="button"><img src="https://cdn.discordapp.com/attachments/644747093558165514/974882993955041290/enroll.png" alt="enroll" /><p>Enroll</p></div>
<div class="button"><img src="https://cdn.discordapp.com/attachments/644747093558165514/974882993661427742/pay.png" alt="pay" /><p>Pay</p></div>
<div class="button"><img src="https://cdn.discordapp.com/attachments/644747093558165514/974882993430732810/order.png" alt="order" /><p>Order</p></div>
</div>
<div id="footer">
<p>TUMBLEBUS<br/>
11230 Triple Crown Drive<br/>
Flint TX 75762
</p>
</div>
</div>
</div>
I guess The problem is caused by position : absolute
try to delete position : absolute or add position :relativeto your nav .
Tell me what happens
Update : the problem was caused by #header{ position : absolute ; }
Removing it solved the problem.
I am trying to create a navbar in pure html/css that at less than 600px width is horizontal with a horizontal set of links inline (no bullet points). At more than 600px width, I want a vertical navbar with a vertical list.
However, my horizontal version keeps giving me a vertically stacked set with bullet points and my vertical version has the word 'links' inline with 'paragraph' when I want it underneath.
I'm at a fault to see what I'm doing wrong. I tried scrubbing it out and starting again which worked until I put in my media query and it all went wrong again. Any help appreciated.
<header>
<nav id="navbar">
<h1>HTML Basics</h1>
<ul>
<li>Documents</li>
<li>Headings</li>
<li>Paragraph</li>
<li>Links</li>
<li>Images</li>
</ul>
</nav>
</header>
#navbar{
background: red;
width: 100%;
height: 20%;
margin: auto;
position: fixed;
display: inline;
float: top;
top: 0;
left: 0;
}
#media screen and (min-width:600px){
#navbar{
background: red;
width: 22%;
height: 100%;
margin: auto;
position: fixed;
display: block;
top: 0;
left: 0;
}
li{
list-style: none;
padding-right: 20px;
padding-bottom: 20px;
display: inline-block;
margin-left: 10%;
float: left;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 12px;
}
#media only screen and (min-width:600px){
li{
list-style-type: none;
display: block;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 20px;
}
}
li:hover{
color:#911f32;
font-size: 18px;
}
You're missing a closing curly brace in your first Media Query. Try this:
#navbar {
background: red;
width: 100%;
height: 20%;
margin: auto;
position: fixed;
display: inline;
float: top;
top: 0;
left: 0;
}
#media screen and (min-width:600px) {
#navbar {
background: red;
width: 22%;
height: 100%;
margin: auto;
position: fixed;
display: block;
top: 0;
left: 0;
} // <-- NOTE! This curly brace was missing...
}
li {
list-style: none;
padding-right: 20px;
padding-bottom: 20px;
display: inline-block;
margin-left: 10%;
float: left;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 12px;
}
#media only screen and (min-width:600px){
li {
list-style-type: none;
display: block;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 20px;
}
}
li:hover{
color: #911f32;
font-size: 18px;
}
You had some errors in there:
You used min-width both times instead of min/max
For the horizontal version you need to allow full width (100%)
You forgot a closing curly brace
There is no float: top; (but that has no effect anyway)
#navbar {
background: red;
width: 100%;
height: 20%;
margin: auto;
position: fixed;
display: inline;
top: 0;
left: 0;
}
#media screen and (max-width:600px) {
#navbar {
background: red;
margin: auto;
position: fixed;
display: block;
top: 0;
left: 0;
}
li {
list-style-type: none;
padding-right: 20px;
padding-bottom: 20px;
display: inline-block;
margin-left: 10%;
float: left;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 12px;
}
}
#media only screen and (min-width:600px) {
#navbar {
width: 20%;
height: 100%;
}
li {
list-style-type: none;
display: block;
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 20px;
}
}
li:hover {
color: #911f32;
font-size: 18px;
}
<header>
<nav id="navbar">
<h1>HTML Basics</h1>
<ul>
<li>Documents</li>
<li>Headings</li>
<li>Paragraph</li>
<li>Links</li>
<li>Images</li>
</ul>
</nav>
</header>
Add style for your list-item element (600px and down).
Comment unnecessary style (600px and up).
Look at CSS code below.
#navbar{
/* ... */
}
/* === Add this code */
li {
list-style-type: none;
display: inline-block;
}
#media screen and (min-width:600px){
#navbar {
/* ... */
}
/* ===
You don't need
"display: inline-block" and
"float: left"
*/
li {
list-style: none;
padding-right: 20px;
padding-bottom: 20px;
/* display: inline-block; */
margin-left: 10%;
/* float: left; */
font-family: 'Nunito Sans', sans-serif;
text-decoration: none;
font-size: 12px;
}
/*...*/
I am trying to set up the footer, but I'm unable to remove the lines under the text. I also would like to change the color of the text. I tried using text decoration:none under .footer ul, but that was unsuccessful.
h2 {
text-align: center;
font-family: "Courier New";
color: beige;
font-size: 50px;
font-weight: 200;
text-shadow: -2px -2px black;
margin-bottom: -50px;
position: relative;
}
.head-link {
text-decoration: none;
color: aliceblue;
}
.head-link:hover {
margin: 20px auto 20px;
position: relative;
color: darkgoldenrod;
}
header {
background-image: url(https://i.imgur.com/xD3POCF.jpg);
position: absolute;
background-position: center;
max-width: 2000px;
width: 100%;
height: 100%;
top: 0;
background-repeat: no-repeat;
background-size: cover;
display: inline-block;
bottom: 40px;
}
.header-image {
background-size: cover;
}
.dropbtn {
background-color: transparent;
color: darkblue;
padding: 10px;
cursor: pointer;
font-family: monospace;
top: 0;
font-size: 15px;
width: 120px;
height: 50px;
border-color: black;
border-style: double;
align-content: center;
text-align: center;
margin-top: -10px;
}
.dropdown {
display: inline-block;
position: relative;
margin-left: 15px;
}
.dropdown-content {
padding: 12px;
position: absolute;
font-family: monospace;
background-color: transparent;
z-index: 1;
display: none;
min-width: 10px;
text-align: left;
left: 0;
}
.dropbtn:hover {
color: white;
}
.dropdown-content a {
color: #04116f;
padding: 12px 16px;
text-decoration: none;
display: block;
font-size: 13px;
}
.dropdown-content a:hover {
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
text-decoration: underline;
}
.sidebar {
display: block;
position: relative;
top: -650px;
bottom: 0px;
left: -30px;
width: 120px;
padding: 10px;
background: transparent;
z-index: 0;
}
.sidebar ul {
cursor: pointer;
list-style: none;
color: white;
line-height: 2;
}
body {
margin: 0px;
top: 0;
width: 100%;
max-height: 10%;
background-image: url(http://i.imgur.com/yiMoYpV.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 20px 50px center;
background-attachment: fixed;
}
.content {
display: block;
margin-right: 0px;
padding: 0px;
margin-bottom: 700px;
position: relative;
max-width: 1500px;
max-height: 500px;
}
p {
display: block;
padding: 40px;
position: relative;
max-width: 500px;
max-height: 500px;
width: 100%;
left: 50%;
height: 200px;
top: 120px;
font-family: monospace;
font-size: 15px;
line-height: 2;
margin-bottom: -70px;
color: goldenrod;
text-align: left;
}
.footer {
margin: 100px 0 0 0;
display: flex;
flex-flow: row;
justify-content: center;
padding-bottom: 2px;
align-content: space-between;
background: transparent;
overflow: hidden;
}
.footer ul {
text-align: center;
list-style: none;
display: inline-flex;
color: white;
text-decoration: none;
}
<!DOCTYPE html>
<html>
<header>
<h2 style="bottom: -130px">
<a href="#" class=h ead-link> A B E L</a>
</h2>
<div class="dropdown" style="float;right">
<button class="dropbtn">Menu</button>
<div class="dropdown-content" style="right;0">
About
Portfolio
Contact
</div>
</div>
<div class="title"></div>
<title>A B E L </title>
</header>
<body>
<div id="hl-content" class="content"></div>
<p>
<span style="color:navajowhite">
<b>Hello, Welcome to my website.</b>
</span>
<BR></BR>
My name is Abel, a senior college student currently residing in the Bay Area. This portfolio will give you a good background about me including my specialties, expertise and even hobbies. As you can probably tell from the background pictures, I like traveling
and taking photos!
</p>
<p>This is my first ever website that I created using HTML and CSS, and it's a pleasure to finally be able to share it with you. I am happy to receive any feedback, recommendations or opportunities from you, so don't hesitate to contact me.</p>
<div class="footer">
<ul>
<li> About</li>
<li>Portfolio</li>
<li> Contact </li>
</ul>
</div>
</body>
</html>
As you can see text decoration and color doesn't work.
How can I fix this?
.footer > ul > li > a {
color: white;
text-decoration: none;
}
Try this.
You need to style the links in your footer explicitly.
.footer ul a {
text-decoration:none;
}
You need to add this css :
.footer ul li a {
text-decoration:none;
}
I've tried my best, this might help as per your requirement(underline and color):
add this in your code,
.footer ul li a {
text-decoration: none;
color: tan;
padding: 5px;
}
.footer ul li a:hover {
text-decoration: underline;
}
appreciate if it is useful enough.
I'm having a strange CSS problem where the main div container on my website shifts to the right when I visit certain pages. This happens even though there is no specific CSS rule to move it
I've uploaded a temp version of my site here:
http://myawesometestsite.ddns.net/
When you go to the Publications and Contact page the entire container shifts to the right by a few pixels. The position appears to be correct and unshifted on all other pages
This is the full CSS I'm using:
body {
background-color: #dcd8cf;
font-family: Raleway, Arial, sans-serif;
font-size: 1em;
}
h1 {
font-size: 1.5em;
color: #832C00;
margin-bottom: 30px;
}
h2 {
font-size: 1.2em;
color: #832C00;
margin-top: 30px;
}
h3 {
font-size: 1em;
margin-bottom: 5px;
margin-top: 20px;
}
h4 {
font-size: 1em;
font-style: italic;
margin-top: 0px;
margin-left: 10px;
margin-bottom: 5px;
}
.container {
position: relative;
left: 50%;
margin-left: -470px;
width: 940px;
border: 1px solid black;
}
/*
Header
*/
header {
position: relative;
display: inline-block;
width: 100%;
height: 180px;
background-color: #a63700;
}
header h1 {
position: absolute;
font-size: 2.5em;
color: #e6e6dc;
top: 50px;
left: 100px;
margin: 0px;
}
header h2 {
position: absolute;
font-size: 0.77em;
color: #e6e6dc;
top: 100px;
left: 100px;
margin: 0px;
opacity: 0.7;
}
header img {
border: 2px solid #e6e6dc;
border-radius: 50%;
max-width: 100%;
max-height: 100%;
}
.profileImage {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
max-width: 150px;
max-height: 150px;
}
.skillIcons {
position: absolute;
right: 25px;
top: 15px;
}
.skillIcons img {
display: inline;
width: 75px;
height: 75px;
padding: 5px;
margin: 15px;
opacity: 0.7;
}
/*
Navigation menu
*/
nav {
position: relative;
z-index: 1;
text-align: center;
letter-spacing: 2px;
background-color: #a63700;
height: 50px;
width: 100%;
}
nav a {
position: relative;
top: 20px;
color: #D1D1C9;
text-decoration: none;
padding: 0 30px;
}
nav a:hover {
border-bottom: solid 1px #e6e6dc;
padding-bottom: 3px;
}
.navSelected {
text-shadow:0px 0px 1px white;
color: white;
}
/*
Main content
*/
main {
position: relative;
background-color: white;
padding: 10px;
}
/*
Footer
*/
footer {
position: relative;
color: #e6e6dc;
background-color: #a63700;
font-size: 10pt;
padding: 10px;
}
.leftFooter ul {
padding-left: 0px;
}
.leftFooter li {
display: inline;
list-style-type: none;
}
.leftFooter li a {
color: #e6e6dc;
text-decoration: none;
}
.leftFooter li + li:before {
color: #e6e6dc;
content: "|";
padding: 10px;
}
.rightFooter {
position: absolute;
right: 10px;
top: 4px;
}
.rightFooter img {
display: inline;
max-width: 30px;
max-height: 30px;
vertical-align: middle;
margin-top: -3px;
}
.copyright {
font-size: 1em;
}
/*
Home page
*/
/*
Publications page
*/
.hangingIndent {
padding-left: 1.5em;
text-indent:-1.5em;
}
.publications h2 {
margin-top: 50px;
}
/*
Code page
*/
.codeProjects a {
color: #a63700;
text-decoration: none;
}
.codeProjects a:hover {
text-decoration: underline;
}
.codeProjects p {
margin-left: 10px;
}
/*
CV page
*/
.cvContainer {
width: 90%;
margin: 0 auto;
}
.cvEntry {
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
}
.sectionHeading {
width: 100%;
border-bottom: 1px solid #000;
}
.alignLeft {
display: block;
float: left;
text-align: left;
width: 80%;
margin-top: 10px;
}
.alignLeft p {
font-size: 1em;
}
.alignLeftSub {
margin-top: -10px;
margin-left: 20px;
}
.alignRight {
display: block;
float: right;
text-align: right;
width: 20%;
margin-top: 10px;
}
.clear {
clear: both;
}
/*
Contact page
*/
.contactInfo {
margin-left: 20px;
}
.contactInfo img {
display: inline;
max-width: 30px;
max-height: 30px;
vertical-align: middle;
}
.emailHidden {
display: none;
}
.contactInfo a {
margin-left: 5px;
color: #a63700;
text-decoration: none;
}
.contactInfo #emailAddress {
margin-left: 2px;
}
.contactInfo #emailAddress a {
margin-left: 8px;
}
/*
Media queries
*/
#media screen and (max-width : 940px) {
.container {
position: relative;
left: 0px;
margin: 0px;
width: 100%;
}
header h1 {
left: 5%;
margin: 0px;
}
header h2 {
left: 5%;
margin: 0px;
}
.skillIcons img {
max-width: 70px;
max-height: 70px;
margin-left: 5px;
margin-right: 0px;
}
}
#media screen and (max-width : 800px) {
header h1 {
display: none;
}
header h2 {
display: none;
}
.skillIcons img {
display: none;
}
nav {
height: 150px;
}
nav a {
display: block;
}
nav a:hover {
border-bottom: none;
padding-bottom: 0px;
}
}
#media screen and (max-width : 600px) {
.rightFooter {
position: relative;
display: block;
margin-left: 10px;
}
}
I don't believe there's anything in here that's causing the container to shift for just those 2 pages but maybe I'm missing something. Anyone have any idea whats causing this?
Add "overflow-y: scroll;" to your "body" selector. It should look like this in your CSS:
body {
background-color: #dcd8cf;
font-family: Raleway, Arial, sans-serif;
font-size: 1em;
overflow-y: scroll;
}
The lenght of the pages create a vertical scroll bar. Publication and contact are small then the other are more big then the screen. for fix this you need an overflow-y set to scroll;
body {
overflow-y: scroll;
}
I am working on a website but I've got a problem with making the navbar. I have created a navbar but when I want to click on the left ones they aren't clickable and the right ones are.. my question is: How do I fix it I've tried different methodes but I am a noob and hope/think there's a simple solution for this that I don't know about.
Thanks anyways.
CSS:
.navlay{
background-image: url(./img/noise.png);
position: absolute;
width: 80%;
height: 7%;
margin-top: 19.4%;
margin-right:10%;
margin-left:10%;
}
.left {
position: absolute;
width: 80%;
margin-left: 8%;
margin-top: 20.3%;
text-decoration: none;
display: inline;
list-style: none;
font-size: 100%;
font-family: webbie;
font-weight: bold;
}
.right {
position: absolute;
width: 80%;
margin-top: 20.3%;
list-style: none;
text-decoration: none;
display: inline;
font-size: 100%;
font-family: webbie;
font-weight: bold;
}
.left li {
float: left;
padding-left: 3%;
padding-right: 3%;
}
.right li {
float: left;
padding-left: 3%;
padding-right: 3%;
}
.right li:first-child {
float: left;
padding-left: 80%;
padding-right: 3%;
}
.left li a {
color: #949494;
}
.right li a {
color: #949494;
}
.left li a:hover {
opacity: 0.6;
color: #949494;
cursor: pointer;
}
.right li a:hover {
opacity: 0.6;
color: #949494;
cursor: pointer;
}
Image: http://i.imgur.com/lL6MsgD.png
HTML:
<ul class="left">
<li>Home</li>
<li>About</li>
<li>Apply</li>
<li>Team-Members</li>
</ul>
<ul class="right">
<li>Login</li>
<li>Signup</li>
</ul>
You are not able to click on left because of width of right that you have set. You can try following css.
Here's Demo Fiddle
.left {
position: absolute;
width: 50%;
margin-left: 8%;
margin-top: 20.3%;
text-decoration: none;
display: inline;
list-style: none;
font-size: 100%;
font-family: webbie;
font-weight: bold;
z-index: 1;
}
.right {
position: absolute;
width: 80%;
margin-top: 20.3%;
list-style: none;
text-decoration: none;
display: inline;
font-size: 100%;
font-family: webbie;
font-weight: bold;
}
.right li:first-child {
float: left;
padding-left: 80%;
padding-right: 3%;
z-index: 2;
}