I'm having issues with my dropdown navigation for just this page. The response times on the navigation are extremely slow, and the dropdown menu will show momentarily on hover, but quickly disappears. I'm unsure if it has to do with the main element below, or not. If you have any insight or help, it would be great. I'm a graphic major, not web, so this isn't my forte.
body{
background-color: white;
}
#page-wrapper{
margin-left: auto;
margin-right: auto;
width: 960px;
height: auto;
background-image: url(Images/brick-wall-2209991.jpg);
background-repeat: repeat-y;
}
li {
text-align: center;
display: inline;
}
a {
text-decoration: none;
}
.span01,.span02,.span03,.span04,.span05,.span06,.span07,.span08,.span09,.span10,.span11,.span12
{
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}
.first-child{
margin-left: 0;
}
.last-child{
margin-right: 0;
}
.span01 {
width: 60px;
}
.span02 {
width: 140px;
}
.span03 {
width: 220px;
}
.span04 {
width: 300px;
}
.span05 {
width: 380px;
}
.span06 {
width: 460px;
}
.span07 {
width: 540px;
}
.span08 {
width: 620px;
}
.span09 {
width: 700px;
}
.span10 {
width: 780px;
}
.span11 {
width: 860px;
}
.span12 {
width: 940px;
}
.reset{
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0px;
}
.header {height: 115px;
background-color: #1e241b;
width: 960px;
}
/********Navigation********/
ul { margin-right: 20px;}
li {text-align: center;
display: inline;
font-family: 'Josefin Sans', sans-serif;
font-size: 14pt;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
color: #d98a79;
}
li a:link {color: #d98a79;}
li a:visited {
color: #d98a79;
}
li a:hover {
text-decoration-color: white;
color: white;
}
li a:active {
color: white;
}
nav {text-align: center;
padding-left: 110px;
margin-top: 30px;
float: right;
margin-right: 70px;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
position: relative;
text-align: left;
}
nav ul ul li a {
padding-top: 15px;
margin-top: 0px;
padding-bottom: 15px;
margin-left: -10px;
margin-right: 15px;
text-align: left;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background-color: #1e241b;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li a{
display: block;
padding: 10px 8px;
}
.bar {height: 190px;
background-color: rgba(0,0,0,0.75);
position: relative;
margin-top: 20px;
}
h1 {
font-family: 'Josefin Sans', sans-serif;
text-align: right;
text-transform: uppercase;
color: white;
font-size: 90pt;
position: relative;
top:-140px;
left: -40px;
margin-bottom: -140px;
}
<html>
<head>
<meta charset="UTF-8">
<title>Sous Vide - About</title>
<link href="secondary.css" rel="stylesheet" type="text/css">
<style>
#import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
#import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed');
</style>
</head>
<body>
<div id="page-wrapper">
<header class="span12 header first-child last-child">
<nav class="span12">
<ul>
<li>Home</li>
<li>About Us
<ul>
<li>About Us</li>
<li>FAQ</li>
</ul>
</li>
<li>Menus
<ul>
<li>Seasonal Menu</li>
<li>Breakfast Menu</li>
<li>Lunch Menu</li>
</ul>
</li>
<li>Catering</li>
<li>Gallery</li>
<li>Locations</li>
</ul>
</nav>
</header>
<div class="reset"></div>
<main class="bar span12"></main>
<h1>About Us</h1>
<div class="reset"></div>
You should put the h1 element to a div container and style it with CSS.
Example:
<div id="DIVNAME">
<h1>About Us</h1>
</div>
in css:
#DIVNAME { height: 100px; width 100px; }
hi try this: it will work
h1{
clear:both;
}
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.
So, I've started work on a navbar and it's kinda my first time doing this since it's a school project. On PC, my navbar look pretty good, the problem is with how the navbar looks on a tablet. Normally, this wouldn't be a problem, but my school is mostly tablet-centric, so I wanna make it iPad-friendly.
HTML
<html>
<head>
<title>Project Layout - Original</title>
<link rel="stylesheet" href="main.css" />
<link rel="stylesheet" href="homecontent.css" type="text/css" />
<style>
</style>
</head>
<body>
<header>
<div id="container">
<nav id="nav">
<ul>
<img src="finesselogotag.png" id="titleimage"> </img>
<li><a class="active" href="placeholder.html">Home</a></li>
<li><a class="nav" href="placeholder.html">Products</a></li>
<li><a class="nav" href="placeholder.html">Order now</a></li>
<li><a class="nav" href="placeholder.html">Games</a></li>
<li><a class="nav" href="placeholder.html">About us</a></li>
<li><a class="nav" href="placeholder.html">Presentation</a></li>
</ul>
</nav>
</div>
</header>
<div>
<p>Test text</p>
</div>
<footer>
<p class="copyright">©Copyright by DLSZ</p>
</footer>
</div>
</body>
</html>
CSS
/*to remove default margins*/
* {
margin: 0;
list-style-type: none;
background-color: #e0dbd1
}
/*to remove default margins*/
header, nav, section, article, footer {
display: block;
}
/*Css for the whole div*/
#container {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #1f242e;
height:49.5px;
float: left;
}
.logo {
height: 100px;
width: 200px;
float: left;
}
/*CSS for the whole div*/
/*Menu Bar*/
#nav {
float:left;
height: 50px;
text-align: center;
}
#nav ul {
float: left;
margin: 0px;
padding: 0px;
overflow: visible;
}
#nav li {
float: left;
display: block;
height: 19.5px;
}
#nav a {
float: left;
text-decoration: none;
color: #e0dbd1;
font-family: verdana;
}
#nav li a {
float: left;
display: block;
padding: 15px;
background-color: #1f242e;
text-align: center;
font-style: verdana;
}
#titlenav {
float: left;
background-color: #1f242e;
display: block;
font-family: SFAtarian;
padding: 15px;
font-size: 40px;
height: 19.5px;
color: #e0dbd1;
position: absolute;
top: -1.5%;
right: 0%;
}
#titleimage {
position: absolute;
top: -1.95%;
right: 0%;
float: left;
width: 150px;
height: 79.5px;
}
/*Menu Bar*/
section {
height: auto;
width: 1000px;
}
footer {
text-align:center;
height: 40px;
}
footer ul li{
display: inline-block;
}
footer ul li a {
color: 000000;
}
.content {
display: inline-block;
padding: 2px;
margin-left: 50px;
margin-bottom: 15px;
margin-top: 25px;
border: 2px solid black;
width: 900px;
}
.left {
float: left;
margin-right: 5px;
}
.right {
float: right;
margin-left: 5px;
}
/*FONTS*/
#font-face {
font-family: SFAtarian;
src: url(SFAtarian.ttf);
}
/*END OF FONT LIST*/
Here's what it looks like normally:
And here's what it looks like on an iPad:
Like I said, I'm kind of new to this kinda thing. Any advice on how to do this would be greatly appreciated, thanks!
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
use this tag in section,it will work.
use of viewport : The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
Try any of these..
Bootstrap navigation:
https://www.w3schools.com/bootstrap/bootstrap_navbar.asp
W3.css navigation:
https://www.w3schools.com/w3css/w3css_navigation.asp
Check this please, here is the responsive view for your code
https://codepen.io/atulraj89/pen/QJVPJv
$('.hamberger').click(function() {
$('.hamberger-nav-bar').toggleClass('active-left');
});
/*to remove default margins*/
* {
margin: 0;
list-style-type: none;
}
/*to remove default margins*/
header, nav, section, article, footer {
display: block;
}
/*Css for the whole div*/
#container {
list-style: none;
font-weight: bold;
margin-bottom: 10px;
width: 100%;
text-align: center;
background-color: #1f242e;
height:49.5px;
float: left;
}
.logo {
height: 100px;
width: 200px;
float: left;
}
/*CSS for the whole div*/
/*Menu Bar*/
#nav {
position: relative;
float:left;
height: 50px;
text-align: center;
margin-top: 50px;
}
#nav ul {
float: left;
margin: 0px;
padding: 0px;
overflow: visible;
}
#nav li {
float: left;
display: block;
height: 19.5px;
}
#nav a {
float: left;
text-decoration: none;
color: #e0dbd1;
font-family: verdana;
}
#nav li a {
float: left;
display: block;
padding: 15px;
background-color: #1f242e;
text-align: center;
font-style: verdana;
}
#titlenav {
float: left;
background-color: #1f242e;
display: block;
font-family: SFAtarian;
padding: 15px;
font-size: 40px;
height: 19.5px;
color: #e0dbd1;
position: absolute;
top: -1.5%;
right: 0%;
}
#titleimage {
position: absolute;
top: -1.95%;
right: 0;
float: left;
width: 150px;
height: 79.5px;
}
/*Menu Bar*/
section {
height: auto;
width: 1000px;
}
footer {
text-align:center;
height: 40px;
}
footer ul li{
display: inline-block;
}
footer ul li a {
color: 000000;
}
.content {
display: inline-block;
padding: 2px;
margin-left: 50px;
margin-bottom: 15px;
margin-top: 25px;
border: 2px solid black;
width: 900px;
}
.left {
float: left;
margin-right: 5px;
}
.right {
float: right;
margin-left: 5px;
}
.hamberger {
display: none;
}
/*FONTS*/
#font-face {
font-family: SFAtarian;
src: url(SFAtarian.ttf);
}
/*END OF FONT LIST*/
/* HAMBERGER CSS */
.hamberger {
position: absolute;
top: 30px;
right: 15px;
z-index: 999999;
padding: 10px 35px 16px 0;
cursor: pointer
}
.hamberger span,
.hamberger span:before,
.hamberger span:after {
content: "";
position: absolute;
display: block;
width: 35px;
height: 3px;
border-radius: 1px;
border-color:#ffffff;
background: #ffffff;
cursor: pointer;
}
.hamberger span:before {
top: -10px;
}
.hamberger span:after {
bottom: -10px;
}
.hamberger span,
.hamberger span:before,
.hamberger span:after {
transition: all 300ms ease-in-out;
}
.hamberger.active span {
background-color: transparent
}
.hamberger.active span:before,
.hamberger.active span:after {
top: 0;
}
.hamberger.active span:before {
transform: rotate(45deg);
}
.hamberger.active span:after {
top: 10px;
transform: translatey(-10px) rotate(-45deg);
}
/* MEDIA QUERY */
#media (max-width: 991px){
.hamberger-nav-bar {
position: fixed;
left: -300px;
width: 300px;
transition: all 0.5s;
}
.hamberger-nav-bar.active-left {
left: 0;
position: relative;
}
.hamberger-nav-bar.active-left:after {
position: fixed;
content: "";
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: -1;
}
#nav {
float: none;
height: auto;
position: relative;
z-index: 99;
}
#nav ul {
width: 100%;
float: none;
}
#nav li {
float: none;
height: auto;
width: 100%;
}
#nav li a {
float: none;
}
#titleimage {
top: 0;
}
.hamberger {
float: left;
margin: 17px 0 0 10px;
position: fixed;
top: 0;
left: 20px;
display: block;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Project Layout - Original</title>
<link rel="stylesheet" href="main.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="homecontent.css" type="text/css" />
</head>
<body>
<header>
<div id="container">
<div class="hamberger">
<span></span>
</div>
<nav id="nav" class="hamberger-nav-bar">
<ul>
<li><a class="active" href="placeholder.html">Home</a></li>
<li><a class="nav" href="placeholder.html">Products</a></li>
<li><a class="nav" href="placeholder.html">Order now</a></li>
<li><a class="nav" href="placeholder.html">Games</a></li>
<li><a class="nav" href="placeholder.html">About us</a></li>
<li><a class="nav" href="placeholder.html">Presentation</a></li>
</ul>
</nav>
<img src="finesselogotag.png" id="titleimage">
</div>
</header>
<div>
<p>Test text</p>
</div>
<footer>
<p class="copyright">©Copyright by DLSZ</p>
</footer>
</div>
</body>
</html>
Sea the above code.
Is it possible to overlap images in the navigation bar, without getting the background color and some stuffs? The image or the logo itself shouldn't have any background-color (that is inherited) and should have overlapped the navigation bar. I'm looking for an output like this.
This is the CodePen link, try it out
HTML Codes:
<nav>
<ul>
<li>
<span class="logo">
<img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">
</span>
</li>
<li>Home</li>
<li>Our School</li>
<li>Academics</li>
<li>Lesson and Quizzes</li>
<li>Event & News</li>
<li>Grades</li>
</ul>
</nav>
CSS Codes:
* {
margin: 0px;
}
nav {
width: 100%;
height: 100%;
text-align: center;
font-weight: lighter;
font-size: 0.95em;
font-family: Century Gothic;
text-transform: uppercase;
list-style-type: none;
overflow: hidden;
background-color: #343F64;
}
ul {
margin: 0;
padding: 0;
width: 100%;
}
li {
display: inline;
float: left;
}
li a {
display: block;
padding: 14px 16px;
background-color: #343F64;
color: white;
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
}
.active {
color: #E9DB89;
}
li img {
float: left;
}
img {
margin-left: 75px;
}
#logo {
float:left;
z-index: 1000;
}
I have made an edit to your code to get the results
* {
margin: 0px;
}
nav {
width: 100%;
height: 70px;
text-align: center;
font-weight: lighter;
font-size: 0.95em;
font-family: Century Gothic;
text-transform: uppercase;
list-style-type: none;
overflow: hidden;
background-color: #343F64;
position: relative;/*change here*/
}
ul {
margin: 0;
padding: 0;
width: 100%;
position: absolute;/*change here*/
right: -25%;/*change here*/
}
li {
display: inline;
float: left;
}
li a {
display: block;
padding: 14px 16px;
background-color: #343F64;
color: white;
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
}
.active {
color: #E9DB89;
}
li img {
float: left;
}
img {
margin-left: 75px;
}
.line {
width: 100%;
height: 50px;
border-bottom: 1px solid #111;
}
#logo {
float:left;
z-index: 1000;
position: absolute;/*change here*/
}
<!--move logo outside nav-->
<span class="logo">
<img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">
</span>
<nav>
<ul>
<li>Home</li>
<li>Our School</li>
<li>Academics</li>
<li>Lesson and Quizzes</li>
<li>Event & News</li>
<li>Grades</li>
</ul>
</nav>
<div class="line"></div>
Here's another variation, not using absolute positioning:
HTML:
<div id="header_container">
<div id="header">
<div class="logo">
<img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">
</div>
<div class="nav">
<ul>
<li>Home</li>
<li>Our School</li>
<li>Academics</li>
<li>Lesson and Quizzes</li>
<li>Event & News</li>
<li>Grades</li>
</ul>
</div>
</div>
</div>
CSS:
* {
margin: 0px;
}
#header_container {
width: 100%;
height: 100px;
background-color: #343F64;
}
#header {
margin: 0 auto;
width: 1200px;
}
.nav {
float: left;
margin-top: -100px;
margin-left: 350px;
height: 100px;
text-align: center;
font-weight: lighter;
font-size: 0.95em;
font-family: Century Gothic;
text-transform: uppercase;
list-style-type: none;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
width: 100%;
}
li {
display: inline;
float: left;
}
li a {
display: block;
padding: 14px 16px;
background-color: #343F64;
color: white;
text-decoration: none;
padding-top: 25px;
padding-bottom: 25px;
}
.active {
color: #E9DB89;
}
li img {
float: left;
}
img {
margin-left: 75px;
}
.logo {
float:left;
z-index: 1000;
}
this is my very first question! Is now a couple of days that I am facing a problementer code here with checkbox creating a slide up/down mobile first menu.
The checkbox is working perfectly but what I am unable to do after is letting the menu slide up and done when checkbox is checked.
Any hint or help for the right direction would be greately appreciated!
<!-- === MENUTOGGLE === -->
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header>
<div id="logo" class="brand">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>`enter code here`
<nav class="menu">
<ul>
<li>Work</li>
<li>About</li>
<li>Blog </li>
<li>Contact</li>
</ul>
</nav>
</header>
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
.menu {
width: 100%;
position: absolute;
top: 66px;
}
.menu-icon {
float: right;
color: blueviolet;
cursor: pointer;
padding-top: 25px;
padding-right: 30px;
}
#menuToggle {
display: none;
}
#menuToggle:checked + .menu {
position: absolute;
top: -66px;
}
#logo {
float: none;
text-align: left;
padding-top: 7px;
padding-left: 2em;
}
header {
display: block;
background-color: #FFF;
}
nav {
text-align: center;
}
nav ul {
background-color: rgba(255, 255, 255, 0.15);
float: none;
line-height: 3.5em;
margin: 0;
}
nav ul li {
display: block;
list-style-type: none;
}
nav ul li:hover {
background-color: rgba(171, 193, 242, 0.1);
}
nav ul li a {
text-decoration: none;
color: red;
}
nav ul li a:hover {
color: aqua;
}
/*------------ MEDIUM BIG SCREEN -----------------------*/
#media screen and (min-width:600px) {
#logo {
float: left;
}
.menu {
width: 100%;
height: 70px;
position: inherit;
}
.menu-icon {
display: none;
}
header {
height: 70px;
background-color: #FFF;
margin: auto;
width: 100%;
}
nav ul {
background-color: #FFF;
float: right;
padding: 0.55em 3em 0.55em 1.5em;
height: 70px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
background-color: #FFF;
padding-left: 3em;
}
I have modified few lines of your code. Just check below or https://jsfiddle.net/pr7xf32q/, if this is what you expect.
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
body {
background: #eee;
color: #444;
-webkit-font-smoothing: antialiased;
font-family: Arial, sans-serif;
font-weight: 400;
height: auto !important;
height: 100%;
min-height: 100%;
text-rendering: optimizeLegibility;
}
.menu {
width: 100%;
position: absolute;
top: 66px;
}
.menu-icon {
float: right;
color: blueviolet;
cursor: pointer;
padding-top: 25px;
padding-right: 30px;
}
.menu {
display: none;
}
#menuToggle:checked ~ header .menu {
display: block;
}
#logo {
float: none;
text-align: left;
padding-top: 7px;
padding-left: 2em;
}
header {
display: block;
background-color: #FFF;
}
nav {
text-align: center;
}
nav ul {
background-color: rgba(255, 255, 255, 0.15);
float: none;
line-height: 3.5em;
margin: 0;
}
nav ul li {
display: block;
list-style-type: none;
}
nav ul li:hover {
background-color: rgba(171, 193, 242, 0.1);
}
nav ul li a {
text-decoration: none;
color: red;
}
nav ul li a:hover {
color: aqua;
}
/*------------ MEDIUM BIG SCREEN -----------------------*/
#media screen and (min-width:600px) {
#logo {
float: left;
}
.menu {
width: 100%;
height: 70px;
position: inherit;
display: block;
}
.menu-icon {
display: none;
}
header {
height: 70px;
background-color: #FFF;
margin: auto;
width: 100%;
}
nav ul {
background-color: #FFF;
float: right;
padding: 0.55em 3em 0.55em 1.5em;
height: 70px;
}
nav ul li {
display: inline-block;
}
nav ul li a {
background-color: #FFF;
padding-left: 3em;
}
<input type="checkbox" name="checkbox" id="menuToggle" value="value">
<label for="menuToggle" class="menu-icon">☰</label>
<!-- ==== HEADER ==== -->
<header>
<div id="logo" class="brand">
<h1><img src="images/logo.png" alt="Hello"></h1>
</div>
<nav class="menu">
<ul>
<li>Work</li>
<li>About</li>
<li>Blog </li>
<li>Contact</li>
</ul>
</nav>
</header>
I am recreating the Google homepage for an assignment on TheOdinProject. I am almost finished, but the problem I am having is that I can't seem to get the hyperlink to be visible within the footer container. I tried changing the text color, and I checked the properties within the list item selector and I should be able to see the hyperlink "About Google" but I can't. What am I doing wrong?
body {
font-family: Arial;
}
#logo {
display: block;
width: 350px;
margin : 0 auto;
margin-top: 100px;
position: relative;
text-align: center;
}
input {
margin-top: -50;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
position: relative;
line-height: 2;
display: block;
width: 500px;
}
#logo img {
max-width: 100%;
}
.search_button {
margin-left: 800px;
margin-top: 5px;
display: inline;
float: left;
}
.feeling_lucky_button {
margin-right: 800px;
margin-top: 5px;
float: right;
display: inline;
}
#navbar {
background-color: #2d2d2d;
width: 100%;
height: 30px;
position: fixed;
left: 0;
top: 0;
}
#navbar ul {
margin-top: 5px;
padding-left: 8px;
}
li {
font-size: 13px;
padding: 5px 8px 5px 8px;
display: inline;
list-style-type: none;
}
#navbar ul li a {
font-weight: bold;
color: #BBBBBB;
text-decoration: none;
}
#navbar ul li a:hover {
color: white;
text-decoration: none;
}
#footer {
width: 100%;
height: 30px;
position: fixed;
border-top: 1px solid rgba(0, 0, 0, 0.1);
bottom: 0;
left: 0;
}
#footer li {
margin-bottom: 5px;
padding-left: 8px;
}
#footer ul li a {
font-weight: bold;
color: red;
text-decoration: none;
}
#footer ul li a:hover {
color: red;
font-weight: bold;
text-decoration: none;
}
#footer ul li a:link {
color: red;
}
#footer ul li a:visited{
color: red;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Google Homepage Project</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="navbar">
<ul>
<li>Home</li>
</div>
<div id="logo">
<img src="http://fineprintnyc.com/images/blog/history-of-logos/google/google-logo.png">
</div>
<div id="searchbar">
<form action="#" method="POST">
<input type="text" name="searchbar">
</div>
<button class="search_button">Google Search</button>
<button class="feeling_lucky_button">I'm feeling lucky</button>
<div id="footer">
<ul>
<li><a href="http://www.google.com>About Google</a></li>
</ul>
</div>
</body>
</html>
Try this in footer. You missed double quote.
<li>About Google</li>
Fiddle:https://jsfiddle.net/ywu325mw/1/
In your footer:
<a href="http://www.google.com>About Google</a>
should be:
About Google
You forgot to close " the href attr