I'm trying to arrange two empty divs as background elements behind a menu. All three elements are direct children of a flex container, but none of them will respect z-index, and I can't identify the cause. They will respect z-index when I set a position attribute, but then they lose the ability to flex.
html {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
font-size: 100%;
}
#menuWrapper {
display: flex;
flex-flow: column wrap;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#menuBox {
z-index: 10;
width: 100%;
display: flex;
}
#menuBG {
z-index: 1;
margin: 0;
width: 100%;
min-height: 140px;
background-color: #000;
flex: 1;
}
#menuBar {
z-index: 2;
background-color: #d50000;
width: 100%;
min-height: 60px;
margin: 140px 0 0 0;
flex: 1;
}
header {
background-color: #FFF;
border-radius: 4px;
padding: 10px;
margin: 25px 25px 15px 3%;
width: auto;
height: auto;
flex: 0;
}
#siteHeading {
color:#d50000;
text-align: end;
font-style: italic;
display: flex;
flex-direction: column-reverse;
min-width: 400px;
margin: auto 4% 0 auto;
flex: 2 0;
}
nav {
display: flex;
flex-direction: column;
align-content: end;
flex: 1;
font-size: 2rem;
}
nav ul {
list-style: none;
margin: 0 4% 10px;
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-end;
}
nav ul li {
margin-left: 5%;
}
nav a {
color: #000F;
text-decoration: none;
}
<body>
<div id="menuWrapper">
<div id="menuBox">
<header>
<img src="./imgs/A++ManufacturingLogo.png" alt="A++ Manufacturing Logo">
</header>
<nav>
<h1 id="siteHeading">A++ Manufacturing</h1>
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div id="menuBG"></div>
<div id="menuBar"></div>
</div>
</body>
A bit unsure what your end goal is. I assume it is to have the menuBox section act as a sort of "navbar" that covers any elements below it and sticks to the top.
Regardless, after throwing your code into a Codepen, and after adding margin-top: -200px; to the menuBG element, z-index seems to be working just fine. It might have been that you did not have background-color set on the menuBox, which made it seem like the menuBG was covering it.
See the Codepen link for an example showing that your z-index's are working just fine, even without setting position.
https://codepen.io/Bluhurr/pen/zYpJVQa
The z-index should be define as per example below. Also position attribute could be fixed, relative or absolute. But the key part is to define it.
.nav{
position: fixed;
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
height: 96px;
background-color: var(--dark-bg);
z-index: 3; /* makes sure that navbar is on top of other elements */
}
You mean like this?
html {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
padding: 0;
margin: 0;
font-size: 100%;
}
#menuWrapper {
display: flex;
flex-flow: column wrap;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#menuBox {
z-index: 10;
width: 100%;
display: flex;
}
#menuBG {
z-index: 1;
margin: 0;
width: 100%;
min-height: 140px;
background-color: #000;
flex: 1;
}
#menuBar {
z-index: 2;
background-color: #d50000;
width: 100%;
min-height: 60px;
margin: 140px 0 0 0;
flex: 1;
}
header {
background-color: #FFF;
border-radius: 4px;
padding: 10px;
margin: 25px 25px 15px 3%;
width: auto;
height: auto;
flex: 0;
}
#siteHeading {
color:#d50000;
text-align: end;
font-style: italic;
display: flex;
flex-direction: column-reverse;
min-width: 400px;
margin: auto 4% 0 auto;
flex: 2 0;
margin-top:-60px;
}
nav {
display: flex;
flex-direction: column;
align-content: end;
flex: 1;
font-size: 2rem;
}
nav ul {
list-style: none;
margin: 0 4% 10px;
display: flex;
flex: 1;
flex-wrap: wrap;
justify-content: flex-end;
align-items: flex-end;
}
nav ul li {
margin-left: 5%;
}
nav a {
color: #000F;
text-decoration: none;
}
<body>
<div id="menuWrapper ">
<div id="menuBox ">
<header id="menuBG">
<img src="./imgs/A++ManufacturingLogo.png" alt="A++ Manufacturing Logo">
</header>
<nav id="menuBar">
<h1 id="siteHeading">A++ Manufacturing</h1>
<ul id="menu ">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</body>
Related
I'm having some problems creating a header.
Here, my ul is not using the full height of the nav, but the nav IS using the full height of the header.
I want to fix this in order to center vertically the text.
Thank you.
(edit) When I use height: 100%; on the ul, this happens.
This is my HTML:
<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORKS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
This is my SASS:
$BLACK:#000;
$WHITE:#fff;
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 75px;
background-color: $BLACK;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
nav {
width: 50%;
padding-right: 50px;
ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
li {
display: inline-block;
margin-left:50px;
a {
text-decoration: none;
color: $WHITE;
}
}
}
}
}
Here is a solution for this. Just add line-height: 75px; to the li elements and set the ul element's margin to zero by adding margin: 0px;.
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 75px;
background-color: #000;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
header .logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
header nav {
width: 50%;
padding-right: 50px;
}
header nav ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
margin: 0px;
}
header nav ul li {
display: inline-block;
margin-left: 50px;
line-height: 75px;
}
header nav ul li a {
text-decoration: none;
color: #fff;
}
<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORKS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
However I converted your SASS code into CSS to run it on the stack overflow code snippet runner. You can change this to SASS again if you want.
Thanks and best regards!
Its probably because you did not reset the margin for the ul tag and also apply a 100% percent height to it also.
$BLACK: #000;
$WHITE: #fff;
* {
box-sizing: border-box;
// margin: 0;
// padding: 0;
}
header {
width: 100%;
height: 75px;
background-color: $BLACK;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
nav {
width: 50%;
padding-right: 50px;
background: red;
ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
background: orange;
height: 100%;
li {
display: inline-block;
margin-left: 50px;
a {
text-decoration: none;
color: $WHITE;
}
}
}
}
}
<header>
<div class="logo">
<img src="https://via.placeholder.com/20x20.png/09f/fff" />
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORKS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
Please update your css with following code:
$BLACK:#000;
$WHITE:#fff;
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 75px;
background-color: $BLACK;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
nav {
width: 50%;
padding-right: 50px;
height: 100%;
display: flex;
align-items: center;
ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
flex: 1 0 auto;
align-self: stretch;
align-items: center;
li {
display: inline-block;
margin-left:50px;
a {
text-decoration: none;
color: $WHITE;
}
}
}
}
}
Im working on the product landing page project from freecodecamp, and I'm struggling to understand what I'm not doing right with my flexbox nav bar.
My nav links start to disappear off the right side as the viewport width shrinks below 1200px.
What can I do to maintain padding-right: 5px; value on the right hand most nav item as the viewport changes size?
here is my HTML and CSS, as well as the codepen link https://codepen.io/lforsey/pen/NWwGZzV
<div id='page-wrapper'>
<header id='header'>
<div class='cat-logo'>
<img id='header-img' src='https://free-images.com/or/7b03/logo_hoffmanns_staerkefabriken_svg.svg' id='cat-logo' alt='cat-svg-logo'></img>
</div>
<nav id='nav-bar'>
<ul>
<li><a class='nav-link' href='#features' id='nav-link'>Features</a></li>
<li><a class='nav-link' href='#how-it-works' id='nav-link'>How It Works</a></li>
<li><a class='nav-link' href='#pricing' id='nav-link'>Pricing</a></li>
</ul>
</nav>
</header>
<div class='container'></div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#page-wrapper {
position: relative;
}
.container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: auto;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #eee;
}
/*header {
display: flex;
flex: 0 0 auto;
top: 0;
left: 0;
right: 0;
}*/
.logo {
width: 60vw;
}
#media (max-width: 650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.cat-logo > img {
width: 100%;
height: 100%;
width: 100px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.nav-bar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
li {
font-family: cursive;
list-style: none;
padding: 1vw;
}
nav > ul {
width: 95vw;
display: flex;
content-align: center;
flex-direction: row;
justify-content: flex-end;
padding-right: 20px;
}
Take away your line 70 :
70: width: 95vw;
And it will works.
First of all, the first snippet below is the problem I'm trying to fix.
Note that this was working perfectly fine IF display: flex; is applied to body.
However, I do not want to apply style to body which will break Google Web Cache layout.
* More explanation after the first snippet
* { box-sizing: border-box; }
body { margin: 0; }
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background-color: #ccc;
}
.navigation {
background-color: #f00;
width: 100%;
height: 3rem;
}
.footer {
background-color: #0f0;
width: 100%;
text-align: center;
line-height: 2rem;
}
.content {
background-color: #ff0;
flex: 1;
margin: 0.6rem 0 1.2rem;
}
.container {
background-color: #f0f;
margin: 0 auto;
max-width: 120rem;
width: 100%;
padding: 0 2rem;
}
.centered {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.long-content {
background-color: #fff;
}
<main class="wrapper">
<nav class="navigation">.navigation</nav>
<div class="content">
<section class="container centered">
<div class="long-content">.long-content</div>
</section>
</div>
<footer class="footer">.footer</footer>
</main>
So, removing display: flex; raised this issue:
section within .content does not have the height spanning across .content
Trying to fix it with position: relative on .content and position: absolute on .centered fixed the height issue but raised:
Width of .centered does not span across .content which can be easily fixed with left:0;right:0;
Height does not flow with content in section (I'm out of idea here)
Was it wrong to use position: relative and position: absolute to patch the original issue?
If so, what is the more suitable solution?
* { box-sizing: border-box; }
body { margin: 0; }
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background-color: #ccc;
}
.navigation {
background-color: #f00;
width: 100%;
height: 3rem;
}
.footer {
background-color: #0f0;
width: 100%;
text-align: center;
line-height: 2rem;
}
.content {
background-color: #ff0;
flex: 1;
margin: 0.6rem 0 1.2rem;
position: relative;
}
.container {
background-color: #f0f;
margin: 0 auto;
max-width: 120rem;
width: 100%;
padding: 0 2rem;
}
.centered {
display: flex;
position: absolute;
height: 100%;
left: 0;
right: 0;
align-items: center;
justify-content: center;
}
.long-content {
background-color: #fff;
height: 1000px;
}
<main class="wrapper">
<nav class="navigation">.navigation</nav>
<div class="content">
<section class="container centered">
<div class="long-content">.long-content</div>
</section>
</div>
<footer class="footer">.footer</footer>
</main>
I continued looking for solution and quickly noticed that I have shallow knowledge about flexbox itself so I went ahead and played with Flexbox Froggy.
After completing all the levels, I noticed that I can align everything without position: absolute by just using justify-content on .wrapper.
Below is my solution for my silly issue.
If you remove height of .long-content, .centered will continue to get aligned vertically.
Thank you froggies and shout out to Codepip!
* { box-sizing: border-box; }
body { margin: 0; }
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
background-color: #ccc;
justify-content: space-between;
}
.navigation {
background-color: #f00;
width: 100%;
height: 3rem;
}
.footer {
background-color: #0f0;
width: 100%;
text-align: center;
line-height: 2rem;
}
.content {
background-color: #ff0;
margin: 0.6rem 0 1.2rem;
}
.container {
background-color: #f0f;
margin: 0 auto;
max-width: 120rem;
width: 100%;
padding: 0 2rem;
}
.centered {
display: flex;
height: 100%;
align-items: center;
justify-content: center;
}
.long-content {
background-color: #fff;
height: 1000px;
}
<main class="wrapper">
<nav class="navigation">.navigation</nav>
<div class="content">
<section class="container centered">
<div class="long-content">.long-content</div>
</section>
</div>
<footer class="footer">.footer</footer>
</main>
im a bit lost:
im trying to make the space between 3 divs (horizontally) 40px, but it doesnt seem to work when i do it:
https://github.com/itsolidude/Tea_Cozy
i want the yellow marked parts to be 40px:
html {
font-family: Helvetica;
font-size: 22px;
color: seashell;
background-color: black;
opacity: 0.9;
text-align: center;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
height: 69px;
border-bottom: 1px solid seashell;
position: fixed;
width: 100%;
z-index: 2;
background-color: black;
top: 0;
}
#locations h2 {
flex: 1 0 100%; /* shorthand for: flex-grow:1;
flex-shrink: 0;
flex-basis: 100%; */
text-align: center;
position: absolute; /* found this to be a simpler solution, and i sticked with it even tho i dont have exact 10px :p */
top: 1510px;
z-index: 3;
}
img {
height: 50px;
padding-left: 10px;
}
nav span {
color: seashell;
padding-right: 30px;
}
.mission-banner {
background-color: black;
}
.mission-banner h4 {
padding-bottom: 10px;
}
a {
cursor: pointer;
text-decoration-color: seashell;
}
#mission {
background-image: url(../images/img-mission-background.jpg);
position: relative;
margin: 70px auto 0;
width: 1200px;
height: 700px;
display: flex;
flex-direction: column;
justify-content: center;
}
#tea-of-month {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 1000px;
margin: 0 auto 70px;
}
#tea-of-month img {
height: 200px;
width: 300px;
margin-bottom: 10px;
}
.item {
display: flex;
flex-direction: column;
padding: 10px;
}
.contact {
height: 200px;
}
#locations {
height: 500px;
width: 1200px;
margin: 0 auto;
background-image: url(../images/img-locations-background.jpg);
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
}
.address {
background-color: black;
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
}
#copyright {
text-align: left;
margin-left: 20px;
}
<div id="locations">
<h2>Locations</h2>
<div class="address">
<h3>Downtown</h3>
<p>384 West 4th St</p>
<p>Suite 108</p>
<p>Portland, Maine</p>
</div>
<div class="address">
<h3>East Bayside</h3>
<p>3433 Phisherman's Avenue</p>
<p>(Northwest Corner)</p>
<p>Portland, Maine</p>
</div>
<div class="address">
<h3>Oakdale</h3>
<p>515 Crescent Avenue</p>
<p>Second Floor</p>
<p>Portland, Maine</p>
</div>
</div>
i put in the whole css. just in case something is affecting it. Pls explain what and why you did it :p
Don't use justify-content: space-between; as this will allot space depending on the available space.
Instead, center the flex-children and give them side margin of 20px (2 * 20px = 40px).
.wrap {
display: flex;
justify-content: center;
width: 90%;
margin: auto;
border: 1px solid grey;
}
.box {
background: #000;
width: 150px;
height: 150px;
margin: 20px;
}
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Alternatively, you could set a max-width of the parent container, thus making less available space for the children to spread out with the space-between style.
I'm creating navigation bars using flexbox and ran into this particular issue when trying to create buttons out of anchor tags (i.e. link in the centre of a box).
I have the li set to display flex so I can centre the a, but as soon as I give the a some height, the a aligns to the top-left. Is there any way of getting the a centred?
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font: sans-serif;
}
#top-nav {
border-bottom: 4px solid blue;
}
#center-section {
display: flex;
width: 1000px;
margin: auto;
}
#center-section>* {
flex: 1 1 0;
}
header section {
background: blue;
height: 90px;
width: 500px;
}
.navbar {
display: flex;
}
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
align-self: center;
border: 1px solid red;
}
.navbar ul li {
display: flex;
flex: 1 1 100%;
}
.navbar ul li a {
background-color: yellow;
align-self: center;
width: 100%;
height: 100%;
}
.navbar ul li a:hover {
background-color: green;
}
<header>
<div id="top-nav">
<div id="center-section">
<section id="logo">
Home
</section>
<div class="navbar">
<ul>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</header>
When you set height:100% to a you make it stretch all the li and thus you can no more control it as all the alignment are equivalent in this case. What you need is to align the content inside the a. For this you can make it a flex container and use align-items and/or justify-content:
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font: sans-serif;
}
#top-nav {
border-bottom: 4px solid blue;
}
#center-section {
display: flex;
width: 1000px;
margin: auto;
}
#center-section>* {
flex: 1 1 0;
}
header section {
background: blue;
height: 90px;
width: 500px;
}
.navbar {
display: flex;
}
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
align-self: center;
border: 1px solid red;
}
.navbar ul li {
display: flex;
flex: 1 1 100%;
}
.navbar ul li a {
background-color: yellow;
display:inline-flex;
align-items: center;
justify-content:center;
width: 100%;
height: 100%;
}
.navbar ul li a:hover {
background-color: green;
}
<header>
<div id="top-nav">
<div id="center-section">
<section id="logo">
Home
</section>
<div class="navbar">
<ul>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</header>