I am trying to implement a input/search-field in my website's navigation bar. I would very much like it to work like the YouTube navbar where the input-field is centered in between the left-side logo and links on the right side. But also such that the width of the input field is dynamic and compresses when the browser page is reduced in width.
I am not skilled in CSS and the only way I have been able to even make the search-field sit within the navbar is by setting the position to absolute (in the input-field class). I understand that you can accomplish the same outcome in multiple different ways with CSS and I know that fiddling with the position is properly the wrong way to go if it is also to be dynamic.
Please find a JSFiddle below and the html/CSS code. I am using MaterializeCSS to create the website and the 'brand-logo' class is used to center the logo when the browser window is below a certain threshold. I then use the class 'hide-on-med-and-down' on the ul to make the links disappear when the logo centers. However, I have removed the 'hide-on-med-and-below' class in the below JSFiddle to make it more apparent how the search input currently works.
https://jsfiddle.net/gwm6e031/19/
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<ul class="right hide-on-med-and-down">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
<div class="input-field hide-on-med-and-down">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
</nav>
CSS code:
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
background: rgba(0, 0, 0, 0.4);
z-index: 20;
height: 80px;
line-height: 80px;
}
nav .nav-wrapper {
padding: 0px 50px;
}
nav .logo-text {
padding-top: 15px;
font-family: "Raleway", sans-serif;
font-size: 38px;
line-height: 50px;
font-weight: bold;
overflow: hidden;
}
nav .logo-svg {
width: 50px;
height: 50px;
float: left;
background-color: #fff;
}
nav .right {
}
nav ul a {
font-family: 'Montserrat', sans-serif;
font-size: 12px;
color: #fff;
text-transform: uppercase;
display: block;
}
nav ul a:focus {
text-decoration: underline;
}
nav li a:hover {
background: #006699;
}
/* Search bar TOP */
nav .input-field {
position: absolute;
bottom: 0px;
left: 420px;
width: 22%;
max-width: 300px;
}
nav input {
font-family: "Lato", sans-serif !important;
height: 20px !important;
background: #545a69 !important;
background: linear-gradient( rgba(84, 90, 105, 0.9), rgba(84, 90, 105, 0.9)) !important;
border: none !important;
font-size: 14px !important;
color: #fff !important;
padding: 5px 0px 5px 5px !important;
padding-left: 15px !important;
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;
}
Please try this code, I have tried to write as simple as I can so you can easily change CSS parameters to your needs. (Take a look at HTML, there you will notice that I have moved position of input block code above ul list.)
<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.css">
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');
#import url('https://fonts.googleapis.com/css?family=Raleway');
#import url('https://fonts.googleapis.com/css?family=Roboto');
:root {
--main-bg-color: #121a22;
--main-bg-color-gradient: linear-gradient( rgba(18, 26, 34, 0.8), rgba(18, 26, 34, 0.8));
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
font-size: 16px;
background-color: var(--main-bg-color);
}
/* Navigation bar */
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.nav-wrapper {
display: flex;
max-height: 50px;
}
.logo-text {
display: flex;
width: 300px;
background-color: #e5e5e5;
align-items: center;
}
.logo-svg {
display: block;
width: 50px;
height: 50px;
background-color: white;
margin-right: 10px;
}
.brand-logo {
text-decoration: none;
}
.input-field {
display: flex;
align-items: center;
width: calc(100% - 600px);
}
input#autocomplete-input {
display: block;
margin: 0 auto;
width: 90%;
max-width: 700px;
height: 30px;
}
.nav-wrapper ul {
display: flex;
justify-content: space-around;
align-items: center;
width: 300px;
padding: 0;
margin: 0;
background-color: #e5e5e5;
}
.nav-wrapper ul li {
list-style: none;
height: 100%;
background-color: transparent;
line-height: 50px;
padding: 0 10px;
transition: background-color .3s ease;
}
.nav-wrapper ul li:hover {
background-color: white;
}
.nav-wrapper ul li a {
text-decoration: none;
}
</style>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<div class="logo-text" href="#"><object href="#" class="logo-svg"></object>LOGO</div>
</a>
<div class="input-field">
<input type="text" class="autocomplete z-depth-0" id="autocomplete-input" placeholder="Search.." />
</div>
<ul class="right">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</nav>
</body>
</html>
Related
Well, according to the video I saw on YouTube, I wanted to start by creating a dropdown list. Everything was fine in the first step, and I created two sub-menus, host and domain, for the Services tag. Now I want to create several submenus for the host and domain submenus, but unfortunately the submenus are not fully displayed and only the last submenu is displayed?
What do you think I should do? where is the problem from ?
Attached image and html and css files
Note: I am totally newbie so simple explanations would be better
*{
box-sizing: border-box;
}
body{
margin: 0;
}
header{
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
header .menu{
margin: 0px;
background-color: orange;
}
header nav ul{
margin: 0px;
}
a{
text-decoration: none;
}
.menu ul li{
display: inline-block;
margin: 20px;
padding: 20px;
font-weight: bold;
color: black;
}
ul li:hover{
background-color: rgb(132, 127, 127);
color:rgb(249, 249, 249);
}
.sub-menu1{
width:200px;
display: none;
background-color: orange;
position: absolute;
margin-left: -20px !important;
padding: 0px !important;
transform: translateY(20px);
}
.sub-menu1 li{
width:200px;
margin: 0px !important;
}
.dropdown_menu:hover ul{
display: block ;
}
.sub-menu1 li:hover{
background-color: rgb(103, 197, 109);
color:rgb(249, 249, 249);
}
.sub-host ul li{
width:200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
position: absolute;
transform: translate(140px, -55px);
}
.sub-domain ul li{
width:200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
position: absolute;
transform: translate(140px, -55px);
}
.sub-domain ul li{
display: none;
}
.sub-host:hover li{
display: block;
}
.sub-domain:hover li{
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<meta name="viewport" content="width=device-width, intital-scale=1.0">
<title> Dropdown Menu </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="menu">
<ul>
<li> Home </li>
<li> About us </li>
<li> Contact us </li>
<li class="dropdown_menu">
Services
<ul class="sub-menu1" >
<li class="sub-host" >
Host
<ul class="sub-menu2">
<li>1-month</li>
<li>3-month</li>
<li>6-month</li>
<li>12-month</li>
</ul>
</li>
<li class="sub-domain">
Domain
<ul class="sub-menu3">
<li>.ir</li>
<li>.com</li>
<li>.org</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
Image
You are facing this issue because by mistake you have made position of .sub-domain ul li and .sub-host ul li as absolute due to which all the sub-menus are stacking on each other and only last one is visible. To fix the issue remove position:absolute. I have also removed two bugs which occur while hovering on submenu. You can see the code.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
header {
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 30px;
}
header .menu {
margin: 0px;
background-color: orange;
}
header nav ul {
margin: 0px;
}
a {
text-decoration: none;
}
.menu ul li {
display: inline-block;
margin: 20px;
padding: 20px;
font-weight: bold;
color: black;
}
ul li:hover {
background-color: rgb(132, 127, 127);
color: rgb(249, 249, 249);
}
.sub-menu1 {
width: 200px;
display: none;
background-color: orange;
position: absolute;
margin-left: -20px !important;
padding: 0px !important;
transform: translateY(20px);
}
.sub-menu1 li {
width: 200px;
margin: 0px !important;
}
.dropdown_menu:hover ul {
display: block;
}
.sub-menu1 li:hover {
background-color: rgb(103, 197, 109);
color: rgb(249, 249, 249);
}
.sub-host ul li {
width: 200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
transform: translate(140px, -55px);
}
.sub-domain ul li {
width: 200px;
background-color: green;
display: none;
margin: 0px !important;
padding: 20px !important;
transform: translate(140px, -55px);
}
.sub-domain ul li {
display: none;
}
.sub-host:hover li {
display: block;
}
.sub-domain:hover li {
display: block;
}
.sub-menu2,
.sub-menu3 {
position: absolute;
height: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meat charset="UTF-8">
<meta name="viewport" content="width=device-width, intital-scale=1.0">
<title> Dropdown Menu </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="menu">
<ul>
<a href="#">
<li> Home </li>
</a>
<li> About us </li>
<li> Contact us </li>
<li class="dropdown_menu">
Services
<ul class="sub-menu1">
<li class="sub-host">
Host
<ul class="sub-menu2">
<li>1-month</li>
<li>3-month</li>
<li>6-month</li>
<li>12-month</li>
</ul>
</li>
<li class="sub-domain">
Domain
<ul class="sub-menu3">
<li>.ir</li>
<li>.com</li>
<li>.org</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</header>
</body>
</html>
Here's the problem: the navbar looks like it's floating down the page.
Why does the nav-bar look like this? I'm still new to css and I've tried everything but nothing works. I've re-written the code again but the issue wasn't resolved. Here's what the nav should look like.
this tutorial is from this udemy course
https://www.udemy.com/design-and-develop-a-killer-website-with-html5-and-css3/#%2F
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
background-color: #fff;
color: #555;
font-family: 'Lato', 'Arial', sans-serif;
font-weight: 300;
font-size: 20px;%);
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
/*-------------------------------------------------*/
/*reusable componment*/
/*-------------------------------------------------*/%);
.row {
max-width: 1140px;
margin: 0 auto;
}
/*-----------*/
/*headings*/
/*-----------*/
h1 {
margin: 0;
margin-bottom: 20px;
margin-top: 0;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
/*-----------*/
/*buttons*/
/*-----------*/
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
transition: background-color 0.2s,border 0.2s ,color 0.2s;
}
.btn-1:link,
.btn-1:visited {
background-color: #e67e22;
color: #fff;
margin-right: 15px;
}
.btn-2:link,
.btn-2:visited {
border: 1px solid #e67e22;
color: #e67e22
}
.btn-1:hover,
.btn-1:active {
background-color: #b05d14;
}
.btn-2:hover,
.btn-2:active {
background-color: #b05d14;
color: #fff;
}
/*-------------------------------------------------*/
/*HEADER*/
/*-------------------------------------------------*/
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
header {
background-image: -webkit%);-linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(assets/images/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
background-attachment: fixed;
}
.logo{
height: 100px;
width: auto;
float: left;
margin-top: 20px;
}
.main-nav {
float: right;
list-style: none;
margin-top: 55px;
}
.main-nav li {
display: inline-block;
margin-left: 40px;
}
.main-nav li a:link,
.main-nav li a:visited {
padding: 8px 0;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 90%;
border-bottom: 2px solid transparent;
-webkit-transition: border-bottom 0.3s, color 0.3s;
transition: border-bottom 0.3s, color 0.3s;
}
.main-nav li a:hover,
.main-nav li a:active {
border-bottom: 2px solid #BF55EC;
<!DOCTYPE html>
<html>
<head>
<title>omni food</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="grid.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
</head>
<body>
<header>
<nav>
<div class="row">
<img src="assets/images/logo-white.png" alt="omni-food" class="logo">
</div>
<div class="main-nav">
<ul>
<li> Food delivery </li>
<li> How it works </li>
<li> Our cities </li>
<li> Sign up </li>
</ul>
</div>
</nav>
<div class="hero-text-box">
<h1>Goodbye junk food.<br>hello super healthy meals</h1>
<a class="btn btn-1" href="#">I'm hungry</a>
<a class="btn btn-2" href="#">show me more</a>
</div>
</header>
</body>
</html>
please help me
The is defined so that it takes up the entire row on screen. This forces onto a new row making it appear lower. If you still want the functionality of the row class, it should enclose both the img & UL. You can get rid of that div entirely and apply the class row to the Nav element.
<nav class="row">
<img src="assets/images/logo-white.png" alt="omni-food" class="logo">
<div class="main-nav">
<ul>
<li> Food delivery </li>
<li> How it works </li>
<li> Our cities </li>
<li> Sign up </li>
</ul>
</div>
</nav>
Don't use entire row for only logo . you have used
.row{ max.width: 1180px; }
put this .row class in nav element or
remove row class from div for logo .
<nav class("row")>
So I'm building a website with a top menu but I ran into a problem. Basicly I want to have my menu centered but now its aligned to the left. Also the menu has a background color with would have to expand the whole width. I've tryed the answers describes here: How do I center the navigation menu?. But to no succes.
My CSS/HTML code is:
body {
font-family: FuturaLight;
background: white;
color: #333;
align-content: top;
margin: 0;
margin-bottom: 5em;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
ul {
font-family: Futura;
font-size: 25px;
list-style-type: none;
position: fixed;
top: 61px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right: 1px solid yellowgreen;
border-top: 1px solid yellowgreen;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #333;
}
.active {
background-color: white;
color: green
}
.spacer {
width: 100%;
height: 95px;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<ul>
<li><a class="active" href="scouts_permeke_site.html">Home</a>
</li>
<li>Nieuws
</li>
<li>Contact
</li>
<li>Over
</li>
<li>Foto's
</li>
<li>Activiteiten
</li>
<li>Papierwerk
</li>
<li>Afspraken
</li>
<li>Uniform
</li>
<li>Technieken
</li>
<li>Jaarthema
</li>
<li>Rituelen
</li>
<li>Verhuur
</li>
<li>Inschrijvingen
</li>
</ul>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%" " >
<div style="font-family: Futura ">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
</BODY>
</HTML>
Many thanks in advance.
Add to your ul in your Stylesheet this:
text-align: center;
and replace from li
float: left;
with this
display: inline-block;
That could do it.
Hope this helps.
Have you considered flexbox as it will work depending on screen size and you can set it to be centre alligned.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Just note it wont work in older versions of ie
BODY {
font-family: FuturaLight;
background: white; color: #333;
align-content: top;
margin: 0;
margin-bottom: 5em;
padding: 0;
}
.margin {
margin-left: 300px;
margin-right: 300px;
}
ul {
font-family: Futura;
font-size: 25px;
list-style-type: none;
position: fixed;
top: 61px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
display: flex;
justify-content:center;
flex-wrap: wrap
}
li {
float: left;
border-right:1px solid yellowgreen;
border-top:1px solid yellowgreen;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #333;
}
.active {
background-color: white;
color: green
}
.spacer
{
width: 100%;
height: 95px;
}
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Scouts Permeke</TITLE>
<link rel="stylesheet" type="text/css" href="siteStyle.css">
</HEAD>
<BODY>
<H1>Scouts Permeke</H1>
<ul>
<li><a class="active" href="scouts_permeke_site.html">Home</a></li>
<li>Nieuws</li>
<li>Contact</li>
<li>Over</li>
<li>Foto's</li>
<li>Activiteiten</li>
<li>Papierwerk</li>
<li>Afspraken</li>
<li>Uniform</li>
<li>Technieken</li>
<li>Jaarthema</li>
<li>Rituelen</li>
<li>Verhuur</li>
<li>Inschrijvingen</li>
</ul>
<div class="spacer">
</div>
<img src="groepsfoto.jpg" width="100%"" >
<div style="font-family: Futura">
<H2>Welkom op onze vernieuwde site!</H2>
<H2>Kijk gerust even rond.</H2>
</div>
</BODY>
</HTML>
I wonder why can't i say hi in the beggining of the message? It's being auto removed. Anyway i'm trying to make a css only slide out menu following this lesson:
https://www.youtube.com/watch?v=d4P8s-mkMvs&list=PLqGj3iMvMa4L8L9p0bCpBn6A5lwKxqwqR
But for some reason it doesn't work for me. The idea is - when menu icon is clicked the checkbox is checked and menu should change it's margin-left from -200 to 0. But it doesn't.
Any help?
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}
nav {
height: 100%;
position: fixed;
margin-left: -200px;
}
nav ul {
list-style: none;
background-color: #333;
padding-top: 30px;
width: 150px;
height: 100%;
margin: 0;
}
nav ul li {
margin-top: 5px;
}
nav ul li a {
margin-left: 17px;
text-decoration: none;
color: #A0A0A0;
font-size: 19px;
text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
nav ul li a:hover {
color: #FFF;
}
.menuicon {
font-size: 20px;
margin-top: 30px;
margin-left: 30px;
color: #333;
text-decoration: none;
cursor: pointer;
}
#menustate {
margin-left: 400px;
}
#menustate:checked + .page-wrap .sidebar{
margin-left: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Slide nav</title>
</head>
<body>
<div class="page-wrap">
<nav class="sidebar">
<ul>
<li>Home</li>
<li>Products</li>
<li>Cities</li>
<li>Contacts</li>
</ul>
</nav>
<label for="menustate"><p class="menuicon" href="">☰</p></label>
<div class="check">
<input type="checkbox" id="menustate" value="">
</div>
</div>
</body>
</html>
Css + operator
When using the css + operator. It needs to be a sibling directly next
to one an other.
Added transition, makes it look better.
body {
padding: 0;
margin: 0;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}
nav {
height: 100%;
position: fixed;
}
nav ul {
list-style: none;
background-color: #333;
padding-top: 30px;
width: 150px;
height: 100%;
margin: 0;
}
nav ul li {
margin-top: 5px;
}
nav ul li a {
margin-left: 17px;
text-decoration: none;
color: #A0A0A0;
font-size: 19px;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
}
nav ul li a:hover {
color: #FFF;
}
.menuicon {
font-size: 20px;
margin-top: 30px;
margin-left: 30px;
color: #333;
text-decoration: none;
cursor: pointer;
}
.sidebar {
margin-left: -200px;
transition: margin-left 1s;
}
#menustate:checked + .sidebar {
margin-left: 0px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css-1.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="javascript-1.js"></script>
<title>Slide nav</title>
</head>
<body>
<div class="page-wrap">
<label for="menustate">
<p class="menuicon" href="">☰</p>
</label>
<input type="checkbox" id="menustate" value="">
<nav class="sidebar">
<ul>
<li>Home
</li>
<li>Products
</li>
<li>Cities
</li>
<li>Contacts
</li>
</ul>
</nav>
</div>
</body>
</html>
The problem is that your selector, which should be "doing the magic" is incorrect.
#menustate:checked + .page-wrap .sidebar
This will target a .sidebar element, inside a .page-wrap element which is ADJACENT to a checked #menustate element. This means that not only do the #menustate and .page-wrap need to be siblings, the former needs to be placed RIGHT before the latter. So something like this.
<input id="menustate" type="checkbox">
<div class=".page-wrap>
<div class="sidebar"></div>
</div>
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.