So, my goal is to create a simple navigation bar with centered links/elements. I kinda succeeded... Kinda because when i set the floating option it changes spaces between elements and twitches the text out of position (run the snippet to see the efect).
Wanna have some space between the words, but to stay fixed when floated over or activated/selected.
I tried to make it work with styling only ul and li tags but it didnt work, so i tried placing the li tags into separate divisions. Still no success.
Looked through every possible solution i could think of - adding margins, padding, setting them to auto, looked through similar questions here and around web and i got nothing.
Obviously i'm missing something and i would appreciate your help very much so i can continue working on my website.
Here is the code:
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
margin: 0;
position: fixed;
height: 85px;
width: 100%;
text-align: center;
background-color: #002345;
}
.about {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.portfol {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.cont {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.active {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #fff;
color: #002345;
}
a:hover {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #777;
color: #002345;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PortfolioPage</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<div class="about"> <li>ABOUT ME</li> </div>
<div class="portfol"> <li>PORTFOLIO</li> </div>
<div class="cont"> <li>CONTACT</li> </div>
</ul>
</div>
</header>
</body>
it happens because you have added padding on the :hover state but it is not present in the normale state rule...
a {
padding-left: 15px;
padding-right: 15px;
}
a:hover {
display: block;
/*padding-left: 15px;
padding-right: 15px;*/
background-color: #777;
color: #002345;
}
It is because in your hover class you are adding padding to the a tag, add them by default like the example
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #ccc;
}
.nav ul {
list-style: none;
margin: 0;
position: fixed;
height: 85px;
width: 100%;
text-align: center;
background-color: #002345;
}
.about {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.portfol {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.cont {
font-family: 'Baloo';
font-size: 24px;
color: #fff;
display: inline-block;
line-height: 85px;
height: 85px;
margin-left: 10px;
margin-right: 10px;
}
.active {
display: block;
padding-left: 15px;
padding-right: 15px;
background-color: #fff;
color: #002345;
}
a{
padding-left: 15px;
padding-right: 15px;
}
a:hover {
display: block;
background-color: #777;
color: #002345;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PortfolioPage</title>
</head>
<body>
<header>
<div class="nav">
<ul>
<div class="about"> <li>ABOUT ME</li> </div>
<div class="portfol"> <li>PORTFOLIO</li> </div>
<div class="cont"> <li>CONTACT</li> </div>
</ul>
</div>
</header>
</body>
just remove
padding-left: 15px;
padding-right: 15px;
from
a: hover
Related
I am currently trying to make a website. However, the problem that I am getting is that when I minimize the browser, Yes, it is being responsive, but the text is going over the other components on the website and I am unsure how to work around this issue as I am quite stumped at this error.
Image for more clarification:
Web error
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css" />
<link rel="stylesheet" href="jason.css">
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="main text">
<p>At Virgin Active, we do health and fitness differently. We have expertly crafted exercise experiences
that are the perfect blend of intelligent programming and feel-good movement. We've got everything from
Yoga to HIIT, so you can move your body any
way you want.
</p>
</div>
</div>
<section class="no.1" id="no.1">
<div class="section">
<img src="Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br>
Classes include: Align,Flow and Calm SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
</section>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
</body>
</html>
Css:
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1b1b1b;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: cyan;
}
nav ul ul li a:hover {
color: cyan;
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background {
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
/* USE FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
/* ADD SOME PADDING FOR BETTER UI */
padding-inline: 16px; /* LEFT and Right */
}
.overlay {
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
}
.overlay h3 {
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p {
font-size: 35px;
}
.main h1 {
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text {
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body {
margin: 0;
font-family: sans-serif;
}
.section {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img {
height: 250px;
}
.section h1 {
margin-left: 100px;
color: black;
}
.section p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer {
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social {
text-align: center;
padding-bottom: 25px;
color: #4b4c4d;
}
.footer .social a {
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover {
color: #24262b;
background-color: #ffffff;
}
.footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a {
color: #fff;
text-decoration: none;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
}
.footer .copyright {
margin-top: 15px;
text-align: center;
font-size: 20px;
color: #fff;
}
you can use css media query create responsive web page.
#media only screen and (min-width: 768px) {
.overlay h3 {
font-size: 16px;
}
.overlay p {
font-size: 25px;
}
}
#media only screen and (min-width: 1200px) {
.overlay h3 {
font-size: 22px;
}
.overlay p {
font-size: 40px;
}
}
Another way that is not recommended using viewport width and height
.overlay p {
font-size: 1.5vw;
}
I am having an issue where, when I hover over the navigation bar links, the entire navigation bar's height increases slightly.
I think the red line under each link is causing this to happen, but I am not sure why - could someone tell me what I have done wrong?
Also, I think it has something to do with the height of the red line.
Here is the code:
body {
margin: 0px;
background-color: #bfe6f7;
}
#content {
position: relative;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 60%;
height: auto;
background-color: white;
border-style: solid;
border-width: 3px;
}
.nav{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #ffddb8;
border-style: solid;
border-width: 3px;
margin-top: 18px;
width: 95%;
margin-left: auto;
margin-right: auto;
height: auto;
position: relative;
margin-bottom: 18px;
}
.nav li{
display:inline;
}
.nav a{
display: inline-block;
padding: 10px;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
font-size: 20px;
font-family: Arial;
color: black;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
}
a:hover {
background-color: #99f2a3;
}
.nav a:hover:after {
content: '';
display: block;
width: 100%;
height: 3px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style.css">
<title>Home</title>
</head>
<body>
<div id="content">
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
Yes, the pseudo element you use for the red underline has a height which adds to the parents height. You can change the after element to position: absolute; and its parent to position: relative; to prevent that:
body {
margin: 0px;
background-color: #bfe6f7;
}
#content {
position: relative;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 60%;
height: auto;
background-color: white;
border-style: solid;
border-width: 3px;
}
.nav{
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #ffddb8;
border-style: solid;
border-width: 3px;
margin-top: 18px;
width: 95%;
margin-left: auto;
margin-right: auto;
height: auto;
position: relative;
margin-bottom: 18px;
}
.nav li{
display:inline;
}
.nav a{
display: inline-block;
padding: 10px;
text-decoration: none;
font-size: 20px;
font-family: Arial;
color: black;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
position: relative;
}
a:hover {
background-color: #99f2a3;
}
.nav a:hover:after {
content: '';
display: block;
position: absolute;
width: calc(100% - 2 * 20px);
height: 3px;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style.css">
<title>Home</title>
</head>
<body>
<div id="content">
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
A simple solution would be to just add the code you had in the psuedo element with hover, to without hover. Have the background set to be transparent. Then on hover, you can set the background to bet red.
See my code snippet, hopefully that is what you are looking for!
body {
margin: 0px;
background-color: #bfe6f7;
}
#content {
position: relative;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 60%;
height: auto;
background-color: white;
border-style: solid;
border-width: 3px;
}
.nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #ffddb8;
border-style: solid;
border-width: 3px;
margin-top: 18px;
width: 95%;
margin-left: auto;
margin-right: auto;
height: auto;
position: relative;
margin-bottom: 18px;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
padding-right: 10px;
padding-left: 10px;
text-decoration: none;
font-size: 20px;
font-family: Arial;
color: black;
font-weight: bold;
padding-left: 20px;
padding-right: 20px;
}
.nav a::after {
content: '';
display: block;
width: 100%;
height: 3px;
background-color: transparent;
}
a:hover {
background-color: #99f2a3;
}
.nav a:hover::after {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../style.css">
<title>Home</title>
</head>
<body>
<div id="content">
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
I am trying to move the Status/Actions Text over to the left but no matter how much I mess with the CSS nothing works!
What it is supposed to look like
What I have so far
HTML code for that section
CSS for that section
.top {
background: #1b1b1e;
width: 1650px;
margin: auto;
}
li a {
display: inline—block;
padding: 1em;
color: #9c9c9c;
text-decoration: none;
text-align: left;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
margin-right: 10em;
}
<div class="top">
<ul>
<li>Link</li>
<li>Status</li>
<li>Action</li>
</ul>
</div>
.top {
background: #1b1b1e;
width: 100%;
margin: auto;
float: left;
padding: 10px 0;
}
.top ul {
margin: 0px;
padding: 0px;
}
.top li {
list-style-type: none;
float: left;
width: 230px;
}
li a {
display: inline—block;
padding: 1em;
color: #9c9c9c;
text-decoration: none;
text-align: left;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
}
.statusText {
float: right !important;
}
.actionText {
float: right !important;
max-width: 149px;
}
<div class="top">
<ul>
<li class="linkText">Link</li>
<li class="actionText">Action</li>
<li class="statusText">Status</li>
</ul>
</div>
Please apply this :
.top {
background: #1b1b1e;
display: flex;
align-items: center;
justify-content: space-between;
}
.link-wrap {
width: 300px;
padding-left: 20px;
}
.top ul {
display: flex;
width: 400px;
justify-content: space-between;
list-style-type: none;
}
.top ul li {
padding-right: 25px;
}
.top ul li a,
.link-wrap a {
display: inline—block;
color: #9c9c9c;
text-decoration: none;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
}
.link-wrap a {
width: 300px;
}
<div class="top">
<div class="link-wrap">
Link
</div>
<ul>
<li>Status</li>
<li>Action</li>
</ul>
</div>
If any changes please let me know.
you can use flexbox order property:
https://www.w3schools.com/css/css3_flexbox.asp
If you are good to go with flex, a few lines of code will fix your issue.
display: flex;
.top {
background: #1b1b1e;
/* width: 1650px; */
width: 100%;
margin: auto;
}
ul {
display: flex;
}
li {
list-style: none;
}
.statusText {
margin-left: auto;
}
li a {
display: inline—block;
padding: 1em;
color: #9c9c9c;
text-decoration: none;
text-align: left;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
/* margin-right: 10em; */
}
<div class="top">
<ul>
<li>Link</li>
<li class="statusText">Status</li>
<li>Action</li>
</ul>
</div>
If you are interested to go with display inline-block only, you can use the float property.
display: inline-block;
.top {
background: #1b1b1e;
/* width: 1650px; */
width: 100%;
margin: auto;
}
li {
display: inline-block;;
list-style: none;
}
li a {
display: inline—block;
padding: 1em;
color: #9c9c9c;
text-decoration: none;
text-align: left;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
/* margin-right: 10em; */
}
.float-right {
float: right;
}
<div class="top">
<ul>
<li>Link</li>
<!-- Reversed Order -->
<li class="float-right">Action</li>
<li class="float-right">Status</li>
</ul>
</div>
.top {
background: #1b1b1e;
width: 1650px;
margin: auto;
}
ul{
display:flex;
flex-direction: row-reverse;
}
li a {
display: inline—block;
padding: 1em;
color: #9c9c9c;
text-decoration: none;
text-align: left;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
margin-right: 10em;
}
<div class="top">
<ul>
<li>Link</li>
<li>Status</li>
<li>Action</li>
</ul>
</div>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.top {
background: #1b1b1e;
width: 100%;
margin: auto;
}
li {
display: inline-block;
}
li a {
display: inline—block;
/* padding: 1em; */
color: #9c9c9c;
text-decoration: none;
text-align: left;
font-size: 25px;
letter-spacing: 1.1px;
font-weight: bold;
margin-right: 1em;
}
ul li:not(:first-child) {
float: right;
}
</style>
<body>
<div class="top">
<ul>
<li>Link</li>
<li>Status</li>
<li>Action</li>
</ul>
</div>
</body>
</html>
Another way to achieve what you want, But I would suggest just like others to use flex box :)
I can't seem to figure out how to remove this space to left of the image, as well as the small space in between the images on the right. I've tried various things, but nothing has worked. Here is the HTML for the nav:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A Dog's Life</title>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<img src="images/navimg.png" class="navbarimg">
<img src="images/banner.jpg" style="width:100%">
</header>
<nav>
<ul>
<li><img src="images/home-nav.png" alt="Home"></li>
<li><img src="images/about-nav.png" alt="About"></li>
<li><img src="images/services-nav.png" alt="Services"></li>
<li><img src="images/gallery-nav.png" alt="Gallery"></li>
<li><img src="images/contact-nav.png" alt="Contact"></li>
</ul>
</nav>
And the CSS:
body { background-color: #abc67e;
color: #666666;
font-family:Tahoma;
height: 100%;
}
header { background-color: #ffe4b5;
color: #FFFFFF;
font-family: Tahoma;
margin-bottom: 0;
z-index: 2;
}
h1 { line-height: 200%;
background-image: url(sunset.jpg);
background-repeat: no-repeat;
background-position: right;
padding-left: 20px;
height: 72px;
margin-bottom: 0;
}
nav { font-weight: bold;
background-color: #deb887;
z-index: 1;
}
h2 { font-family: Tahoma;
}
dt { color: #000033;
font-weight: bold;
}
footer { font-size: 0.70em;
text-align: center;
font-style: italic;
padding: 10px;
}
h3 { color: #000033;
}
main { padding-left: 20px;
padding-right: 20px;
}
#wrapper { margin-left: auto;
margin-right: auto;
width: 55%;
background-color: #fdf5e6;
min-width: auto;
box-shadow: 5px 5px 5px #523411;
height: 100%;
border: 4px;
border-style: outset;
}
nav ul { list-style-type: none;
margin-top: 0;
z-index: 99;}
nav li { display: inline; }
footer ul { list-style-type: none; }
footer li { display: inline; }
footer a { text-decoration: none; padding-right: 10px; }
aside { float: right;
border-left: 1px;
border-left-style: dotted;
padding-left: 50px;}
aside img { width: 100%;
height: 100%;}
section { float: right;
width: 320px;}
.galleryul { list-style-type: none; }
.galleryli { display: inline-block;
width: 225px;
padding-bottom: 10px;
margin: 10px;
background-color: #EAEAEA;
text-align: center;
font-style: italic;
font-family: Tahoma; }
label { float: left;
display: block;
width: 8em;
padding-right: 25px;
}
input { display: block;
margin-bottom: 1em;
}
textarea { display: block;
margin-bottom: 1em;
}
#mySubmit { margin-left: 11.5em;
}
.navbarimg { position: absolute;
padding-left: 650px;
padding-top: 110px;
z-index: -1;}
Thanks
<ul> element has by default padding-left, so you need to remove it with:
nav ul {
padding-left: 0;
}
Then the space between each image is because you have each <li> on a separate line and <li> has display: inline set, therefore browser adds a space between them. You can force it to make no spaces with float: left:
nav li {
float: left;
}
Now the <ul> wrapper needs to know that it should cover the entire content including floating elements so you can set it overflow: auto.
nav ul {
overflow: auto;
}
See updated jsfiddle: https://jsfiddle.net/f1s11mxp/
Add to your nav ul a padding-left of 0:
nav ul {
// other styles
padding-left: 0;
// other styles
}
And the trick I often have to resort to to get rid of space between inline or inline-block elements is to 'comment out' as it were the white space in the HTML markup like so:
<nav>
<ul>
<li><img src="images/home-nav.png" alt="Home"></li><!--
--><li><img src="images/about-nav.png" alt="About"></li><!--
--><li><img src="images/services-nav.png" alt="Services"></li><!--
--><li><img src="images/gallery-nav.png" alt="Gallery"></li><!--
--><li><img src="images/contact-nav.png" alt="Contact"></li>
</ul>
</nav>
I have a header on my website, with a list in it. The list is aligned properly on 100% size, but when I ctrl-scroll to expand, the text in the list goes out of the header area.
HTML
body {
margin: 0;
}
.header {
background-color: #606060;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 125%;
height: 4.5%;
width: 100%;
line-height: 50%;
margin-left: auto;
margin-right: auto;
position: fixed;
overflow: hidden;
top: 0px;
}
#headerLinks {
list-style-type: none;
text-shadow: 3px 3px 3px #aaaaaa;
}
#headerLinks li {
display: inline-block;
padding-left: 2%;
padding-right: 2%;
text-align: center;
color: #ffffff;
}
#headerLinks a {
color: #ffffff;
text-decoration: none;
}
#headerLinks a:hover {
color: #cccccc;
}
.introContent {
background-color: #cccccc;
height: 40%;
width: 100%;
margin-top: 2%;
}
<div class="header">
<div id="headerLinks">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
I want the list text to remain inside the header at all times.
EDIT: If I remove the height, since there is a position:fixed; the other containers will get overlapped by the header on zooming.
In your .header class, remove the height attribute - the browser will set the height of that div based on the content inside it (in this case, your menu items).
body {
margin: 0;
}
.header {
background-color: #606060;
text-align: center;
color: #ffffff;
font-family: 'Montserrat', sans-serif;
font-size: 1.25em;
height: 2.5em;
width: 100%;
line-height: 50%;
margin-left: auto;
margin-right: auto;
position: fixed;
overflow: hidden;
top: 0px;
}
#headerLinks {
list-style-type: none;
text-shadow: 3px 3px 3px #aaaaaa;
}
#headerLinks li {
display: inline-block;
padding-left: 2%;
padding-right: 2%;
text-align: center;
color: #ffffff;
}
#headerLinks a {
color: #ffffff;
text-decoration: none;
}
#headerLinks a:hover {
color: #cccccc;
}
.introContent {
background-color: #cccccc;
height: 40%;
width: 100%;
margin-top: 2%;
}
<div class="header">
<div id="headerLinks">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</div>
If you want to be able to scale everything relatively when you zoom you should use em units instead of percentages.