Here's how my navbar looks like:
<div class="menu" id="menu-toggle">
Menu
</div>
<nav class="manu-nav" id="menu-nav">
<img src="https://www.stickpng.com/assets/images/58b061138a4b5bbbc8492951.png" height="45" />
<a class="nav-a" href="#">Home</a>
<a class="nav-a" href="#">Cats</a>
<a class="nav-a" href="#">Litters</a>
<a class="nav-a" href="#">Toys</a>
<a class="nav-a" href="#">About us</a>
<a class="nav-a" href="#">Contact us</a>
</nav>
I am trying to move the image away from the home button, but if I use padding or margin, the whole thing is changing because the navbar has got justify-content: center; style, Is there a way to keep the navabar option button centered and move just the logo?
jsfiddle
Can add class for image '.site_left_img' then add css.
.site_left_img {
position: absolute;
left: 3%;
top: 0;
}
try this one
* {
margin: 0;
padding: 0;
}
.logo {
width: 10%;
display:inline-block;
}
body {
}
nav ul {
margin: 0;
padding: 0;
}
nav ul li {
list-style: none;
margin: 1%;
font-size: 2em;
display:inline-block;
}
nav ul li a {
text-decoration: none;
float: left;
text-align: center;
font-family: 'Gloria Hallelujah', cursive;
color: #E6E6E6;
}
nav {
overflow: hidden;
background-color: #214569;
position: fixed;
top: 0;
width: 100%;
}
nav ul li:hover {
background-color: #8C9DBF;
}
/*
nav p {
top: 0;
float: right;
font-family: 'Gloria Hallelujah', cursive;
font-size: 1.5em;
}
*/
header {
background-color: #214569;
opacity:0.7;
}
.socialMedia {
width: 10%;
display: inline-block;
position: absolute;
top: 0;
right: 0;
}
h2 {
font-family: 'Gloria Hallelujah', cursive;
color: #7D0CE8;
font-size: 5em;
text-shadow: 4px 4px 4px #fff;
opacity: .9;
position: relative;
text-align: center;
top: 32%;
}
h1 {
font-family: 'Permanent Marker', cursive;
font-size: 9em;
color: #7D0CE8;
text-shadow: 4px 4px 4px #fff;
opacity: .8;
position: relative;
text-align: center;
top: 30%;
}
#secondBackground {
background: url(img/salad02.jpg) no-repeat;
background-size: cover;
height: 1400px;
width: auto;
}
#thirdBackground {
background: url() no-repeat;
background-size: cover;
height: 1000px;
width: auto;
}
<html>
<head>
<title>Restaurant HAYQ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Aurimas Ransys">
<meta name="keywords" content="Armenian Food, Food">
<meta name="description" content="Armenian Food Business">
<link href="https://fonts.googleapis.com/css?family=Cabin" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Bungee" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes|Permanent+Marker" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah|Indie+Flower" rel="stylesheet">
</head>
<body>
<section id="navbackground">
<header>
<nav>
<ul>
<img src="img/hayq.png" alt ="logo" class="logo"/>
<li>Home</li>
<li>Drivers</li>
<li>Bolids</li>
<li>about us</li>
<li>Contact us</li>
<img src="img/media.png" alt="social media" class="socialMedia">
</ul>
<!-- Just wanted to add social media on nav bar
<p>Follow us on<br> social media</p>
-->
</nav>
</header>
</section>
<section id="firstdBackground">
<h1>HAYQ</h1>
<h2>Armenian Specials</h2>
</section>
<section id="secondBackground">
nothing here
</section>
</body>
</html>
Related
I want to have the icon for the login be clickable and over the "LOGIN" Text centered. Furthermore I want that on the navbar/sidebar all images/icons are always in a pair with the text that belongs to it, like "LOGIN" and the login icon over it or with the registration. If you find ways to fix it & find ways how to fix my code to make it more efficient, I will be very pleased. Any suggestions? I hope smb can help, thanks!
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.absoluteCenterWrapper {
position:relative;
}
.absoluteCenter {
margin:auto;
position:absolute;
top:0;
bottom:0;
}
.absoluteCenter {
max-height:100%;
max-width:100%;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: blue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img src="http://cdn.onlinewebfonts.com/svg/img_311846.png" class="absoluteCenter">
<span>LOGIN</span>
</a>
</li>
<li>
<a href="#" >REGISTER</a>
</li>
<li>
<a href="#" class="new_paragraph" >GET<span>PREMIUM</span></a>
</li>
<li>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
Is this what you're looking for?
I changed the link label from <span> into <div> and added .icon class.
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.absoluteCenterWrapper {
position:relative;
}
.absoluteCenter {
margin:auto;
position:absolute;
top:0;
bottom:0;
}
.absoluteCenter {
max-height:100%;
max-width:100%;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}
.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: blue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
.icon {
width: 32px;
height: 32px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_311846.png" class="absoluteCenter">
<div>LOGIN</div>
</a>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
html,
body {
width: 100%;
height: 100%;
position: relative;
}
nav {
background: blue;
position: absolute;
padding: 30px 10px;
border-radius: 50px;
top: 50%;
transform: translateY(-50%);
left: 20px;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li a {
display: flex;
align-items: center;
text-decoration: none;
margin: 0 0 20px 0;
}
nav ul li a img {
width: 30px;
height: 30px;
object-fit: contain;
}
nav ul li span {
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
margin-left: 10px;
color: #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<nav>
<ul>
<li>
<a href="https://www.google.com">
<img src="https://cdn.onlinewebfonts.com/svg/img_311846.png" />
<span>LOGIN</span>
</a>
</li>
<li>
<a href="https://www.google.com">
<img src="https://cdn.onlinewebfonts.com/svg/img_311846.png" />
<span>LOGIN</span>
</a>
</li>
<li>
<a href="https://www.google.com">
<img src="https://cdn.onlinewebfonts.com/svg/img_311846.png" />
<span>LOGIN</span>
</a>
</li>
<li>
<a href="https://www.google.com">
<img src="https://cdn.onlinewebfonts.com/svg/img_311846.png" />
<span>LOGIN</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
Trying to make this drop down menu appear, but I'm not sure what is wrong.
Here is my codepen: https://codepen.io/JBeezy3/pen/PooQwZr
<body>
<div class="container">
<!-- will add in later -->
<div class="header" <img>
</div>
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="Home">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
Above all, the text of your sub-menu is displayed black (which is the default color), that's why you don't see it on the black background. Add color: #fff to ul.sub-menu li to make those visible. Then you can fix the rest.
Replace this css
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
}
body {
font-family: verdana;
font-size: 14px;
font-weight: normal;
height: 100%;
background: url(../img) no-repeat;
background-size: cover;
background-attachment: fixed;
background-color: black;
}
.header{
padding: 15px 35px;
display: inline-block;
width: 100%;
}
a{
color: white;
text-decoration: none;
}
.menu {
float: right;
}
.menu ul li {
display: inline-block;
float: left;
line-height: 24px;
margin: 15px;
}
.menu ul li a{
text-decoration: none;
color: #ffffff;
font-size: 24px;
padding: 5px 10px;
}
.menu ul li a:hover{
color: red;
}
.name{
width: 350px;
margin-top: 300px;
margin-right: 500px;
}
.name h5{
color: red;
font-size: 24.5px;
text-align: left;
}
.name h1{
color: white;
font-size: 90px;
line-height: 75px;
}
.sub-menu{
position: absolute;
display: none;
background-color: white;
}
.menu li:hover a + .sub-menu { display: block;}
.sub-menu li{
position: relative;
display: block;
}
.column-left {
float: left;
width: 33.333%;
}
.column-right {
float: right;
width: 33.333%;
padding-left: 0px;
}
.column-center {
display: inline-block;
width: 33.333%;
padding-top: 80px;
}
.row {
color: white;
font-size: 24px;
margin: 150px;
text-align: center;
}
.preview {
width: 90%;
}
.preview2 {
width: 75%;
}
.preview3 {
width: 70%
}
.hero{
max-width: 500px;
margin-left: 500px;
padding-bottom: 1000px;
}
<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>John Blair Graphic Designer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<!-- will add in later -->
<div class="header">
<div class="menu">
<nav>
<ul>
<li><a style="text-decoration:none" href="index.html">Home</a></li>
<li><a style="text-decoration:none" href="Home">About</a></li>
<li><a style="text-decoration:none" href="works.html">Works</a>
<ul class="sub-menu">
<li> Digital </li>
<li> Physical </li>
<li> Animation </li>
</ul>
</li>
<li><a style="text-decoration:none" href="Home">Contact</a></li>
</ul>
</nav>
</div>
<div class="name">
<h5>Graphic Designer</h5>
<h1> John Blair </h1>
</div>
<img class="hero" src="images/hero.jpg">
<footer>
<!-- nav menu when working-->
</footer>
I am making a website for my friend, and I am currently having two problems that I can't seem to solve:
I can't seem to get rid of the white space that exists between the main container and the footer. There is a small strip of white that runs from the bottom of the background image to the footer.
When the browser window is shrunk (especially to half the width of the screen) white space appears after the footer.
Can anyone help me please? Thanks!
body {
margin: 0px;
font-size: 62.5%;
padding: 0px;
}
header {
width: 100%;
height: 90px;
background-color: #000000;
}
#logo_home {
position: relative;
float: left;
left: 5%;
width: 20%;
top: 7.5px;
}
#logo {
height: 75px;
width: 300px;
}
nav {
position: relative;
float: right;
right: 5%;
width: 35%;
height: 50px;
top: 20px;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
position: relative;
top: 6.5px;
}
li {
display: inline-block;
margin-left: 2.5%;
margin-right: 2.5%;
position: relative;
list-style-type: none;
padding-top: 0px;
}
.nav_link {
font-family: 'PT-Sans', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
text-transform: uppercase;
line-height: 37px !important;
text-decoration: none;
}
.nav_link:link {
color: #ffffff;
}
.nav_link:visited {
color: #ffffff;
}
.nav_link:hover {
color: #dddddd;
}
#video_container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
#video_container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 100px;
left: 17.5%;
width: 65%;
height: 65%;
}
#main_container {
background-image: url("../images/background.jpg");
background-size: cover;
margin: 0px;
}
footer {
background-color: #000000;
height: 50px;
width: 100%;
margin: 0px;
}
.copyright {
color: white;
font-family: 'PT-Sans', sans-serif;
font-size: 1.2em;
position: relative;
text-align: center;
top: 15px;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex, nofollow, noarchive" />
<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<title>Hyperdog Productions</title>
</head>
<body>
<header>
<div id="logo_home">
<a href="index.html" title="Home">
<img id="logo" src="images/logo.jpg" alt="logo">
</a>
</div>
<nav>
<ul>
<li><a class="nav_link" id="about" href="about.html" title="About">About</a>
</li>
<li><a class="nav_link" id="short_films" href="short_films.html" title="Short Films">Short Films</a>
</li>
<li><a class="nav_link" id="cast_crew" href="cast_crew.html" title="Cast/Crew">Cast/Crew</a>
</li>
<li><a class="nav_link" id="gallery" href="gallery.html" title="Gallery">Gallery</a>
</li>
<li><a class="nav_link" id="links" href="links.html" title="Links">Links</a>
</li>
<li><a class="nav_link" id="contact_us" href="contact_us.html" title="Contact Us">Contact Us</a>
</li>
</ul>
</nav>
</header>
<div id="main_container">
<div id="video_container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<footer>
<p class="copyright">Copyright © 2016. All Rights Reserved.</p>
</footer>
</body>
</html>
It's probably the default top and bottom margin on the <p> in the footer, reset that and see.
.copyright {
margin: 0;
}
If you take the code and shrink your browser window you'll notice that the list items overlap the site title in the navigation bar which is annoying. Does anybody know how to fix this please?
HTML Code:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hyperdog Productions</title>
<link href="css/stylesheet5.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div id="navigation_bar">
<p>Hyperdog Productions</p>
<ul class="navbar_list">
<li class="nav_list" id="about"><a class="nav_link" href="about.html">About</a></li>
<li class="nav_list" id="short_films"><a class="nav_link" href="films.html">Short Films</a></li>
<li class="nav_list" id="cast/crew"><a class="nav_link" href="other.html">Cast/Crew</a></li>
<li class="nav_list" id="contact_us"><a class="nav_link" href="contact_us.html">Contact Us</a></li>
<li class="nav_list" id="other"><a class="nav_link" href="other.html">Other</a></li>
</ul>
</div> <!--End of NAV-->
<main id="container">
<div id="container_wrapper">
<img class="container_background" src="images/bg.png" alt="Background" />
</div>
<div id="footer">
</div>
</main> <!--End of Main-->
<footer id="copyright">
</footer>
</div> <!--End of WRAPPER-->
</body>
</html>
CSS Code:
#font-face {
font-family: "Lato-Regular";
src: url("../fonts/Lato-Regular/Lato-Regular.ttf");
src: url("../fonts/Lato-Regular/Lato-Regular.woff");
}
#font-face {
font-family: "PT-Sans";
src: url("../fonts/PT-Sans/PTS55F.ttf");
src: url("../fonts/PT-Sans/PTS55F.woff");
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Margin: 0; */
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 1500px;
overflow-x: none;
font-size: 0;
}
body {
font-size: 62.5%;
}
.wrapper {
height: 1500px;
}
#navigation_bar {
width: 100%;
height: 90px;
background-color: #1d1d1d;
}
main {
height: 1300px;
}
#container_wrapper {
width: 100%;
height: 865px;
background-image: url("../images/bg.png");
background-repeat: repeat;
}
#footer {
width: 100%;
height: 435px;
background-color: blue;
}
#copyright {
width: 100%;
height: 110px;
background-color: black;
}
.nav_link:link {
margin: 0;
padding: 10px;
text-decoration: none;
text-align: center;
font-family: "Lato-Regular", "PT-Sans", "Calibri Light", sans-serif;
font-size: 1.2em;
line-height: 3.7em !important;
text-transform: uppercase;
color: #ffffff;
}
.nav_link:hover {
color: grey;
}
.navbar_list {
float: right;
position: absolute;
float: right;
right: 20%;
top: 16.25px;
text-align: center;
}
.navbar_list li {
float: left;
list-style-type: none;
list-style: none;
padding: 9px 12px;
margin: 0;
font-size: 10px;
display: inline;
}
.logo {
font-family: "PT-Sans", "Calibri Light", sans-serif;
font-size: 24px;
color: #AF7817; /* #2C3539 */
margin: 0;
padding: 9px 12px;
float: left;
left: 20%;
position: absolute;
text-transform: uppercase;
letter-spacing: 10px;
top: 25px;
text-align: center;
text-decoration: none;
text-shadow: 8px 8px 8px #000000;
}
Thanks!
Add the following at the bottom of your CSS to drop the menu links lower down on the page and to center your title on the screen for smaller screen sizes. This is how I'd organize the page.
#media (max-width: 1750px) {
.navbar_list {
position: relative;
display: inline-block;
float: inherit;
right: inherit;
padding-left: 0px;
}
.logo {
position: relative;
left: inherit;
float: inherit;
margin-left: 15px;
}
}
#navigation_bar {
text-align: center;
}
It will look like this on smaller screens:
If you want to make them disappear
#media (max-width: 1530px) {
.navbar_list {
display: none;
}
}
Something like this WITH bootstrap.css
<div class="container">
<div id="navigation_bar" class="row">
<div class="col-md-8">
<p>Hyperdog Productions</p>
</div>
<div class="col-md-4">
<ul class="navbar_list">
<li class="nav_list" id="about"><a class="nav_link" href="about.html">About</a></li>
<li class="nav_list" id="short_films"><a class="nav_link" href="films.html">Short Films</a></li>
<li class="nav_list" id="cast/crew"><a class="nav_link" href="other.html">Cast/Crew</a></li>
<li class="nav_list" id="contact_us"><a class="nav_link" href="contact_us.html">Contact Us</a></li>
<li class="nav_list" id="other"><a class="nav_link" href="other.html">Other</a></li>
</ul>
</div> <!--End of NAV-->
<main id="container">
<div id="container_wrapper">
<img class="container_background" src="images/bg.png" alt="Background" />
</div>
<div id="footer">
</div>
</main> <!--End of Main-->
<footer id="copyright">
</footer>
</div> <!--End of WRAPPER-->
Hope all is well with you, I am testing responsive site via media queries(max-width at 960px & 480px), I suspect why page become blank or white background instead background image, maybe it has to do with Foundation 5's overflow hidden? override foundation file?
If I remove Foundation's href link under head tags, background image is back normally. Since I am new to Foundation, what's the solution?
HTML
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<title>Front End Development</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/foundation.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href='http://fonts.googleapis.com/css?family=Gabriela' rel='stylesheet' type='text/css'>
</head>
<body>
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>Mike Davis</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<!--Section wrap -->
<section class="topbar">
<ul class="topside-nav">
<li>Portfolio</li>
<li>Pictures</li>
<li>Map</li>
<li>Contact</li>
</ul>
</section>
<!--Short Description -->
<div class="myDiv">
<div class="bgImage" style="position: absolute; top: 90%; left: 0px;">
<h1>Hello! I am Mike</h1>
<p>I enjoy building websites for individuals and businesses!</p>
</div>
</div>
</nav>
</body>
</html>
CSS
/* Top Bar to set center*/
.topbar ul {
display: table;
margin: 0 auto;
}
/* Top Side Navagiation Listing */
.topside-nav li {
display: table-cell;
line-height: 33px;
font-size: 1.25rem;
margin-left: 85px;
padding-right: 2.6rem;
font-weight: bold;
}
.top-bar .name h1 {
font-family: 'Gabriela', serif;
padding-left: 2rem;
}
/* Navigation Hover */
.topside-nav li a:hover {
color: #f4fcff;
background-color: #eb4747;
border-radius: 5px;
/* padding: 10px 10px;*/
}
.topside-nav a {
text-decoration: none;
padding: 10px 10px;
}
/* New Font */
body {
font-family: 'Gabriela', serif;
}
.top-bar {
height: 65px;
line-height: 65px;
position: relative;
background: #000;
margin-bottom: 0; }
.top-bar ul {
margin-top: 18px;}
.top-bar .title-area {
position: relative;
margin: 0; }
.top-bar .name {
height: 45px;
margin: 0;
font-size: 16px; }
.top-bar .name h1 {
line-height: 65px;
font-size: 1.8rem;
margin: 0;
}
.myDiv {
text-align: center;
}
.myDiv h1 {
margin-top: 150px;
display: inline-block;
font-family: 'Gabriela', serif;
color: #FFF;
font-size: 3.5em;
border-radius: 20px;
background: rgba(43, 166, 203, 0.5 /*this is the alpha value for background*/ );
padding: 0.1em 0.2em 0.1em 0.5em;
}
.myDiv p {
font-family: 'Gabriela', serif;
text-align: center;
color: #FFF;
font-size: 1.8rem;
background-color: #2ba6cb;
margin: auto;
width: 80%;
}
/* Set Loop to show images differently daily if possible */
.bgImage {
/* background: url('../img/futureHighCityC.jpg') 20% 20% / cover transparent;*/
/* background: url('../img/futureHighCityB.jpg') 20% 20% / cover transparent;*/
/* background: url('../img/futureHighCity.jpg') 20% 20% / cover transparent;*/
background: url('../img/amazing_city.jpg') 20% 20% / cover transparent;
width: 100%;
height: 800px;
}
.myDiv span {
color: #fc0b0b;
}
/*Foundation Top Menu Toggle */
.top-bar .toggle-topbar {
position: absolute;
right: 0;
top: 0; }
.top-bar .toggle-topbar a {
color: white;
text-transform: uppercase;
font-size: 0.8125rem;
font-weight: bold;
position: relative;
display: block;
padding: 0 15px;
height: 45px;
line-height: 45px; }
.top-bar .toggle-topbar.menu-icon {
top: 70%;
margin-top: -16px; }
.top-bar .toggle-topbar.menu-icon a {
height: 34px;
line-height: 33px;
padding: 0 40px 0 15px;
color: white;
position: relative; }
.top-bar .toggle-topbar.menu-icon a span::after {
content: "";
position: absolute;
display: block;
height: 0;
top: 50%;
margin-top: -8px;
right: 15px;
box-shadow: 0 0px 0 1px white, 0 7px 0 1px white, 0 14px 0 1px white;
width: 16px; }
.top-bar .toggle-topbar.menu-icon a span:hover:after {
box-shadow: 0 0px 0 1px "", 0 7px 0 1px "", 0 14px 0 1px ""; }
/* Media Queries */
#media (max-width: 960px) {
body {
background: royalblue;
background-size: auto 100%;
}
p {
color: white;
}
}
#media (max-width: 480px) {
body {
background-color: darkred;
}
}
#media (min-width: 481px) and (max-width: 700px) {
body {
background-color: orange;
}
}
The problem is with where your </nav> is. Because of the media queries your nav collapses when the screen is small enough. but the .bgImage is included in the nav so it also collapses.
Change to:
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="name">
<h1>Mike Davis</h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span></span></li>
</ul>
<!--Section wrap -->
<section class="topbar">
<ul class="topside-nav">
<li>Portfolio</li>
<li>Pictures</li>
<li>Map</li>
<li>Contact</li>
</ul>
</section>
</nav> <!--- ADD </nav> here -->
<!--Short Description -->
<div class="myDiv">
<div class="bgImage" style="position: absolute; top: 90%; left: 0px;">
<h1>Hello! I am Mike</h1>
<p>I enjoy building websites for individuals and businesses!</p>
</div>
</div>
<!--- DELETE THIS NAV </nav> -->
</body>
</html>
And now you need to fix the top padding/margin for the .bgImage but this should fix the disappearance of your image.
changing:
<div class="bgImage" style="position: absolute; top: 90%; left: 0px;">
to:
<div class="bgImage" style="position: absolute; top: 19%; left: 0px;">
should do the trick. Better move that to your style.css though.