I'm currently learning the basics of HTML and CSS and I wanna try to practice and to make some research when I get some troubles. Now I wanted to style the landing page just like in this screenshot I made but I didnt't found how to place the image under the navbar. I could use the power of photoshop and insert it in background but I think I can do in css that withouth making background basically an image. Don't judge me if I wrote something too wrong but I tried to think it before copy and paste from somewhere.
That's my entire code. I hope somebody can help me to place that image where I want. Thank you so much in advance and don't kill me please :)
:root {
--color-dark: #1C2126;
--color-green: #185858;
--color-hoverlinks: #576471;
--color-light: #BFADA3;
--color-accent-light: #A65C41;
--color-accent-dark: #733F2D;
--color-white: #fff;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', 'Montserrat';
background-color: var(--color-dark);
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
background: var(--color-dark);
color: var(--color-white);
}
.nav-links a {
color: #fff;
}
.logo img {
height: 40px;
}
/* NAVBAR MENU */
.menu {
font-family: 'Montserrat';
display: flex;
gap: 1.5em;
font-size: 50px;
z-index: 2;
}
.menu li a:hover {
color: var(--color-accent-light);
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
input[type=checkbox] {
display: none;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.landing_h1 {
font-size: 120px;
color: var(--color-green);
}
.landing_h3 {
font-size: 90px;
color: var(--color-white);
font-weight: lighter;
}
.landing_image{
display:inline;
justify-content: right;
align-items: right;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>RAWNDY</title>
</head>
<body>
<img src="images/landingpage_picture.jpg" alt="Landing Image" class="landing_image">
<nav class="navbar">
<!-- LOGO -->
<div class="logo"><img src="images/logo.png" alt=""></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</nav>
<section class="landing_page" id="landing">
<div class="container">
<div class="landing_text">
<h1 class="landing_h1">NICOLAE ANDONE</h1> <br>
<h3 class="landing_h3">Portrait photographer & <br> FrontEnd Developer</h3>
</div>
</div>
</section>
</body>
</html>
You can do this by turning the page into a flexbox/grid to ensure responsiveness, then adding a left shadow to the image (if you want the shadow)
You mean like this?? Just change your img its on the body.
:root {
--color-dark: #1C2126;
--color-green: #185858;
--color-hoverlinks: #576471;
--color-light: #BFADA3;
--color-accent-light: #A65C41;
--color-accent-dark: #733F2D;
--color-white: #fff;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Raleway', 'Montserrat';
background-image: url("https://icatcare.org/app/uploads/2018/06/Layer-1704-1200x630.jpg");
background-size:cover;
background-repeat:no-repeat;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
/* NAVBAR STYLING STARTS */
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px;
color: var(--color-white);
}
.nav-links a {
color: #fff;
}
.logo img {
height: 40px;
}
/* NAVBAR MENU */
.menu {
font-family: 'Montserrat';
display: flex;
gap: 1.5em;
font-size: 50px;
z-index: 2;
}
.menu li a:hover {
color: var(--color-accent-light);
transition: 0.3s ease;
}
.menu li {
padding: 5px 14px;
}
input[type=checkbox] {
display: none;
}
.landing_image {
display:flex;
justify-content:right;
}
/*HAMBURGER MENU*/
.hamburger {
display: none;
font-size: 24px;
user-select: none;
}
/* APPLYING MEDIA QUERIES */
#media (max-width: 768px) {
.menu {
display: none;
position: absolute;
background-color: teal;
right: 0;
left: 0;
text-align: center;
padding: 16px 0;
}
.menu li:hover {
display: inline-block;
background-color: #4c9e9e;
transition: 0.3s ease;
}
.menu li+li {
margin-top: 12px;
}
input[type=checkbox]:checked~.menu {
display: block;
}
.hamburger {
display: block;
}
.dropdown {
left: 50%;
top: 30px;
transform: translateX(35%);
}
.dropdown li:hover {
background-color: #4c9e9e;
}
}
.landing_h1 {
font-size: 120px;
color: var(--color-green);
}
.landing_h3 {
font-size: 90px;
color: var(--color-white);
font-weight: lighter;
}
.landing_image{
display:inline;
justify-content: right;
align-items: right;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<title>RAWNDY</title>
</head>
<body>
<nav class="navbar">
<!-- LOGO -->
<div class="logo"><img src="images/logo.png" alt=""></div>
<!-- NAVIGATION MENU -->
<ul class="nav-links">
<!-- USING CHECKBOX HACK -->
<input type="checkbox" id="checkbox_toggle" />
<label for="checkbox_toggle" class="hamburger">☰</label>
<!-- NAVIGATION MENUS -->
<div class="menu">
<li>Home</li>
<li>My Work</li>
<li>About</li>
<li>Contact</li>
</div>
</ul>
</nav>
<section class="landing_page" id="landing">
<div class="container">
<div class="landing_text">
<h1 class="landing_h1">NICOLAE ANDONE</h1> <br>
<h3 class="landing_h3">Portrait photographer & <br> FrontEnd Developer</h3>
</div>
</div>
</section>
</body>
</html>
I am making a responsive navbar which turns into the hamburger icon on mobile phones. I used media queries to check for mobile phones and create a hamburger icon. Then I made a mobile menu which appears and disappears when the hamburger icon gets toggled. Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Nav Bar</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<!-- Nav Bar -->
<nav>
<h2>Nav Bar</h2>
<div class="nav-left">
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
</div>
<div class="nav-right">
<a>Log In</a>
<a>Sign Up</a>
</div>
<div class="mobile-nav">
<label for="toggle"><h2>☰</h2></label>
<input type="checkbox" id="toggle">
</div>
<div class="menu"> <!-- Mobile Menu -->
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
<hr>
<a>Log In</button>
<a>Sign Up</button>
</div>
</nav>
</body>
</html>
SASS (Use Compiler):
// Fonts
#import url("https://fonts.googleapis.com/css2?family=Mukta&display=swap");
* {
margin: 0px;
padding: 0px;
}
// Navbar
nav {
width: auto;
padding: 30px;
background-color: #fafafa;
display: flex;
align-content: center;
flex-wrap: wrap;
h2 {
color: #303030;
font-family: "Mukta", sans-serif;
margin-right: 30px;
}
}
.nav-right {
margin-left: auto;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
.nav-left {
display: flex;
align-content: center;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
div.mobile-nav {
display: none;
label {
display: none;
}
#toggle {
display: none;
}
}
.menu { // Mobile Menu Styling, Display is none
width: 100vw;
font-family: "Mukta", sans-serif;
display: none;
flex-direction: column;
background-color: #fafafa;
z-index: 1000;
a {
margin: 5px 0px;
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
hr {
margin: 5px 0px;
border-color: #a3a3a3;
border-style: solid;
}
}
#media only screen and (max-width: 500px) {
div.mobile-nav {
width: auto;
height: 60px;
display: flex;
label {
display: block;
cursor: pointer;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
}
#toggle:checked + .menu { // Displaying the Menu
display: flex;
}
}
nav h2 {
font-size: 5vw;
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
}
div.nav-left {
display: none;
}
div.nav-right {
display: none;
}
}
The problem is in this line:
#toggle:checked + .menu {
display: flex;
}
When clicked on the hamburger icon, it doesn't display the menu, instead it keeps it's display to block.
Things I have tried:
Changing the display to block when the the toggle checkbox gets clicked
Setting display to none for unchecked and flex when checked as described here
Putting .menu div and #toggle checkbox in a single div as Toni Michel Caubet said (This method does work, thanks but it works with a single element like an h1, not with a div containing many elements)
Changing the combinator or grouping .menu div and #toggle checkbox after putting them in a div
EDIT:
At point 4, things started to work a bit. When I changed the + to a comma to group both of them, the menu appeared. But it didn't closed after clicking it again. I changed the display to block of the hamburger menu, and the checkbox was checked when the page got loaded. But after unchecking it, the checkbox disappeared but the menu didn't. I need a solution to this.
NOTE:
I want to make this entirely in CSS (Or SASS) without the use of JavaScript or jQuery
Thanks for the help!
Few things going on here.
As stated in the comments, the problem is that your checkbox isn't in the same container as your mobile nav.
You also have some <a> tag, closing as </button>, meaning that your html is incorrect.
Solution
Keep the label of the checkbox where it is.
Move the checkbox to be a direct sibling of .menu.
Then adjust your css to have #toggle as a selector and not div.mobile-nav #toggle.
toggle is an id, you don't need to have a stronger specificity as it's a unique element.
Short reminder of the selector: .foo + .foo2
This selector will select every element with the class .foo2 if they are the next sibling of a element with the class .foo.
Therefore, they have to be in the same parent node and be one next to each other.
<nav>
<h2>Nav Bar</h2>
<div class="nav-left">
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
</div>
<div class="nav-right">
<a>Log In</a>
<a>Sign Up</a>
</div>
<div class="mobile-nav">
<label for="toggle"><h2>☰</h2></label>
</div>
<-- I've moved the checkbox. Now the selector #toggle + .menu will work -->
<input type="checkbox" id="toggle">
<div class="menu"> <!-- Mobile Menu -->
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
<hr>
<a>Log In</button>
<a>Sign Up</button>
</div>
</nav>
// Fonts
#import url("https://fonts.googleapis.com/css2?family=Mukta&display=swap");
* {
margin: 0px;
padding: 0px;
}
// Navbar
nav {
width: auto;
padding: 30px;
background-color: #fafafa;
display: flex;
align-content: center;
flex-wrap: wrap;
h2 {
color: #303030;
font-family: "Mukta", sans-serif;
margin-right: 30px;
}
}
.nav-right {
margin-left: auto;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
.nav-left {
display: flex;
align-content: center;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
div.mobile-nav {
display: none;
label {
display: none;
}
}
#toggle {
display: none;
}
.menu { // Mobile Menu Styling, Display is none
width: 100vw;
font-family: "Mukta", sans-serif;
display: none;
flex-direction: column;
background-color: #fafafa;
z-index: 1000;
a {
margin: 5px 0px;
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
hr {
margin: 5px 0px;
border-color: #a3a3a3;
border-style: solid;
}
}
#media only screen and (max-width: 500px) {
div.mobile-nav {
width: auto;
height: 60px;
display: flex;
label {
display: block;
cursor: pointer;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
}
}
#toggle { //#toggle is on it's own now, it doesn't need more specificity
visibility: hidden;
height: 0;
width: 0;
}
#toggle:checked + .menu { // Displaying the Menu
display: flex;
}
nav h2 {
font-size: 5vw;
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
}
div.nav-left {
display: none;
}
div.nav-right {
display: none;
}
}
I'm trying to have my menu be aligned horizontally but it refuses to move, I'm at a loss as to how to fix it.
The menu is labelled nav ul in the CSS and its within the header tag in
I've tried different floats hell the code is copied and pasted from other parts of the media query but specifically in the tablet and laptop versions the menu with the home button and the other stuff will align vertically.
I don't know what I'm doing wrong.
css starts here:-
width: 100%;
height: 100%;
margin: 0;
font-family: Calibri, Arial, sans-serif;
}
#gridContainer {
display: grid;
grid-template-rows: [header] auto [sidebar] auto [main] auto [footer] auto;
grid-template-columns: [header] auto [sidebar] auto [main] auto [footer] auto;
}
nav ul {
list-style-type: none;
text-align: left;
}
body{
display: grid;
grid-template-columns: auto;
grid-template-rows: auto auto auto auto;
grid-template-areas: "header" "sidebar" "main" "footer";
}
h1{
font-size: 3em;
padding-left: 10px;
}
header {
grid-area: header;
background-color: #222222;
color: #fff;
font-size: 1.2em;
}
#sidebar {
grid-area: sidebar;
background-color: darkseagreen;
}
main {
grid-area: main;
background-color: #DBD8D3;
}
footer {
grid-area: footer;
background-color: #222222;
}
/* Mobiles */
#media only screen and (max-width:600px){
nav {
display: table-cell;
height: 20%;
width: 20%;
font-size: 1.1em;
}
nav ul {
list-style-type: none;
padding: 0;
overflow: hidden;
}
li a {
text-align: center;
padding: 15px;
float: left;
}
nav a a:hover, a:link, a:visited {
color: #fff;
text-decoration: none;
font-size: inherit;
}
nav a:hover {
color: #fff;
text-decoration: underline;
font-size: 1.2em;
background-color: #666666;
}
}
/* Tablets */
#media only screen and (min-width: 600px) and (max-width: 991px){
nav {
display: table-cell;
height: 20%;
width: 20%;
font-size: 1.1em;
}
nav ul {
list-style-type: none;
padding: 0;
overflow: hidden;
}
li a {
text-align: center;
padding: 15px;
float: left;
}
nav a a:hover, a:link, a:visited {
color: #fff;
text-decoration: none;
font-size: inherit;
}
nav a:hover {
color: #fff;
text-decoration: underline;
font-size: 1.2em;
background-color: #666666;
}
}
h1 {
margin-bottom: 0;
}
/* Large Screens*/
#media only screen and (min-width: 992px) {
body {
display: grid;
grid-template-columns: 17.5% 82.5%;
grid-template-rows: 15% auto 5%;
grid-template-areas: "header header" "sidebar main" "footer footer";
margin: 0;
padding: 0;
}
header nav{
float: right;
}
nav {
float: right;
display: table-cell;
width: auto;
font-size: 1.1em;
flex:row;
}
nav ul {
list-style-type: none;
padding: 0;
overflow: hidden;
margin: 0;
}
li a {
text-align: center;
padding: 15px;
float: left;
}
nav a a:hover, a:link, a:visited {
color: #fff;
text-decoration: none;
font-size: inherit;
}
nav a:hover {
color: #fff;
text-decoration: underline;
font-size: 1.2em;
background-color: #666666;
}
#sidebar {
background-color: darkseagreen;
padding: 2%;
}
#sidebar img {
height: 15%;
width: 100%;
}
img{
float: left;
}
main {
display: grid;
grid-template-rows: auto auto auto auto;
grid-template-areas: "title" "event1" "event2" "event3";
grid-gap: 10px;
}
#title{
grid-area: title;
padding-left: 1%;
}
#event1{
grid-area: event1;
border: 3px solid #000;
}
#event1 img{
padding-right: 1%;
}
#event2 {
grid-area: event2;
border: 3px solid #000;
}
#event2 img {
padding-right: 1%;
}
#event3 {
grid-area: event3;
border: 3px solid #000;
}
#event3 img {
padding-right: 1%;
}
}
h1{
margin-bottom: 0;
}```
**HTML starts here**
```<!DOCTYPE html>
<html>
<head>
<link href="Website_project_Rodrigo_Zapata.css" rel="stylesheet" type="text/CSS">
<title> North East Events</title>
</head>
<body>
<header>
<h1>North East Events</h1>
<nav>
<ul>
<li>Home</li>
<li>View Events</li>
<li>Admin</li>
<li>Credits</li>
<li>Wireframe</li>
</ul>
</nav>
</header>
<section id="sidebar">
<h3> <strong> Upcoming </strong></h3>
<p>Lorem Ipsum</p>
</section>
<main>
<h2 id="title"> <strong> Live Today </strong></h2>
<section id="event1">
<img id="image1" src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
<h3>event 1</h3>
<p>
<strong>According:</strong> sample text
</p>
</section>
<section id="event2">
<img id="image2" src="image2.jpg" alt="cascades" width="500" height="333">
<h3>event 2</h3>
<p>
sample text
</p>
</section>
<section id="event3">
<img id="image3" src="image3.jpg" alt="temple" width="500" height="333">
<h3>event 3</h3>
<p>
lorem ipsum
</p>
</section>
</main>
<footer></footer>
</body>
</html>```
Remove all float attributes and add the following to nav ul
display: flex;
flex-direction: row;
You'll need to increase your grid-template-rows % to see it on a larger screen.
Id recommend giving https://css-tricks.com/snippets/css/a-guide-to-flexbox/ a read to help understand flexbox.
I tried to code the responsive menu in local drive and everything is working without error.
However, the responsive menu simply doesn't work in Wordpress blankslate. Please help. I attach the comprehensive code in the jsfiddle. Thanks.
My HTML snippet
<div id="nav_bar">
<div class="group">
<label for="toggle-1" class="title">Title-1</label><input type="checkbox" id="toggle-1">
<div class="menu_list">
<ul>
<li>Menu-A1</li>
<li>Menu-A2</li>
</ul>
</div>
</div>
<div class="group">
<label for="toggle-2" class="title">Title-2</label><input type="checkbox" id="toggle-2">
<div class="menu_list">
<ul>
<li>Menu-B1</li>
<li>Menu-B2</li>
<li>Menu-B3</li>
</ul>
</div>
</div>
<div class="group">
<label for="toggle-3" class="title">Title-3</label><input type="checkbox" id="toggle-3">
<div class="menu_list">
<ul>
<li>Menu-C1</li>
</ul>
</div>
</div>
<div class="group">
<label for="toggle-4" class="title">Title-4</label><input type="checkbox" id="toggle-4">
<div class="menu_list">
<ul>
<li>Menu-D1</li>
<li>Menu-D2</li>
</ul>
</div>
</div>
</div>
My CSS snippet
#media all and (min-width:100px) and (max-width:1024px) {
#nav_bar {
display: none;
}
#menu {
display: block;
}
#toggle:checked + #nav_bar {
display: block;
}
.group {
text-align: left;
position: block;
}
.group:hover {
background-color: gray;
}
.title {
display: block;
padding: 15px;
}
.title:active {
color: red;
}
.menu_list {
width: 100%;
}
[id^="toggle"]:checked + .menu_list {
display: block;
}
}
I have been modifying the codes, yet I still couldn't solve the problem.
I solve this issue yes when you used this jsfiddle code as HTML it works but when you add in theme of Wordpress it is not working two issue here
nav class which is already added by WordPress and it's CSS so what i do i add this code to twenty twelve theme and the css of nav class in original is
nav {
background-color: lightcoral;
display: block;
}
To
nav {
background-color: lightcoral;
display: block;
overflow: unset !important;
}
and 2 is the + operator in css i change to ~ this work so here is full updated css
Click the help icon above to learn more.
*/
html,
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
nav {
background-color: lightcoral;
display: block;
overflow: unset !important;
}
#menu {
padding: 1%;
text-align: center;
color: white;
font-size: 180%;
display: none;
}
[id^="toggle"] {
display: none;
}
/* NAVAGATION TITLE */
.group {
position: relative;
}
.title {
cursor: pointer;
color: white;
font-size: 120%;
}
/* MENU LIST */
.menu_list {
display: none;
position: absolute;
background-color: whitesmoke;
box-shadow: 0px 0px 5px 1px grey;
cursor: pointer;
z-index: 1;
}
.menu_list ul {
margin: 0;
padding: 0;
list-style: none;
}
.menu_list ul li:hover {
background-color: lightgray;
}
.menu_list ul li a {
text-decoration: none;
display: block;
padding: 20px;
color: black;
}
/* FOR MOBILE DEVICE */
#media all and (min-width:100px) and (max-width:1024px) {
#nav_bar {
display: none;
}
#menu {
display: block;
}
#toggle:checked~#nav_bar {
display: block;
}
.group {
text-align: left;
position: block;
}
.group:hover {
background-color: gray;
}
.title {
display: block;
padding: 15px;
}
.title:active {
color: red;
}
.menu_list {
width: 100%;
}
[id^="toggle"]:checked~.menu_list {
display: block;
}
}
/* FOR DESKTOP AND LAPTOP */
#media all and (min-width:1025px) {
.group {
display: inline-block;
text-align: left;
}
.group:hover .menu_list {
display: block;
}
.title {
width: 150px;
padding: 25px;
display: block;
text-align: center;
}
.title:hover {
background-color: gray;
}
.menu_list ul li {
width: 250px;
}
}
No update in HTML use same one check the attachment screenshot
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
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>
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 :)