So basically I want to be able to align my icons in my navbar but they are staying on the left, the icons are meant to be on the same line and centered when the sidebar is opened.
As you can see they are staying on the left
Image:
https://i.stack.imgur.com/8n3WO.png
If you wanna see what i mean by having the icons align on same line and be centered, check Tom Walkers navbar below
https://iamtomwalker.com
Navbar code:
session_start();
?>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./css/navbar.css?d=<?php echo time(); ?>">
<link rel="stylesheet" type="text/css" href="./css/style.css?d=<?php echo time(); ?>">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="material-icons">menu</i>
</span>
Test
<ul class="main-nav" id="js-menu">
<li>Home</li>
<li>Covers</li>
<li>Music</li>
<li>Newsletter</li>
<li style="display: inline-block;text-align: center; clear:left;"><i class="material-icons">menu</i> </li>
<li style="display: inline-block;text-align: center; clear:left;"><i class="material-icons">menu</i> </li>
<?php
if(isset($_SESSION['logged_in'])){
echo '<li>Account</li> ';
echo '<li>Manage</li> ';
echo '<li>Logout</li> ';
}
?>
</ul>
</nav>
<script>
let mainNav = document.getElementById("js-menu");
let navBarToggle = document.getElementById("js-navbar-toggle");
navBarToggle.addEventListener("click", function() {
mainNav.classList.toggle("active");
});
</script>
Navbar CSS
#import url('https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.navbar {
font-size: 18px;
background-color: #151515;
padding-bottom: 10px;
border-bottom: 1px solid white;
}
.main-nav {
list-style-type: none;
display: none;
clear: left;
}
.nav-links, .logo {
text-decoration: none;
font-family: 'Fredericka the Great', cursive;
color: rgba(255, 255, 255, 0.7);
}
.nav-links:hover{
text-decoration: underline;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
display: block;
}
#media screen and (min-width: 768px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
margin: 0;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover, .nav-links:hover {
color: rgba(255, 255, 255, 1);
}```
[1]: https://iamtomwalker.com
A few ways to do this, but most simply, add display: inline, and float: left to your li css
.main-nav li {
display: inline;
float: left;
margin: 15px auto;
}
Display inline will make the list items no longer block elements, and they will fall in place, side by side.
Floating will just put them all to either side of the parent.
You can set your spacing from here.
https://jsfiddle.net/ywk1cd5h/6/
I would look to wrap the icons that you want to be within a straight line in another flex box container.
<ul class="main-nav" id="js-menu">
<li>Home</li>
<li>Covers</li>
<li>Music</li>
<li>Newsletter</li>
<div class="icons">
<li style="text-align: center; "><i class="material-icons">menu</i> </li>
<li style="text-align: center;"><i class="material-icons">menu</i> </li>
</div>
</ul>
And then center the content. You can also adjust the margin: 15px auto as well.
.icons {
display: flex;
justify-content: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.main-nav li {
text-align: center;
margin: 15px 0;
}
Related
On my landing page, with a position: sticky nav bar, The navbar will stay at the top of the page but it does not stay completely stationary while scrolling
Codepen: https://codepen.io/jcrainey/pen/rNGLyOQ
I've tried setting a fixed height to .sticky but it just adds space to the bottom of the navbar. Any thoughts on how to make it stay completely stationary?
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class= "navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
.navbar has inherited margins.
Set a margin: 0 on .navbar and give it a height.
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin: 0;
height: 60px;
}
You should be able to remove the height from .sticky too.
You don't have to adjust the height, or set the top padding. The reason why your navbar was moving is that it will move towards the top until any "explicitly defined" margin, or any "existing margin" is completely gone. You need to only add margin: 0; to your .navbar element in your style-sheet, like in the snippet below.
Just a tip. If you press F12 to open the tools, and find the nav-bar element in the HTML that is rendered in the chrome dev-tools, click on it, and it will show you what youre padding, margin, and border all are set too.
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin-top:0;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
One possibility is to add padding-top: 1px; to .sticky. The reason: The included ul (.navbar) has default top and bottom margins, which are not included in the "sticky" part (aka "collapsing margins"). Adding just one pixel of padding-top to the parent prevents that.
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
padding-top: 1px;
}
.navbar {
position: sticky;
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
margin-left: -20px;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class="navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
There are a few things going on here.
1st, you have position: sticky in 2 places: .sticky and .navbar. I removed it from your .navbar. 2nd, your ul is inheriting browser styles. (It's often useful to use a CSS reset to remove these: https://necolas.github.io/normalize.css/.) I removed the margin from your ul and gave it a 1em padding. 3rd, I removed your negative margin on your first li. Is this what you're looking for?
body {
padding: 0;
margin: 0;
background: white;
color: black;
font-family: 'Helvetica', sans-serif;
}
.sticky {
background-color: white;
position: sticky;
top: 0;
height: 60px;
}
.navbar {
display: flex;
justify-content: flex-end;
align-items: center;
list-style: none;
margin: 0;
padding: 1em;
}
.links {
font-size: 30px;
text-decoration: none;
color: gray;
padding: 0px 20px 0px 0px;
}
li:nth-child(1) {
margin-right: auto;
}
.links:hover {
color: black;
}
.intro {
display: flex;
justify-content: center;
font-family: 'Helvetica', sans-serif;
font-size: 35px;
}
.scroll {
display: flex;
justify-content: center;
background-color: white;
height: 2000px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="landingpage.css">
<title>Landing Page</title>
</head>
<body>
<div class="sticky">
<nav>
<ul class= "navbar">
<li><a class = "links" href = "#">HOME</a></li>
<li><a class = "links" href="#projects">PROJECTS</a></li>
<li><a class = "links" href="#blog">BLOG</a></li>
</ul>
</nav>
</div>
<div class = "intro">
<h1>JC Rainey</h1>
</div>
<div class="scroll">just to show what happens when you scroll</div>
</body>
</html>
Im trying to align my a-tags side by side, but for some reason the divs inside the a-tag goes to the next line?
How can I align my three menu lines side by side with the others? display: inline-block; didn't work for me?
What I'm trying to create is something like this image:
But what do I miss to get the menu on the same line?
.logo-style {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 39px;
/* identical to box height */
letter-spacing: 0.05em;
color: #4C5BA0;
}
/*
Navigation bar three lines menu
/*
Navigation
*/
.topnav {
overflow: hidden;
background: none !important;
align-items: center;
display: flex;
justify-content: space-between;
align-items: center;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: brown;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: black;
}
.topnav a.active {
color: black;
}
*/
.line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.menu div {
width: 30px;
height: 4px;
background-color: brown;
margin: 5px 0;
border-radius: 25px;
}
.menu {
width: 30px;
}
.menu:hover div {
width: 30px;
background-color: black;
}
.right-nav {}
.left-nav {}
<?php
declare(strict_types=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 href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
<link rel="stylesheet" href="./css/site.scss">
<script type="text/javascript" src="./js/toggletheme.js" defer></script>
</head>
<body>
<header>
<div class="topnav">
<div class="left-nav">
<p class="logo-style">Web title</p>
</div>
<div class="right-nav">
Home
Archives
Coverage
<a href="#menu" class="menu">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
</div>
</div>
</header>
</body>
</html>
Put this on your .right-nav
Display flex is very useful for this kind of situations.
Property flex-direction isn't neccesary, display flex itself is flex-direction: row; by default.
The gap isn't neccesary too, it just makes a gap between your items.
align-items is to align your items vertically in the center.
.right-nav {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
You forgot to use display: flex; to .right-nav class. And center elements properly align-items: center; justify-content: center;
Now everything works fine:-) Best regards!
.right-nav {
display: flex;
align-items: center;
justify-content: center;
}
.logo-style {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 39px;
/* identical to box height */
letter-spacing: 0.05em;
color: #4c5ba0;
}
/*
Navigation bar three lines menu
/*
Navigation
*/
.topnav {
overflow: hidden;
background: none !important;
display: flex;
justify-content: space-between;
align-items: center;
}
.topnav button {
border: none;
cursor: pointer;
}
.topnav a {
color: brown;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
color: black;
}
.topnav a.active {
color: black;
}
.right-nav {
display: flex;
align-items: center;
justify-content: center;
}
*/ .line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.line-one {
width: 30px;
}
.menu div {
width: 30px;
height: 4px;
background-color: brown;
margin: 5px 0;
border-radius: 25px;
}
.menu {
width: 30px;
}
.menu:hover div {
width: 30px;
background-color: black;
}
<header>
<div class="topnav">
<div class="left-nav">
<a href="#news">
<p class="logo-style">Web title</p>
</a>
</div>
<div class="right-nav">
Home
Archives
Coverage
<a href="#menu" class="menu">
<div class="line-one"></div>
<div class="line-two"></div>
<div class="line-three"></div>
</a>
</div>
</div>
</header>
There are many different ways to go about creating this display, but probably the most straightforward approach in modern CSS is to use CSS Flexbox.
(Or, in this case, two nested Flexboxes.)
The example below has two elements which use:
display: flex;
One is the <header> itself, which means its two immediate children:
<h2 class="logo-style">
<nav>
will be flexibly positioned along its horizontal axis.
The other is the <nav>, which means its two immediate children:
<ul>
<a class="menu">
will in turn also be flexibly positioned along its own horizontal axis.
Note that the <header> has a justify-content value of space-between which means that the first of its two children will be positioned towards the left and the second will be positioned towards the right.
By contrast, the <nav> has a justify-content value of flex-end which means that both of its children will be positioned towards the right.
Working Example:
header {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-style a {
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 32px;
line-height: 39px;
letter-spacing: 0.05em;
color: #4C5BA0;
}
nav {
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul li {
display: inline-block;
margin-right: 18px;
padding: 6px;
border-radius: 6px;
}
nav ul li:hover {
background-color: #4C5BA0;
}
nav ul li:hover a {
color: rgb(255, 255, 255);
}
.menu {
display: inline-block;
width: 30px;
height: 27px;
background: linear-gradient(brown 0% 20%, white 20% 40%, brown 40% 60%, white 60% 80%, brown 80% 100%);
}
.menu:hover {
height: 27px;
background: linear-gradient(black 0% 20%, white 20% 40%, black 40% 60%, white 60% 80%, black 80% 100%);
}
<header>
<h2 class="logo-style">Web title</h2>
<nav>
<ul>
<li>Home</li>
<li>Archives</li>
<li>Coverage</li>
</ul>
</nav>
</header>
I'm having trouble figuring out why the dropdown menu goes horizontal. I made a horizontal menu to start with and tried adding a dropdown to it. However, it goes horizontal and I can't figure out why.
I've been racking my brain over this for hours but I don't know what to do.
Please help me.
nav li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
li:last-child {
border-right: none;
}
.navbar {
display: flex;
align-items: center;
width: 100%;
background-color: #ffffff;
}
#menu-container {
display: flex;
width: 100%;
justify-self: center;
justify-content: center;
}
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
}
.dropdown {
position: relative;
z-index: 100;
}
.dropdown {
display: inline-block;
margin-left: 10px;
}
.dropdown:hover .dropdown-menu {
height: auto;
opacity: 1;
}
.dropdown-menu {
position: absolute;
z-index: 90;
align-items: stretch;
background-color: rgb(68, 68, 68);
list-style: none;
overflow: hidden;
height: auto;
opacity: 0;
transition: opacity 0.5s;
}
nav ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: relative;
top: 0;
}
<nav class="navbar">
<div id="menu-container">
<ul class="nav-menu">
<li class="nav-item">
<a class="nav-link" href="#">Men</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link-dropdown" href="#">Women</a>
<ul class="dropdown-menu">
<li><a class="nav-link" href="#">New</a></li>
<li><a class="nav-link" href="#">Tops</a></li>
<li><a class="nav-link" href="#">Bottoms</a></li>
<li><a class="nav-link" href="#">Accessories</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Kids</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</nav>
if you write flex instead of block your navbar is shown as vertical because you can style the element on n the vertical side with flex
in CSS in the .new-menu write flex instead of block in display property
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction:column
;
}
In nav-menu class you need to add the property flex-direction and give it the value column.
This will make the cross axis go horizontally and main axis go vertically.
.nav-menu {
display: flex;
justify-content: space-between;
align-items: center;
flex-direction:column;
}
More about it in detail here Flex-direction
Dear you have a lot of errors in CSS Try this
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<ul>
<li>home</li>
<li>About</li>
<li>Services
<ul>
<li>Marketing</li>
<li>Design
<ul>
<li>Web</li>
<li>Graphics</li>
<li>Interior</li>
</ul>
</li>
<li>Branding</li>
</ul>
</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS Code
*{
margin: 0;
padding: 0;
}
body{
background-image: url(1.jpg);
-webkit-background-size:cover;
background-size:cover;
background-position: center center;
height: 100vh;
}
.wrapper{
width: 860px;
margin: 0 auto;
}
.wrapper ul{
list-style: none;
margin-top: 2%;
}
.wrapper ul li {
background: #262626;
width: 170px;
border: 1px solid #fff;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
color: #fff;
font-size: 16px;
position: relative;
font-family: poppins;
text-transform: uppercase;
font-weight: bold;
}
.wrapper ul li:hover{
background: crimson;
}
.wrapper ul ul{
display: none;
}
.wrapper ul li:hover > ul{
display: block;
}
.wrapper ul ul ul{
margin-left: 170px;
top: 0;
position: absolute;
}
In your css you've provided the selector nav ul. Now what this does, it applies the style to every ul descendent of parent nav. This means it is getting applied even to the dropdown-menu. Hence to specify that it is applicable only to the child we use the child combinator selector nav > div > ul
nav > div > ul {
display: flex;
justify-content: space-between;
list-style: none;
margin: 0;
padding: 0;
background-color: #333;
position: relative;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width">
<style>
* {
box-sizing: border-box;
}
body {
display: grid;
grid-template-rows: 1fr 15fr .5fr;
}
footer {
text-align: center;
font-size: 0.85em;
color: white;
background-color: black;
box-shadow: 0px 0 10px rgba(0, 0, 0, 0.7);
}
nav {
position: sticky;
top: 0;
}
nav ul li:hover {
background-color: grey;
}
.brand-logo {
height: 100%;
}
.brand-logo img {
height: 100%;
}
#label {
font-size: 2rem;
font-family: Impact, Charcoal, sans-serif;
// text-align: center;
}
.inst {
font-size: 1.1rem;
font-weight: bold;
text-align: center;
}
.nav-wrapper {
height: 100%;
background-color: black;
text-align: center;
}
::selection {
border: black;
color: #000;
}
ul.dropdown-content.select-dropdown li span {
color: #000;
}
#cartIcon {
position: relative;
text-align : center;
left: 10px;
}
#cartIconNav {
position: relative;
margin-right: 5px;
}
</style>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper">
<a href="" class="brand-logo"><img id="logo"
src="https://i.imgur.com/KNOffUU.png"></a>
</div>
<div class="nav-wrapper">
<i class="material-icons">menu</i>
<ul class="center hide-on-med-and-down">
<li>Home</li>
<li>Estimator</li>
<li>About</li>
<li id="cart"></li>
</ul>
</div>
</nav>
<ul class="sidenav" id="items">
<li>Home</li>
<li>Estimator</li>
<li>About</li>
<li id="navCart"></li>
</ul>
</header>
I'm trying to have my logo centered and the other line also have my menu centered.When trying to center the logo it goes more to the left and my menu items only aligns to the right or left.
ul class="center hide-on-med-and-down"
The line above only seems to align the menu to the right or left even if
center is typed.
Any suggestion on how I can achieve this and where am I going wrong in trying to solve this
Edit: new styles are done mainly using display: flex;
Check my commented jsfiddle
Main things I changed
.nav-wrapper {display: flex; flex-direction: column;}
/* Align the inner items with flex
specify that we want them flowing in a single column */
/* Justify content has lots of options for positioning children */
nav ul {
display: flex;
justify-content: center;
}
nav ul li {
/* Make the li float left, positions them horizontally rather than vertically */
float: left;
color: white;
width: 100%;
/* Give a max-width to make the nav buttons smaller */
max-width: 5rem;
padding: 0.8rem 0;
}
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.