Floating Burger Menu to the left to align with div id - html

Question

I am sure this is something very simple but I want to align my burger Nav with the text I have defined. It is currently sitting underneath.
I have tried including the href link within the defined text but this then causes the burger nav to be shown at all times, and not just mobile sizes. Ideally this will only be shown at smaller screen widths.
Here is my code.
body {
font: 100%/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: white;
}
/* Style the list 'container' */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */
ul.topnav li {
float: left;
}
/* style the links */
ul.topnav li a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* hover */
ul.topnav li a:hover {
color: gold;
}
/* Hide the icon initially */
ul.topnav li.icon {
display: none;
}
/* Global */
.container {
width: 60%;
margin: auto;
overflow: hidden;
}
a {
text-decoration: none;
color: black;
}
ul {
margin: 0;
padding: 0;
}
.subscribe {
height: 38px;
background: gold;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: black;
}
.dark {
padding: 25px;
background: #35424a;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
/* Header **/
header {
background: #35424a;
color: white;
padding-top: 30px;
min-height: 70px;
border-bottom: gold 5px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 100%;
}
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 {
color: gold;
}
header a:hover {
color: gold;
}
h3 .bronze {
color: #cc6633;
}
h3 .silver {
color: silver;
}
h3 .gold {
color: gold;
}
/* Showcase */
#showcase {
min-height: 400px;
color: black;
}
#showcase h1 {
margin-top: 50px;
font-size: 300%;
margin-bottom: 10px;
}
#showcase p {
font-size: 120%;
}
/* Newsletter */
#newsletter {
padding: 15px;
color: #ffffff;
background: #35424a
}
#newsletter h1 {
float: left;
}
#newsletter form {
float: right;
margin-top: 15px;
}
#newsletter input[type="email"] {
padding: 4px;
height: 26px;
width: 250px;
}
/* Sidebar */
aside#sidebar {
float: right;
margin-top: 10px;
}
aside#sidebar .quote input,
aside#sidebar .quote textarea {
top-margin: 10px;
width: 80%;
padding: 10px;
}
/* Main-col */
article#main-col {
float: left;
width: 65%;
}
/* Imagery */
#social {
margin-top: 10%;
text-align: center;
font-size: 150%;
color: black;
}
#imagery {
margin-top: 5%;
margin-bottom: 5%;
}
#imagery .box {
float: right;
text-align: center;
width: 30%;
padding: 10px;
}
#imagery .box i {
font-size: 700%;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
.column img {
margin-top: 12px;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Services */
ul#services li {
list-style: none;
padding: 20px;
border: #cccccc solid 1px;
margin-bottom: 5px;
background: #35424a;
color: white;
}
footer {
padding: 20px;
margin-top: 20px;
color: black;
background-color: gold;
text-align: center;
}
/* Media Queries */
#media(max-width: 768px) {
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#imagery {
font-size: 50%;
float: none;
}
#showcase h1 {
margin-top: 40px;
}
#newsletter button,
.quote button {
display: block;
width: 100%;
}
#newsletter form input[type="email"],
.quote input,
.quote textarea {
width: 100%;
margin-bottom: 5px;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
/* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/*css reset
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-image: url("bg.jpg");
background-size: cover; /*this seems better*/
/*background-size: contain;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset */
<!DOCTYPE html>
<html lang="en">
<head>
<title>DB Plumbing | Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html8shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content="Darran Brady Plumbing">
<meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name="author" content="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
<li class="icon">
☰
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Local Award Winning Trader</h1>
<h2>Call Darren | <i class="fa fa-phone" aria-hidden="true"></i> 07756848657</h2>
<p>DB Plumbing provides a full range of general plumbing and repair services, from installing your new bathroom suite to fixing that leaking tap or joint that has been annoying you for ages. </p>
<p>Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Weekly Blog</h1>
<form>
<input type="email" placeholder="Subscribe today...">
<button type="submit" class="subscribe">Subscribe</button>
</form>
</div>
</section>
<section id="imagery">
<div class="container">
<div class="box">
<i class="fa fa-star" aria-hidden="true"></i>
<h1>Accredited</h1>
<p>Gas Safe Accreditted </p>
</div>
<div class="box">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
<h1>Reputable</h1>
<p>"25 years service experience "</p>
</div>
<div class="box">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<h1>Local</h1>
<p>Sussex and Surrey Countywide</p>
</div>
</div>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
</div>
</footer>
</body>
</html>
Wanting to float the burger nav to align with text

Answer 1

Place your button first, on the top of the nav like this
body {
font: 100%/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
background-color: white;
}
/* Style the list 'container' */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Float the list items left - this is the 'magic' that turns a vertical list into a horizontal row */
ul.topnav li {
float: left;
}
/* style the links */
ul.topnav li a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
/* hover */
ul.topnav li a:hover {
color: gold;
}
/* Hide the icon initially */
ul.topnav li.icon {
display: none;
}
/* Global */
.container {
width: 60%;
margin: auto;
overflow: hidden;
}
a {
text-decoration: none;
color: black;
}
ul {
margin: 0;
padding: 0;
}
.subscribe {
height: 38px;
background: gold;
border: 0;
padding-left: 20px;
padding-right: 20px;
color: black;
}
.dark {
padding: 25px;
background: #35424a;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
/* Header **/
header {
background: #35424a;
color: white;
padding-top: 30px;
min-height: 70px;
border-bottom: gold 5px solid;
}
header a {
color: #ffffff;
text-decoration: none;
text-transform: uppercase;
font-size: 100%;
}
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 {
color: gold;
}
header a:hover {
color: gold;
}
h3 .bronze {
color: #cc6633;
}
h3 .silver {
color: silver;
}
h3 .gold {
color: gold;
}
/* Showcase */
#showcase {
min-height: 400px;
color: black;
}
#showcase h1 {
margin-top: 50px;
font-size: 300%;
margin-bottom: 10px;
}
#showcase p {
font-size: 120%;
}
/* Newsletter */
#newsletter {
padding: 15px;
color: #ffffff;
background: #35424a
}
#newsletter h1 {
float: left;
}
#newsletter form {
float: right;
margin-top: 15px;
}
#newsletter input[type="email"] {
padding: 4px;
height: 26px;
width: 250px;
}
/* Sidebar */
aside#sidebar {
float: right;
margin-top: 10px;
}
aside#sidebar .quote input,
aside#sidebar .quote textarea {
top-margin: 10px;
width: 80%;
padding: 10px;
}
/* Main-col */
article#main-col {
float: left;
width: 65%;
}
/* Imagery */
#social {
margin-top: 10%;
text-align: center;
font-size: 150%;
color: black;
}
#imagery {
margin-top: 5%;
margin-bottom: 5%;
}
#imagery .box {
float: right;
text-align: center;
width: 30%;
padding: 10px;
}
#imagery .box i {
font-size: 700%;
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
}
.column img {
margin-top: 12px;
width: 100%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Services */
ul#services li {
list-style: none;
padding: 20px;
border: #cccccc solid 1px;
margin-bottom: 5px;
background: #35424a;
color: white;
}
footer {
padding: 20px;
margin-top: 20px;
color: black;
background-color: gold;
text-align: center;
}
/* Media Queries */
#media(max-width: 768px) {
header #branding,
header nav,
header nav li,
#newsletter h1,
#newsletter form,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#imagery {
font-size: 50%;
float: none;
}
#showcase h1 {
margin-top: 40px;
}
#newsletter button,
.quote button {
display: block;
width: 100%;
}
#newsletter form input[type="email"],
.quote input,
.quote textarea {
width: 100%;
margin-bottom: 5px;
}
/* nav */
ul.topnav li {
display: none;
}
ul.topnav li.icon {
display: inline-block;
}
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
/* 'un' float the list items so they return to displaying vertically */
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
/*css reset
* {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
background-image: url("bg.jpg");
background-size: cover; /*this seems better*/
/*background-size: contain;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* end reset */
<head>
<title>DB Plumbing | Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://use.fontawesome.com/3a2264e344.js"></script>
<script src="html8shiv.js"></script>
<link rel="shortcut icon" type="image/png" href="wrench.png" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="desciption" content="Darran Brady Plumbing">
<meta name="keywords" content="Plumbing, Boilers, Showers, Central Heating, Kitchens, Bathrooms, Installations, Landlord Services, Horsham, West Sussex, Sussex,Barns Green, Billingshurst,Broadbridge Heath,Christ's Hospital, Clemsfold, Copsale,Colgate,Cowfold, Faygate, Handcross, Horsham, Itchingfield, Kingsfold,Lambs Farm,Lower Beeding,Mannings Heath, Maplehurst, Monks Gate, Nuthurst, Partridge Green, Pease Pottage, Roffey, Rowhook, Rusper, Rudgwick, Southwater, Slinfold, Warnham ">
<meta name="author" content="DB, Darran, Brady, Darran Brady">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<div class="icon">
☰
</div>
<ul class="topnav" id="myTopnav">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Coverage</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<h1>Local Award Winning Trader</h1>
<h2>Call Darren | <i class="fa fa-phone" aria-hidden="true"></i> 07756848657</h2>
<p>DB Plumbing provides a full range of general plumbing and repair services, from installing your new bathroom suite to fixing that leaking tap or joint that has been annoying you for ages. </p>
<p>Our customer's individual requirements are important to us at DB Plumbing. We always provide quality service and products and combined with honesty has made us the first choice of many homes in the Horsham area</p>
</div>
</section>
<section id="newsletter">
<div class="container">
<h1>Subscribe To Our Weekly Blog</h1>
<form>
<input type="email" placeholder="Subscribe today...">
<button type="submit" class="subscribe">Subscribe</button>
</form>
</div>
</section>
<section id="imagery">
<div class="container">
<div class="box">
<i class="fa fa-star" aria-hidden="true"></i>
<h1>Accredited</h1>
<p>Gas Safe Accreditted </p>
</div>
<div class="box">
<i class="fa fa-thumbs-up" aria-hidden="true"></i>
<h1>Reputable</h1>
<p>"25 years service experience "</p>
</div>
<div class="box">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<h1>Local</h1>
<p>Sussex and Surrey Countywide</p>
</div>
</div>
</section>
<footer>
<div>
<p>Darren Brady Plumbing Copyright © 2017</p>
</div>
</footer>
</body>

Answer 2

I've taken only the part we are interested into on code so it's a little more readable and here's my sugegstion. Using the display: flex property will help put the elements on the same line:
body {
font: 100%/1.5 Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
}
.container {
width: 60%;
margin: auto;
overflow: hidden;
/*Below is the simple fix*/
display: flex;
align-items: baseline;
}
#branding {
display: inline-block;
background: red; /*Only for readability purpose*/
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
a {
display: inline-block;
color: white;
text-align: center;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
text-decoration: none;
font-size: 130%;
background: teal; /*Only for readability purpose*/
}
<div class="container">
<div id="branding">
<h1><span class="highlight">DB</span> Plumbing</h1>
</div>
<nav>
<ul class="topnav">
<li class="icon">
☰
</li>
</ul>
</nav>
</div>
See A complete guide to flexbox on CSS Tricks for more insights.
Hope I got it right :)