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.
Related
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>
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")>
Okay, here it goes:
I am creating my first website. Immediately come across a problem which seems difficult to overcome.
I want to center my image between the header and footer which will stay centered vertically and horizontally, regardless of screen size.
I've seen examples using flexbox where you can center text and whatnot in the middle of the target area. Seems like its useful. I tried it but maybe i haven't applied it correctly.
My code so far
#import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
* {
margin: 0;
padding: 0;
border: 0;
}
body {
color: grey;
font-family: 'Alegreya', sans-serif;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
.banner {
width: 100%;
height: 100%;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.banner-inner {
max-width: 60%;
margin: 0 auto;
}
header {
width: 100%;
height: 80px;
display: block;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
/*--- START NAVIGATION --*/
nav {
float: right;
/* Top, Right, Bottom, Left */
padding: 25px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
padding: 10px;
font-weight: bold;
}
nav ul li a {
color: grey;
text-decoration: none;
font-weight: bolder;
}
nav ul li a:hover {
color: lightgrey;
}
.current {
color: black;
}
/* --- MUSIC PAGE --*/
.music-wrapper {
width: 100%;
text-align: center;
}
.album-list figure {
display: inline-block;
margin: 10%;
}
.album-list figcaption {
text-align: center;
font-size: 150%;
font-family: 'Alegreya Sans', sans-serif;
font-weight: bold;
margin: 2%;
}
.album-list a {
text-decoration: none;
}
/* --- SOCIAL AND FOOTER --*/
footer {
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i {
font-size: 200%;
margin: 0.5%;
padding: 0.5% 4% 0.5% 4%;
color: grey;
}
.social i:hover {
color: lightgrey;
}
footer.second {
max-height: 100px;
position: fixed;
bottom: 0px;
z-index: 10;
background: white;
border-top: 1px solid grey;
}
footer.second p {
padding-bottom: 5px;
text-align: center;
color: grey;
font-weight: bold;
}
/*---- MEDIA QUERIES---- */
#media screen and (max-width: 760px) {
header {
position: absolute;
}
#logo {
margin: 15px 0 20px -25px;
background: url(img/SA_mobile.png) no-repeat center;
}
.banner {
padding-top: 150px;
}
#menu-icon {
display: inline-block;
color: #000000;
}
nav ul, nav:active ul {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
right: 20px;
top: 60px;
border: 2px solid #000000;
border-radius: 5px 0 5px 5px;
width: 50%;
}
nav:hover ul {
display: block;
background: #FFF;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
}
.social i {
font-size: 150%;
padding: 2% 4% 2% 4%;
}
/*--- MUSIC PAGE --*/
.music-wrapper {
padding-top: 25%;
padding-bottom: 25%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Content fits mobile screens-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<title>SPAZ Attack</title>
</head>
<body>
<header>
<div class="header-inner">
<nav>
<!--- Icon For Moblie Version -->
<ul>
<li>Home</li>
<!--- Albums/Videos/Audio -->
<li>Music</li>
<!--- Calander gig dates/book us -->
<li>Gigs</li>
<!--- About the band -->
<li>Bio</li>
<!--- Merchandise -->
<li>Merch</li>
<!--- Contact Info -->
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<!--- END HEADER -->
<section class="banner">
<div class="banner-inner">
<img src="img/spazAttackLogoSmaller1.png">
</div>
</section>
<!-- END BANNER -->
<!--- END FOOTER -->
<footer class="second">
<div>
<ul class="social">
<li><i class="fab fa-facebook"></i></li>
<li><i class="fab fa-youtube"></i></li>
<li><i class="fab fa-bandcamp"></i></li>
<!-- Don't Have YET
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
-->
</ul>
</div>
<p>© SPAZ Attack</p>
</footer>
<!--- END SOCKET -->
</body>
</html>
Checkout this fiddle: https://jsfiddle.net/8cyjc9qw/
.mid {
height: 70vh;
display: flex;
justify-content: center;
align-items: center;
}
I have used some other examples to demonstrate how it would look. I have used vh for header and footer and assign the remaining height to main content section and use flexbox to center the image. Hope this helps.
Question
I've looked over the code very carefully and can't see a reason at all whatsoever why the header nav float isn't working in the stylesheet. I'm including all the html code and css code down below. I want to move my
header nav to the right in my css code so that my links appear on the top right corner of my home page horizontally.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
You have two problems that become quite obvious if you look at the page in the browser inspector:
The first is that you have floated the branding div, and floating an element removes it from the regular flow and it isn't full width anymore, so the navigation that is inside is put below the heading.
You have mixed the opening and closing tags of <h1> and <span class="highlight"> and this caused that the block <h1> is being inside of the inline <span>, at least in Firefox.
Compare this screenshot of your example in the Firefox inspector:
With this other one of the adjusted code:
Remember, browser inspector is your friend.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
/*float: left;*/
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Home</title>
<body>
<header>
<div class="container">
<div id="branding"><h1><span class="highlight">James
Velardi</span></h1>
<nav>
<ul>
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I added class="nav" to the navigation unordered list and set position to absolute using a .nav selector.
.nav {
position:absolute;
top: 20px;
right:0px;
}
You can change the position by adjusting top and right values.
body {
font: 15px/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: #f4f4f4;
}
/*Global*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
ul {
margin: 0;
padding: 0;
}
/* header */
header {
background: #35424a;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #000 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
.nav {
position:absolute;
top: 20px;
right:0px;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ccc;
font-weight: bold;
}
/* Home Section */
#home {
min-height: 400px;
background: url("http://www.ridgedesign.ie/wp-content/uploads/2011/02/Ridge-Design-Website-Design-Background.jpg") 0 400px;
background-size: cover;
text-align: center;
color: #fff;
}
#home h1 {
margin-top: 100px;
font-size: 55px;
margin-bottom: 10px;
}
#home p {
font-size: 20px;
}
<header>
<div class="container">
<div id="branding"><span class="highlight"><h1>James
Velardi</h1></span>
<nav>
<ul class="nav">
<li class="current">Home</li>
<li>About</li>
<li>Services</li>
</ul>
</nav>
</div>
</div>
</header>
<section id="home">
<div class="container">
<h1>Affordable Professional Web Design</h1>
<p>laskfj;jla;jal;j;aljs;lasj;lasjl;ajsdlajsdl;fajsldfkjals;dfjalsdkfjalsf</p>
</div>
</section>
I think your #branding div being floated left is breaking it--and doesn't seem necessary since you want that left aligned anyway.
It works for me with:
#branding {
float: none
}
Also - in your html you need to move your floated .nav div before the .highlight span
I'm trying to have my nav at the top right of the page but it displays like 100px down from the top. I have no clue what's causing this, I tried altering the padding and margin of other things in the header but I cant solve it. Any help ?
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CT Designs | Home</title>
<!-- Stylesheets-->
<link rel="stylesheet" type="text/css" href="css/index.css">
<!-- Fonts-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1> CT Designs </h1>
</div>
<div id="menu">
<svg height="40px" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="40px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path class="fill" d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
</div>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<script src="jquery-3.1.1.min" href="main.js"></script>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
}
.container {
min-width: 80%;
float: center;
}
ul {
padding: 0;
margin: 0;
}
header {
position: fixed;
width: 100%;
height: 100%;
background-image: url("../resources/img/header.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
header .container #branding h1 {
display: block;
position: absolute;
top: 45%;
left: 50%;
transform: translateX(-50%);
font-size: 70px;
text-transform: uppercase;
font-weight: 400;
margin: 0;
padding: 0;
font-family: Roboto;
color: #fff;
margin-top: -0.5em;
padding: 30px;
border: solid 3px #fff;
}
header .container #menu {
margin: 10px;
padding: 0;
width: 100px;
}
header .container #menu svg {
cursor: pointer;
margin: 0;
padding: 0;
}
header .container #menu svg path.fill {
fill: white;
}
header .container nav ul {
float: right;
margin-bottom: 40px;
}
header .container ul li {
display: inline-block;
text-decoration: none;
color: white;
font-size: 20px;
font-family: Roboto;
padding-right: 20px;
}
You have set your header .container nav ul to float right, which is under your div#menuand that's where the space is coming: the space is caused by the svg element you have, which your 'hamburger' menu.
Here is one solution:
#menu {
float: left;
}
header .container nav ul {
float: right;
margin-top: 20px;
}