I'm working on a nav menu, seen below.
/*
Variables
*/
body {
font: 100% "Lato", sans-serif;
margin: 0;
}
#container {
width: 100%;
margin-top: 47px;
}
/*
Navigation menu
*/
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border-bottom: solid 3px #21ce99;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: block;
color: #21ce99;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
nav ul li a:hover {
background-color: #F2F2F2;
}
/*
Layout
*/
section {
position: relative;
float: left;
width: 60%;
background-color: white;
}
aside {
position: relative;
float: right;
width: 40%;
clear: right;
}
footer {
clear: both;
background-color: #21ce99;
height: 500px;
}
/*
Styling
*/
h1 {
color: rgba(0, 0, 0, 0.87);
font: 300% "Lato", sans-serif;
padding: 30px;
}
p {
color: rgba(0, 0, 0, 0.54);
font-size: 1.3em;
margin: 20px;
}
a#logo {
font: 300% 'Wire One', sans-serif;
}
img {
width: 100%;
max-width: 600px;
margin: 10px;
}
table, th, td {
border: solid .13em #16a085;
border-radius: .3em;
font-size: 15px;
padding: 10px;
border-collapse: collapse;
}
/*
Widgets
*/
.btn {
padding: 1em 1em;
display: inline-block;
border-radius: .38em;
border: .12em solid #21ce99;
text-decoration: none;
color: #21ce99;
margin: 20px;
}
.btn:hover {
background-color: #21ce99;
color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<link href='https://fonts.googleapis.com/css?family=Wire+One|Lato:100,100italic,300,300italic,400italic,400,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
<title>methusela</title>
</head>
<body>
<nav>
<ul>
<li><a id="logo" href="index.html">methusela</a></li>
<li>Discover</li>
<li>Buy</li>
<li>Yes</li>
<li>Contact</li>
</ul>
</nav>
<div id="container">
<section>
<h1></h1>
<a href="#" class="btn">
Learn more
</a>
</section>
<aside>
<img src="" />
</aside>
<footer>
</footer>
</div>
</body>
</html>
All the links were originally vertically in the middle of the nav box, but after I added a logo that uses different size text. All the menu links are no longer in the middle.
Is there a way to have the dimensions of menu links automatically fill the entire box to align with the largest item? Or is there a way to just vertically center the links within the box?
Thank you so much for any help.
Display your ul as flex and use align-items: center and justify-content: center properties to put them on the center of your box, both vertically and horizontally respectively.
nav ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
position: fixed;
top: 0;
width: 100%;
/*box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
border-bottom: solid 3px #21ce99;
z-index: 1;
}
JSFiddle.
When you use align-items: center you center your elements vertically inside your flex container.
When you use justify-content: center you center your elements horizontally inside your flex container.
Related
This is the CSS and HTML for the nav bar which goes:
menu icon (#image), then main text (.red), then search icon (#search), and the search bar that won't stay up, (input [type=text].
My problem is that the search bar won't stay with the rest of the items despite it still having tons of space. It doesn't want to expand to a width larger than 64.2px and then it decides to stay under the rest of the items.
I've tried all sorts of displays and widths, but this is the only one that keeps it on top and it's too small in my opinion.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1-0">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>RED Info Sheet</title>
<style>
ul {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
}
input[type=text] {
background-color: black;
color: white;
margin: 28px 0 0 0;
font-family: bebas neue;
width: 30%;
display: inline-block;
vertical-align: middle;
}
/* this is the css the text box follows */
.nav {
background-color: #db1f1f;
color: black;
display: flex;
positiion: fixed;
top: 0;
font-family: Bebas Neue;
align-items: center;
width: 100%;
float: left;
vertical-align: middle;
}
/* This is the css for the nav */
.red {
background-color: #db1f1f;
color: black;
display: inline-block;
font-family: Bebas Neue;
float: left;
width: 60%;
padding: 10px 0px 0 20px;
text-align: center;
font-size: 55px;
margin: 0 0 0 10px;
}
/* This one (.red) appears before the search photo and text box */
#image {
width: 60px;
height: 100%;
display: inline-block;
float: left;
margin: 0;
padding: 100px 0 0 4ox;
}
/* menu icon */
#search {
width: 7%;
display: inline-block;
float: left;
margin: 25px 10px 0 10px;
padding: 0 0 0 0;
position: relative;
}
/* search image magnifying glass icon everything else after this point is
just part of a dropdown list which i don't think is relevant to the problem */
#image:hover {
background-color: white;
}
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
background-color: #db1f1f;
width: 100%;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #db1f1f;
color: white;
text-decoration: underline;
padding: 5px 5px;
}
li.dropdown {
display: inline-block;
float: left;
width: 10%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c9cdd4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 20px;
}
.dropdown-content a {
color: black;
padding: 1px 1px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: black;
color: white;
text-decoration: underline;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="dropdown">
<div class="nav">
<ul>
<li class="dropdown">
<a href="#si">
<img class="dropbtn" id="image" src="https://assets.stickpng.com/images/588a6507d06f6719692a2d15.png"
alt="menu-icon">
</a>
<div class="dropdown-content">
Home
<br>
Music and Lyric Videos
<br>
Information
<br>
Performances
<br>
Photos
<br>
Song Info
<br>
</li>
</div>
<li class="red">Red Taylor Swift</li>
<li>
<img src="https://image.flaticon.com/icons/png/512/61/61088.png" alt="magnifying-
glass" id="search">
</li>
<li>
<input type="text" placeholder="Search...">
</li>
</ul>
I don’t know what style you want, but I tried to make some modifications. Do you want this Style?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1-0">
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<title>RED Info Sheet</title>
<style>
ul {
list-style-type: none;
float: left;
margin: 0;
padding: 0;
overflow: hidden;
flex-grow: 1;
}
input[type=text] {
background-color: black;
color: white;
margin: 28px 0 0 0;
font-family: bebas neue;
width: 30%;
display: inline-block;
vertical-align: middle;
}
.nav {
background-color: #db1f1f;
color: black;
display: flex;
positiion: fixed;
top: 0;
font-family: Bebas Neue;
align-items: center;
width: 100%;
float: left;
vertical-align: middle;
}
.red {
background-color: #db1f1f;
color: black;
display: inline-block;
font-family: Bebas Neue;
float: left;
/* width: 60%; */
padding: 10px 0px 0 20px;
text-align: center;
font-size: 55px;
margin: 0 0 0 10px;
}
#image {
width: 60px;
height: 100%;
display: inline-block;
float: left;
margin: 0;
padding: 100px 0 0 4ox;
}
#search {
width: 40px;
display: inline-block;
float: left;
margin: 25px 10px 0 10px;
padding: 0 0 0 0;
position: relative;
}
#image:hover {
background-color: white;
}
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 5px 5px;
text-decoration: none;
background-color: #db1f1f;
width: 100%;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #db1f1f;
color: white;
text-decoration: underline;
padding: 5px 5px;
}
li.dropdown {
display: inline-block;
float: left;
width: 10%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #c9cdd4;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
font-size: 20px;
}
.dropdown-content a {
color: black;
padding: 1px 1px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: black;
color: white;
text-decoration: underline;
}
.dropdown:hover .dropdown-content {
display: block;
}
/*
*/
ul>li {
float: left;
}
ul>li:last-child {
width: 30%;
}
input[type=text] {
width: 100%;
}
.fixedWidth {
width: 65px !important;
}
body,
html {
border: 0;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="dropdown fixedWidth">
<div class="nav">
<ul>
<li class="dropdown">
<a href="#si"><img class="dropbtn" id="image"
src="https://assets.stickpng.com/images/588a6507d06f6719692a2d15.png"
alt="menu-icon"></a>
<div class="dropdown-content">
Home<br>
Music and Lyric Videos<br>
Information<br>
Performances<br>
Photos<br>
Song Info<br>
</li>
</div>
<li class="red">Red Taylor Swift</li>
<li><img src="https://image.flaticon.com/icons/png/512/61/61088.png" alt="magnifying-
glass" id="search"></li>
<li><input type="text" placeholder="Search..."></li>
</ul>
</div>
</body>
I want to make a fixed-header, with the clickable links on the left and our logo on the right.
No issues with floating the text + image to it's corresponding place and to make the header take up the whole width of the screen. Once I make it "fixed" the header's width shrinks to the width of the 3 links I have added.
The width of the header is already set to 100% and I cannot seem to find what the underlying issue is
html {
scroll-behavior: smooth;
}
.clear {
clear: both;
}
header {
width 100%;
height: 100px;
position: fixed;
color: rgb(255, 0, 0);
top: 0;
left: 0;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
z-index: 999;
}
footer {
height: 30px;
color: black;
text-align: center;
box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1);
}
header ul {
list-style: none;
float: left;
text-transform: uppercase;
font-family: 'Source Sans Pro';
font-weight: bold;
}
header ul li {
float: left;
margin-left: 60px;
line-height: 100px;
}
header ul a {
text-decoration: none;
}
header ul a:hover {
color: rgb(200, 0, 0);
}
.thumb-container {
max-width: calc(960px + 40px);
margin: 110px auto 0 auto;
}
.thumb-container a {
width: calc(960px / 3);
height: calc(960px / 3);
background: aqua;
float: left;
margin: 0 5px 10px 5px;
}
#media screen and (max-width: 1000px) {
.thumb-container {
max-width: 660px;
/* in midden zetten */
background: black;
}
}
#media screen and (max-width: 660px) {
.thumb-container {
max-width: 100%;
/* in midden zetten */
background: black;
}
.thumb-container a {
width: 100%;
/* maakt containers volledige breedte*/
margin: 0 0 10px 0;
}
}
<header>
<nav>
<ul>
<li> Home </li>
<li> Benodigdheden </li>
<li> Over ons </li>
</ul>
</nav>
<img src="img/" alt="lol">
</header>
<main>
<div class="thumb-container">
<div class="clear"></div>
</div>
</main>
<footer> Test footer text</footer>
Try this
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="navbar">
Home
Benodigdheden
Contact
</div>
<div class="main">
<p>Some text some text some text some text..</p>
<p>Some text some text some text some text..</p>
</div>
</body>
</html>
You have missed a ":" for the width property.
Kindly correct it.
You are missing a ":" when setting your width!
It should be width: 100%; not width 100%;
html {
scroll-behavior: smooth;
}
.clear {
clear: both;
}
header {
width: 100%;
height: 100px;
position: fixed;
color: rgb(255, 0, 0);
top: 0;
left: 0;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
z-index: 999;
}
footer {
height: 30px;
color: black;
text-align: center;
box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1);
}
header ul {
list-style: none;
float: left;
text-transform: uppercase;
font-family: 'Source Sans Pro';
font-weight: bold;
}
header ul li {
float: left;
margin-left: 60px;
line-height: 100px;
}
header ul a {
text-decoration: none;
}
header ul a:hover {
color: rgb(200, 0, 0);
}
.thumb-container {
max-width: calc(960px + 40px);
margin: 110px auto 0 auto;
}
.thumb-container a {
width: calc(960px / 3);
height: calc(960px / 3);
background: aqua;
float: left;
margin: 0 5px 10px 5px;
}
#media screen and (max-width: 1000px) {
.thumb-container {
max-width: 660px;
/* in midden zetten */
background: black;
}
}
#media screen and (max-width: 660px) {
.thumb-container {
max-width: 100%;
/* in midden zetten */
background: black;
}
.thumb-container a {
width: 100%;
/* maakt containers volledige breedte*/
margin: 0 0 10px 0;
}
}
<header>
<nav>
<ul>
<li> Home </li>
<li> Benodigdheden </li>
<li> Over ons </li>
</ul>
</nav>
<img src="img/" alt="lol">
</header>
<main>
<div class="thumb-container">
<div class="clear"></div>
</div>
</main>
<footer> Test footer text</footer>
You can fix that by setting the property right: 0;. If you look at my example I would recommend you that you remove the float: left; and use display: flex; instead. I changed your example to reflect what I mean. Hope this helps.
I recommend you to look at this post and video
css-tricks.com
Wes Bos (it is free)
html {
scroll-behavior: smooth;
}
* {
box-sizing: border-box;
}
.header {
position: fixed;
top: 0;
right: 0;
left: 0;
display: flex;
align-items: center;
height: 100px;
color: rgb(255, 0, 0);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
z-index: 2;
background-color: deepskyblue;
}
.header__logo {
width: 4rem;
height: 2rem;
margin-left: auto;
background-color: aqua;
}
.navigation-links {
display: flex;
list-style: none;
text-transform: uppercase;
font-family: 'Source Sans Pro';
font-weight: bold;
}
.navigation-links__link {
margin-left: 60px;
line-height: 100px;
}
.navigation-links__link a {
display: block;
text-decoration: none;
}
.navigation-links__link a:hover {
color: rgb(200, 0, 0);
}
footer {
height: 30px;
color: black;
text-align: center;
box-shadow: 1px 0 4px 0 rgba(0, 0, 0, 0.1);
}
.thumb-container {
display: flex;
flex-wrap: wrap;
max-width: calc(960px + 40px);
margin: 110px auto 0 auto;
}
.thumb-container a {
width: calc(960px / 3);
height: calc(960px / 3);
background: aqua;
margin: 0 5px 10px 5px;
}
#media screen and (max-width: 1000px) {
.thumb-container {
max-width: 660px;
/* in midden zetten */
background: black;
}
}
#media screen and (max-width: 660px) {
.thumb-container {
max-width: 100%;
/* in midden zetten */
background: black;
}
.thumb-container a {
width: 100%;
/* maakt containers volledige breedte*/
margin: 0 0 10px 0;
}
}
<header class="header">
<nav class="navigation">
<ul class="navigation-links">
<li class="navigation-links__link"> Home </li>
<li class="navigation-links__link"> Benodigdheden </li>
<li class="navigation-links__link"> Over ons </li>
</ul>
</nav>
<!--<img src="img/" alt="lol" class="header__logo">-->
<div class="header__logo"></div>
</header>
<main>
<div class="thumb-container">
</div>
</main>
<footer> Test footer text</footer>
I am having an issue with this new website for my local Church. I followed this tutorial to create a burger menu with just HTML and CSS: https://www.youtube.com/watch?v=xMTs8tAapnQ&list=PLu-osytzWPuUXmu5BZTuHNRyMBpZS1bsG&index=4&t=0s
Now after learning how to do it, the issue I am running into is I am trying to put an image in the body under the navigation menus, however, when I make my web resolution smaller and click on the burger menu. It is under the image.
I appreciate any help, I tried to look for it everywhere, or I tried at least. I am new to coding. So thank you for your time spent helping me. I really do appreciate it.
**HTML**
<!DOCTYPE html>
<html>
<head>
<title>Church of Christ</title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
<meta name="viewport" contet="width=device-width, initial-scale=1.0">
</head>
<body>
<h1> The Church of Christ </h1>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle"/>
<div class="menu">
Home
Contact
About
<span>Members</span>
</div>
</div>
<h2> location </h2>
<img src="IMG_2597.jpg" alt="Church of Christ">
</body>
</html>
**CSS**
html, body {width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: "helvetica neue", "sans sherif";
}
.nav {
border-bottom: 1px solid gold;
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
text-decoration: none;
color: rgb(255, 255, 255);
margin: 0 10px;
line-height: 70px;
clear: right;
}
span {
color: gold;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
color: gold;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid gold;
margin: 0;
}
#toggle:checked + .menu {
display: block;
}
}
h1 {
text-align: center;
font-size: 50px;
margin: 10px 0px -10px 0px;
color: gold;
}
a {
font-size: 25px;
}
h2 {
text-align: center;
font-size: 45px;
color: rgb(255, 255, 255);
}
img {
width: 100%;
height: auto;
}
body {
background-color: rgb(0, 0, 0);
}
just remove css clear:right and add float:right
.menu {
margin: 0 30px 0 0;
float: right;
}
.menu a {
text-decoration: none;
color: white;
margin: 0 10px;
line-height: 70px;
}
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.
html {
font-family: "helvetica neue", "sans sherif";
}
.nav {
border-bottom: 1px solid gold;
text-align: right;
height: 70px;
line-height: 70px;
/* this line changed */
position: relative;
}
.menu {
margin: 0 30px 0 0;
}
/* i advice,that a tag will made bacgraund-color,because when dropdown menu covering image */
.menu a {
text-decoration: none;
color: rgb(255, 255, 255);
margin: 0 10px;
line-height: 70px;
clear: right;
/* background-color: blue; */
}
span {
color: gold;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
width: 26px;
float: right;
color: gold;
}
#toggle {
display: none;
}
#media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid gold;
margin: 0;
}
#toggle:checked + .menu {
display: block;
}
}
h1 {
text-align: center;
font-size: 50px;
margin: 10px 0px -10px 0px;
color: gold;
}
a {
font-size: 25px;
}
h2 {
text-align: center;
font-size: 45px;
color: rgb(255, 255, 255);
}
img {
width: 100%;
height: auto;
}
body {
background-color: rgb(0, 0, 0);
}
I have a flex nav and it's wrapping to the left and partially off of the screen. Does anyone with more experience know what could be causing this? I can't figure out why it's doing this.
header {
background-color: rgba(255, 165, 0, .8);
border-bottom: 12px solid black;
display: flex;
flex-flow: row wrap;
align-content: center;
}
header h1 {
text-align: center;
margin: 0;
padding: 15px;
text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
border: 8px solid black;
}
header h1,
nav a {
font-weight: 700;
font-family: arial;
}
header nav {
display: none;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
text-align: center;
margin: 1px;
border: 1px solid white;
border-radius: 15px;
}
a {
text-decoration: none;
}
a:visited,
a,
h1 {
color: white;
}
#media screen and (min-width: 400px) {
header {
height: 120px;
display: flex;
justify-content: space-between;
}
header h1 {
margin: 0 0 0 8%;
font-size: 2em;
align-self: flex-start;
white-space: nowrap;
}
header nav {
display: block;
align-self: flex-end;
}
nav ul {
display: flex;
justify-content: flex-end;
margin: 0 8% 0 0;
}
nav ul li {
border-radius: 8px;
padding: 5px;
margin: 4px 1%;
font-size: 1.5rem;
}
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.drop-menu {
position: absolute;
display: none;
top: 38px;
white-space: nowrap;
left: 0;
background-color: rgba(255, 165, 0, .8);
border: 1px solid rgba(0, 0, 0, .02);
box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, .3);
}
.characters:hover .drop-menu {
display: block;
}
.drop-menu li {
margin: 0;
border-radius: 0;
}
footer nav {
display: none;
}
}
<header>
<h1>Seraph Chronicles</h1>
<nav>
<ul class="main-nav">
<li class="main-nav-item">Home</li>
<li class="main-nav-item">About</li>
<li class="main-nav-item characters">
Characters
<ul class="drop-menu">
<li>Ethan Clarke</li>
<li>Serena Kiriaga</li>
<li>Marcus Flynn</li>
<li>Emily Ashdown</li>
<li>Director Miles West</li>
</ul>
</li>
<li class="main-nav-item">Author</li>
</ul>
</nav>
</header>
https://jsfiddle.net/ca75sqzc/17/
Short Answer
Don't use percentages on flex item margins. Use another unit, such as px or em.
revised demo
Explanation
When you make the primary container (.header) a flex container, its children become flex items.
These are the two children: h1 and nav (red borders added below)
Each nav item (li) has a horizontal margin (1% on each side).
nav ul li{
border-radius: 8px;
padding: 5px;
margin: 4px 1%;
font-size: 1.5rem;
}
This causes them to overflow the container.
Then, because the container has justify-content: flex-end, the items are aligned to the container's right edge. This means the overflow occurs on the left side (see image above).
On smaller screens, the nav element wraps to the left edge of the header, and the overflowing items go out of view:
If you switch to justify-content: flex-start, the items overflow on the right side.
But the real problem is actually this:
Why isn't the ul container expanding to accommodate the li children?
The answer appears to be the use of percentages for the horizontal margins.
nav ul {
display: flex;
justify-content: flex-end;
margin: 0 8% 0 0;
}
nav ul li {
border-radius: 8px;
padding: 5px;
margin: 4px 1%;
font-size: 1.5rem;
}
The container is not recognizing this unit on the margins and, therefore, not expanding.
Note that the flexbox spec recommends against using percentage margins and padding on flex items.
4.2. Flex Item Margins and
Paddings
Authors should avoid using percentages in paddings or margins on flex
items entirely, as they will get different behavior in different browsers.
Once you switch to non-percentage units on your margins, everything seems to work.
Change the following in your CSS:
nav ul{
display: flex;
/* justify-content: flex-end; */
margin: 0 8% 0 0;
}
Just erase justify-content: flex-end; from the rule for nav ul in the media query section:
header {
background-color: rgba(255, 165, 0, .8);
border-bottom: 12px solid black;
display: flex;
flex-flow: row wrap;
align-content: center;
}
header h1 {
text-align: center;
margin: 0;
padding: 15px;
text-shadow: 5px 5px 5px rgba(0, 0, 0, .3);
border: 8px solid black;
}
header h1,
nav a {
font-weight: 700;
font-family: arial;
}
header nav {
display: none;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
text-align: center;
margin: 1px;
border: 1px solid white;
border-radius: 15px;
}
a {
text-decoration: none;
}
a:visited,
a,
h1 {
color: white;
}
#media screen and (min-width: 400px) {
header {
height: 120px;
display: flex;
justify-content: space-between;
}
header h1 {
margin: 0 0 0 8%;
font-size: 2em;
align-self: flex-start;
white-space: nowrap;
}
header nav {
display: block;
align-self: flex-end;
}
nav ul {
display: flex;
margin: 0 8% 0 0;
}
nav ul li {
border-radius: 8px;
padding: 5px;
margin: 4px 1%;
font-size: 1.5rem;
}
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.drop-menu {
position: absolute;
display: none;
top: 38px;
white-space: nowrap;
left: 0;
background-color: rgba(255, 165, 0, .8);
border: 1px solid rgba(0, 0, 0, .02);
box-shadow: 5px 5px 5px 2px rgba(0, 0, 0, .3);
}
.characters:hover .drop-menu {
display: block;
}
.drop-menu li {
margin: 0;
border-radius: 0;
}
footer nav {
display: none;
}
}
<header>
<h1>Seraph Chronicles</h1>
<nav>
<ul class="main-nav">
<li class="main-nav-item">Home</li>
<li class="main-nav-item">About</li>
<li class="main-nav-item characters">
Characters
<ul class="drop-menu">
<li>Ethan Clarke</li>
<li>Serena Kiriaga</li>
<li>Marcus Flynn</li>
<li>Emily Ashdown</li>
<li>Director Miles West</li>
</ul>
</li>
<li class="main-nav-item">Author</li>
</ul>
</nav>
</header>
https://jsfiddle.net/7dubc44L/
This is my html:
.HCSI {
background-color: #fff;
height: auto;
width: 100%;
text-align: ;
position: fixed;
left: 0;
top: 0;
z-index: 0;
border: 2px solid #000;
border-radius: 25px;
}
.home,
.csgo,
.steam,
.info {
z-index: 1;
background-color: rgba(50, 150, 250, 0.5);
border: 2px solid #000;
padding: 10px 15px;
border-radius: 20px;
float: center;
}
.home:hover {
background-color: rgba(50, 150, 250, 1);
}
.HCSI,
li {
color: #000;
padding: 0px;
display: inline-block;
font-size: 21px;
font-weight: 100;
letter-spacing: 2.5px;
word-spacing: 90px;
}
<!DOCTYPE html>
<html>
<head>
<title>VusicVoid</title>
<link href="https://fonts.google.com/specimen/Shrikhand" rel="stylesheet">
</head>
<body>
<div class="HCSI">
<ul>
<a href="">
<li class="home">Home</li>
</a>
<a href="http://store.steampowered.com/app/730/">
<li class="csgo">Csgo</li>
</a>
<a href="">
<li class="steam">Steam</li>
</a>
<a href="">
<li class="info">Info</li>
</a>
</ul>
</div>
</body>
</html>
If you put these in a code tester, there should be 4 blue boxes inside of a white one but my problem is I can't get all 4 boxes to align with the center of the white one. I'm trying to get the padding on all sides of the blue boxes to be the same.
Just fix text-align
make it text-align:center;
.HCSI {
background-color: #fff;
height: auto;
width: 100%;
text-align:center ;
position: fixed;
left: 0;
top: 0;
z-index: 0;
border: 2px solid #000;
border-radius: 25px;
}
Try with this answer give ul text-align:center; it will make the anchors center and add text-decoration:line-through; to a tag that makes the line vertically centered
/* styleSheet */
.HCSI {
background-color: #fff;
height: auto;
width: 100%;
text-align:;
position: fixed;
left: 0;
top: 0;
z-index: 0;
border: 2px solid #000;
border-radius: 25px;
}
.HCSI ul {
padding-left: 0;
text-align: center;
}
.HCSI ul a {
text-decoration:line-through;
}
.home, .csgo, .steam, .info {
z-index: 1;
background-color: rgba(50, 150, 250, 0.5);
border: 2px solid #000;
padding: 10px 15px;
border-radius: 20px;
float: center;
}
.home:hover {
background-color: rgba(50, 150, 250, 1);
}
.HCSI, li {
color: #000;
padding: 0px;
display: inline-block;
font-size: 21px;
font-weight: 100;
letter-spacing: 2.5px;
word-spacing: 90px;
}
<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<title>VusicVoid</title>
<link href="https://fonts.google.com/specimen/Shrikhand" rel="stylesheet">
</head>
<body>
<div class="HCSI">
<ul>
<a href="">
<li class="home">Home</li>
</a> <a href="http://store.steampowered.com/app/730/">
<li class="csgo">Csgo</li>
</a> <a href="">
<li class="steam">Steam</li>
</a> <a href="">
<li class="info">Info</li>
</a>
</ul>
</div>
</body>
</html>
You can use CSS Flexbox.
Just apply the Flex container (display: flex) properties with Flex Justify (justify-content: center) and Flex Alignment (align-items: center) Properties.
Have a look on how I've used them in the code below:
/* Parent Element (Flex Container) */
.HCSI {
display: flex;
justify-content: center; /* Center the content horizontaly */
padding: 20px;
border: 2px solid #000;
border-radius: 25px;
}
/* Resetting <ul> (Flex Container) */
ul {
list-style: none;
display: flex;
justify-content: center;
margin: 0;
padding: 0;
}
/* <li> Styles */
ul li {
color: #000;
margin: 0 10px;
font-size: 21px;
font-weight: 100;
letter-spacing: 2.5px;
background-color: rgba(50, 150, 250, 0.5);
border: 2px solid #000;
border-radius: 20px;
}
/* <a> Styles */
ul li a {
display: block;
color: #000;
padding: 10px 15px;
border-radius: 18px;
text-decoration: none;
}
/* <a> Hover Styles */
ul li a:hover {
text-decoration: none;
background-color: rgba(50, 150, 250, 1);
}
<div class="HCSI">
<ul>
<li class="home">Home</li>
<li class="csgo">Csgo</li>
<li class="steam">Steam</li>
<li class="info">Info</li>
</ul>
</div>
Learn more about CSS Flexbox
Hope this helps!
If you want the boxes clustered in the center with a defined gap this will do the trick
.HCSI ul {
display: table;
margin: 0 auto;
padding-left: 0;
}
.HCSI ul a {
/* Adjust this value to adjust the spacing around the buttons */
padding: 20px;
display: table-cell;
}
If you want the boxes spread across the bar evenly then you could add this instead
.HCSI ul {
display: table;
margin: 0 auto;
padding-left: 0;
width: 100%;
}
.HCSI ul a {
padding: 20px;
display: table-cell;
text-align: center;
}