I have the webpage that I am working on. Everything about it works out properly in terms of responsiveness, however, only the footer doesn't work properly. I would like for the 3 sections of the footer to be displayed underneath each other when the screen is made smaller. Any help here is greatly appreciated. Check out my code below:
HTML:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Papia</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--- This is the path to the image that will display on mobile --->
<video poster="assets/backupimage.jpg" id="bgvid" playsinline autoplay muted loop>
<!--- Inlcude the video files with .webm file first --->
<source src="assets/papia.webm">
<source src="assets/papia.mp4">
<source src="assets/papia.mov">
</video>
<div id="topLeft">
<img src="assets/papia-logo-secondary.svg">
</div>
<div id="topRight">
Find a table
</div>
<div id="logo">
<img src="assets/papia-logo-main.svg">
</div>
<div id="left">
<p>4:30pm - close (kitchen closes at 11pm)</p>
</div>
<div id="centre">
Facebook
Instagram
Twitter
</div>
<div id="right">
<p>64 Welfare Road, Cole Bay, Sint Maarten</p>
</div>
<!---
This is an option button that will pause the video background
<div>
<button>Pause</button>
</div>
--->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
CSS:
#left{
position: absolute;
float: left;
bottom: 0;
left: 20px;
color: white;
}
#centre{
position: absolute;
float: left;
margin-left: 40%;
bottom: 10px;
clear: inherit;
min-width: 300px;
}
#right{
position: absolute;
float: left;
margin-left: 78%;
bottom: 0;
color: white;
}
#media screen and (max-width: 500px) {
div{display: block}
}
#media screen and (max-device-width: 800px) {
html { background: url(assets/backupimage.jpg) #000 no-repeat center center fixed; }
#bgvid { display: none; }
div{display: block}
}
I agree with hungerstar's comment - absolute positioning will make it needlessly difficult to make your webpage responsive. That being said, it can be done. You're already using #media screen and (max-width: 500px) syntax in your CSS but not using it to the full extent of its capabilities. Inside of the section marked for the max-width: 500px section, you have the opportunity to totally redefine your css for a browser window smaller than 500px. Inside those brackets, you can just redefine the CSS for your 3 divs.
#media screen and (max-width: 500px){
#left{
position: absolute;
float: left;
bottom: 200px;
left: 20px;
color: white;
}
#centre{
position: absolute;
left: 20px;
float: left;
bottom: 100px;
clear: inherit;
min-width: 300px;
}
#right{
position: absolute;
float: left;
left: 20px;
bottom: 0;
color: white;
}
}
So this will check the width of your screen, and when it becomes smaller than 500px, this CSS will be applied and your 3 divs will be repositioned all the way to the left, stacked on top of each other (i made up positions for them arbitrarily (100 and 200 px from the bottom). You will need to redefine all this for the 800px-sized screen as well
Absolute positioning is a bad choice for page layout. Use floats or flexbox.
Float
main,
footer > div {
text-align: center;
font-family: Roboto, sans-serif;
}
main {
min-height: 300px;
color: #f1f1f1;
background-color: #333;
font-size: 2.5rem;
}
main strong {
text-decoration: underline;
}
footer > div:nth-child( 2 ) {
background-color: #eee;
}
#media ( min-width: 450px ) {
footer > div {
float: left;
width: 33.333%;
}
}
<main>
<strong>Floated</strong> footer sections.
</main>
<footer>
<div>One</div>
<div>Two</div>
<div>Three</div>
</footer>
Flexbox
main,
footer > div {
text-align: center;
font-family: Roboto, sans-serif;
}
main {
min-height: 300px;
color: #f1f1f1;
background-color: #333;
font-size: 2.5rem;
}
main strong {
text-decoration: underline;
}
footer {
display: flex;
flex-direction: column;
}
footer > div {
flex: 1;
}
footer > div:nth-child( 2 ) {
background-color: #eee;
}
#media ( min-width: 450px ) {
footer {
flex-direction: row;
}
}
<main>
<strong>Flex</strong> footer sections.
</main>
<footer>
<div>One</div>
<div>Two</div>
<div>Three</div>
</footer>
You are completely messing the layout with position:absolute
You need to do something like this:
#left {
float: left;
color: white;
}
#centre {
float: left;
clear: inherit;
min-width: 300px;
}
#right {
float: left;
color: white;
}
Here's the fiddle
Related
So I currently have a navbar that is responsive to the size of the screen built with HTML & CSS only. But I want it to stick to the container and also remain responsive to different screen sizes. Is there anyway to do this with only HTML & CSS? I have included the responsive Navbar code in this post that I would to update and make sticky.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4CAF50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
```
You need position: fixed; and an actualy position like top: 0;.
But also you could use the position: sticky; property instead to avoid overlapping content, like the other answer mentioned. Here you can see the browser support which is pretty good for position sticky, but slightly worse than fixed.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4CAF50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: fixed;
top: 0;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
You can also use position:sticky; and top:0 in your first media query to keep the navbar in place at the top, even when you scroll. This will work better than position:fixed because the content won't slide up behind the header while you are at the top.
Edit - embedded code directly.
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #4caf50;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: sticky;
top: 0;
}
.sidebar a {
float: left;
}
div.content {
margin-left: 0;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
Okay, I found a solution: with #media I'm accessing the image's width and the bar separately and it's working but is there any shorter way codewise?
I searched the internet for a solution but none of what I found helped me so far.
I'm trying to make my header to be responsive to the browser's width but it isn't working.
I tried to make just the image responsive or just the top bar but nothing works...
Any ideas?
<header class="header">
<div class="top-bar">
<div class="nav-container">
<ul class="navbar">
<li>החשבון שלי</li>
<li>המתכונים שלי</li>
<li>אודות</li>
<li class="last-btn">צרו קשר</li>
</ul>
</div>
</div>
<div class="banner">
<img src="Images\maadanot_winter_banners.jpg" alt="אפייה חורפית"/>
</div>
</header>
and this is the css:
body {
margin: 0;
}
.top-bar {
width: 100%;
background-color: #404040;
padding: 12px;
}
.nav-container {
width: 68%;
margin: auto;
}
.navbar {
margin: 0;
list-style-type: none;
background-color: #404040;
display: table;
font-family: Helvetica;
font-size: 14px;
}
.navbar li {
display: table-cell;
border-left: 1px solid white;
padding: 0px 10px;
overflow: hidden;
width: 85px;
text-align: center;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar a:hover {
font-weight: bold;
}
#media screen and (max-width:900px) {
.header {
width: 100%;
}
}
.banner {
margin-top: 33px;
width: 100%;
text-align: center;
}
Try to change it into:
#media screen and (max-width:900px) {
.header {
width: 100vw; /* viewport width */
}
}
device-width is not correct value for width.
Use : <
meta name="viewport" content="width=device-width, initial-scale=1">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%.
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
When you are working om Media Queries, You have to need change inherit property if you declare cascaded down.If you have set Backgruond images on the body, there is need a queries to cancel background images.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
It's not really clear what you want, but to get your image span the whole width in all sizes, you can add this rule:
.banner img {
width: 100%;
}
This will size the image within its container (which has 100% width, so eventually the image will span the width).
BTW: .banner is a DIV that will be 100% wide anyway, so you actually can erase the 100% width for .banner
body {
margin: 0;
}
.top-bar {
width: 100%;
background-color: #404040;
padding: 12px;
}
.nav-container {
width: 68%;
margin: auto;
}
.navbar {
margin: 0;
list-style-type: none;
background-color: #404040;
display: table;
font-family: Helvetica;
font-size: 14px;
}
.navbar li {
display: table-cell;
border-left: 1px solid white;
padding: 0px 10px;
overflow: hidden;
width: 85px;
text-align: center;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar a:hover {
font-weight: bold;
}
#media screen and (max-width:900px) {
.header {
width: 100%;
}
}
.banner {
margin-top: 33px;
}
.banner img {
width: 100%;
}
<header class="header">
<div class="top-bar">
<div class="nav-container">
<ul class="navbar">
<li>החשבון שלי</li>
<li>המתכונים שלי</li>
<li>אודות</li>
<li class="last-btn">צרו קשר</li>
</ul>
</div>
</div>
<div class="banner">
<img src="http://placehold.it/1200x90/fa0" alt="אפייה חורפית" />
</div>
</header>
So I'm trying to recreate the following layout for a lab: http://i.imgur.com/T24vvGu.jpg
I've started by tackling the navigation bar. I set the position to absolute so I can give it a top: 50px; property to move it down 50px from the top.
I tried to then set the logo's position to relative, so that relative to the navigation bar, I can move it 20px from the left or so. But when I use relative positioning, the logo sits inside of the navigation bar and makes the navigation bar's height bigger.
I thought that by setting the logo's position to relative, it would treat the logo as if it's not a part of the navigation bar. However, that's not the case. So what I did was I also set the logo's position to absolute. This entire thing is just killing my soul. For some reason I can't wrap my head around how to do this.
I went to web archive, and looked up spigot design's website. What they did, was they set the navigation bar's position to fixed, and the logo to relative. I tried doing this as well but the logo would still sit inside the navigation bar and extend it's height.
Furthermore, I have to set the logo to sit in the middle of the navigation bar when the browser is 768px and below. And then, two menu links sit to the left of the logo, and the other two menu links sit to the right of the logo. I'm completely lost at how to do this. I don't think I'd have a problem with the rest of the layout. It's just this navigation bar and logo positioning that's driving me insane.
Here is my code: http://cryptb.in/v48Y#cf572c29a798b3c6593631d831c8a323
Should I upload my code with the logo images as well? That may make it easier to follow. I'm not sure what the best practice is as I'm new to stack overflow.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Lab Eight</title>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- navigation bar left -->
<div class="navbar">
<div id="logo"></div>
<div class="container">
<ul class="float-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Media</li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="column-twelve">
</div>
<div class="column-twelve">
</div>
</div>
</div>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: #f3f3f3;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
line-height: 1.1;
}
/* Horizontal line to divide content */
hr {
margin-top: 10px;
margin-bottom: 10px;
border: 0;
border-top: 1px solid #332929;
}
#logo {
background: url('images/logo-left.png');
display: block;
width: 250px;
height: 100px;
position: absolute;
left: 15px;
top: -20px;
}
.column-twelve h1, h2, h3, h4, h5, h6 {
color: #f2f2f2;
}
.column-twelve h2 {
font-size: 1.875em;
}
.row .column-twelve p {
color: #f2f2f2;
font-weight: 400;
font-size: 0.875em;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* Acts as a container to wrap all the content so it doesn't take up 100% of the page. */
.container {
width: 90%;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}
.navbar {
position: absolute;
width: 100%;
min-height: 58px;
top: 50px;
background: #fefefe;
}
.navbar li {
position: relative;
display: inline;
list-style: none;
}
.navbar li a {
color: #333333;
text-decoration: none;
font-size: 0.75em;
font-weight: bold;
padding: 10px 10px;
text-transform: uppercase;
}
/* The row for the columns. */
.row {
margin-right: -15px;
margin-left: -15px;
}
.column-twelve {
width: 100%;
}
.column-eleven {
width: 91.66666667%;
}
.column-ten {
width: 83.33333333%;
}
.column-nine {
width: 75%;
}
.column-eight {
width: 66.66666667%;
}
.column-seven {
width: 58.33333333%;
}
.column-six {
width: 50%;
}
.column-five {
width: 41.66666667%;
}
.column-four {
width: 33.33333333%;
}
.column-three {
width: 25%;
}
.column-two {
width: 16.66666667%;
}
.column-one {
width: 8.33333333%;
}
#media screen and (max-width: 768px) {
#logo {
position: absolute;
margin: 0 auto;
background: url('images/logo-center.png');
height: 146px;
width: 250px;
}
}
Here you go: http://codepen.io/n3ptun3/pen/avrXaE?editors=110
To complete this, I positioned the #navbar relative to its normal position. Then I absolutely positioned the #logo and #container (from their first positioned ancestor element, i.e. #navbar.)
The height issue comes from setting min-height: 58px; on .navbar. Instead, you want to use height: 58px;.
FYI--when using media queries, it is best practice to write your code mobile first. This means writing your code for the smallest screen first. In order to do this, you must use min-width instead of max-width. Also, you want to use #media only screen, instead of #media screen. This targets only browsers that can understand media queries.
Hope this helps. Feel free to ask any questions about the code in the comments section.
HTML
<div id="page">
<div id="navbar">
<div id="logo"></div>
<ul id="container">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Media</li>
</ul>
</div>
</div>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: #f3f3f3;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
#page {
height: 600px;
}
#navbar {
position: relative;
width: 100%;
height: 50px;
top: 75px;
background-color: #fefefe;
}
#logo {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: #333;
position: absolute;
top: -50px;
left: 50%;
transform: translate(-50%);
}
#container {
position: absolute;
top: 13px;
padding: 0;
margin: 0;
width: 100%;
}
#navbar li {
display: none;
}
#navbar li a {
color: #333333;
text-decoration: none;
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
}
#navbar li:nth-child(3) a,
#navbar li:nth-child(4) a {
position: relative;
left: 100%;
}
#media only screen and (min-width: 569px) {
#navbar li {
display: inline-block;
list-style: none;
width: 20%;
float: left;
text-align: center;
}
}
#media only screen and (min-width: 769px) {
#logo {
left: 50px;
transform: translate(0);
}
#container {
width: 30%;
right: 50px;
}
#navbar li {
width: 25%;
}
#navbar li:nth-child(3) a,
#navbar li:nth-child(4) a {
left: 0;
}
}
EDIT:
In response to your additional questions:
:nth-child() is a pseudo-class selector. It selects the child that is the desired ordinal (i.e. 1st, 2nd, 3rd, 4th, 5th, etc.) of its parent. The ordinal is designated by the number in parentheses. So if you look at my code, you'll see li:nth-child(3). This means: select all li elements that are the 3rd child of their parent. If the 3rd child isn't an li element, it will NOT be selected.
In regards to your media query question: The reason I placed the left: 50%; transform: translate(-50%); code outside of the media query, is because I'm using the mobile first method of coding. Mobile First design is the current standard for responsive design. It means that you are designing for the smallest screen (mobile) first. So, I am centering the logo, and removing the text links, outside of the media query. Then I target the tablet in my first media query: #media only screen and (min-width: 569px). This targets screens that have a resolution of 569px or higher, and adds the text links in the nav bar. Finally, I use another media query: #media only screen and (min-width: 769px) to target larger screens (computers), with a screen size of 769px or higher. In this media query, I position the logo on the left and the text links on the right.
NOTE: In your code, you are using desktop first design. You are designing for the large screen first. Then you use media queries for smaller sizes. That's why your media query uses max-width. I'm using mobile first design. I am designing for the small screen first. Then I use media queries for larger sizes. That's why my media query uses min-width.
Hope this helps!
I have a responsive page which can be resized to fit a desktop, tablet or phone. The phone and tablet css is ok but I have problem with the desktop. The difference is the main div which holds all the content.
For the phone and tablet, the main div width is 100% of the screen but for the desktop it should be fixed at 900px and also centered on the screen.
When I have it centered, the main div won't adjust its height depending on the content in it but it will for the other screen sizes. When I add a float: left; to the main div, it floats to the right and then the height follows the content in it
It's probably a really simple fix but I have tried everything I know and googled without finding the solution.
Thanks guys!
body {
background-color: #f1f1f1;
margin: 0;
}
#main {
background-color: #0000ff;
color: #222222;
float: left;
height: auto;
width: 100%;
}
/* Home Big
/*************************/
#home-big {
height: auto;
width: 100%;
}
#home-big h1 {
background-color: #1eaccc;
color: #ffffff;
margin: 0;
padding: 7px;
}
/* Home Big Content
/*************************/
.home-big-content {
float: left;
height: auto;
margin-top: 10px;
width: 100%;
}
/* Home Big Left
/*************************/
.home-big-left {
background-color: #ffff00;
float: left;
height: auto;
width: 50%;
}
.home-big-left img {
height: auto;
width: 100%;
}
/* Home Big Right
/*************************/
.home-big-right {
float: left;
height: auto;
margin-left: 0;
width: 50%;
}
/* TABLET SIZE
/*****************************************************************************/
#media all and (min-width: 600px) {
#main {
background-color: #00ff00;
float: left;
height: initial;
padding: 10px 0;
}
#home-big {
margin: 0 10px;
width: initial;
}
.home-big-left {
background-color: #ffff00;
}
}
/* DESKTOP SIZE
/*****************************************************************************/
#media all and (min-width: 900px) {
#main {
background-color: #ff0000;
float: initial;
margin: 0 auto;
width: 900px;
}
#home-big {
margin: 0;
width: initial;
}
.home-big-left {
background-color: #ffff00;
}
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
<section id="main">
<article id="home-big">
<h1>Headline</h1>
<div class="home-big-content">
<div class="home-big-left">
Left
</div>
<div class="home-big-right">
Right
</div>
</div>
</article>
</section>
</body>
</html>
When you float stuff, you have to clear it or use overflow: hidden
Try:
.clearfix:after {
content: "";
display: table;
clear: both;
}
Apply clearfix class to all containers that contain floated elements, or use overflow: hidden;
You need to clear the floats that are with your #main element. I use the micro clearfix.
Use as follows:
<section id="main" class="cf"></section>
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
Title says it all, my svg logo div with the iframe in it is pushing down my navigation on the right side of my webpage. I don't understand why it is doing that, so I am here to see if I can find some guidance. As always all help is appreciated.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/normalize.css"/>
<title></title>
</head>
<body>
<Header>
<div id="logo"><iframe src="img/logo/caseywoelfle.com.svg" width="150" height="76" frameborder="none"></iframe></div>
<nav>
<ul>
<li>home</li>
<li>about me</li>
<li>portfolio</li>
<li>blog</li>
<li>contact</li>
</ul>
</nav>
</Header>
<div id="homepage">
<div id="banner-h">
<p id="bht">
</p>
</div>
</div>
<footer>
<span id="fom">
<h1>find out more about me</h1>
</span>
</footer>
</body>
</html>
body {
width: 100%;
background: #444444; }
/*Header styles*/
header {
width: 100%;
height: 77px;
background: #ffffff; }
header nav {
height: 100%;
vertical-align: middle;
float: right;
margin-right: 60px; }
header nav #logo {
width: 150px;
margin-left: 60px;
float: left; }
header nav ul {
list-style-type: none;
margin: 0;
padding: 0; }
header nav li {
height: 100%;
line-height: 77px;
display: inline-block;
margin-left: 55px; }
header nav a {
color: #000000;
text-decoration: none;
text-transform: uppercase; }
/*Homepage Styles*/
#homepage {
width: 100%;
background: #444444; }
#homepage #banner-h {
margin-top: 56px;
height: 751px;
background: #ffffff; }
#homepage #banner-h #bht {
height: 88px;
margin: auto;
color: #000000; }
footer {
margin-top: 56px;
background: #ffffff;
width: 100%;
height: 166px; }
footer #fom {
height: 90%;
text-align: center;
display: table;
width: 100%; }
footer h1 {
display: table-cell;
vertical-align: middle; }
/*# sourceMappingURL=style.css.map */
The problem you have is because your iframe is taking up the whole row, so the menu is pushed down.
You can add this bit of CSS #logo {display:inline-block;} to make the iframe act like an inline element (so everything can co-exists on the same line, much like these words you are reading). Then all you have to do is to ensure your nav element is narrow enough to fit onto the page (or else it will be pushed down because there isn't enough space). This demo should explain it better.
Also of note, you CAN have an SVG without an iframe. Take a look at this website I am developing (http://yamichi.me/tour.php), the logo in the page is an SVG tag and it is not in an iframe. This page has more information on using SVG.
For small images, I'd suggest using a PNG instead, as it does not affect loading time much, and has much better support in browsers.