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.
Related
HTML
<div id="dashboard">
<div id="Sidebar">
<div id="User-Icon"></div>
<ul>
<li a href="#">Home</li>
<li a href="#">Home</li>
<li a href="#">Home</li>
<li a href="#">Home</li>
<li a href="#">Home</li>
</ul>
</div>
<div id="Dashboard">
</div>
<div id="UserFeed">
</div>
</div>
CSS
* {
Font-Family: Arial;
Margin: 0;
Padding: 0;
}
#dashboard {
display: flex;
height: 100vh;
width: 100vw;
}
#Sidebar {
background-color: #5c5c5c;
height: 100%;
width: 20%;
display: flex;
justify-content: center;
align-self: flex-end;
}
#Dashboard {
background-color: #999999;
height: 100%;
width: 50%;
}
#UserFeed {
background-color: #D9D5D6;
height: 100%;
width: 30%;
}
#User-Icon {
width: 150px;
height: 150px;
background-color: white;
border-radius: 50px;
margin-top: 50px;
}
ul {
}
li {
list-style: none;
margin-top: 50px;
}
My goal here is to move the ul under my User-Icon in a centered matter, if anyone could help me it would be greatly appreciated!
I tried using things like Clear: left; for the ul, Float: bottom; but I just couldn’t get anything to work. I would like to know more about this so if you can, I would like the explanations to be a bit detailed for me
just add flex-direction and align items
#Sidebar {
background-color: #5c5c5c;
height: 100%;
width: 20%;
display: flex;
flex-direction: column;
align-items:center
}
You tried with z-index ?
try this
ul {
z-index: -1;
}
Change this within sidebar
#Sidebar {
background-color: #5c5c5c;
height: 100%;
width: 20%;
display: flex;
align-items: flex-end;
flex-direction: column;
}
It will keep the formatting you were trying to achieve.
I think you are looking for something like this
If this is what you are looking for please use flex-flow: column;align-items: center; for the parent Element. display flex is a little bit complex. you should read the doc carefully. Here is the updated CSS for you.
#Sidebar {
background-color: #5c5c5c;
height: 100%;
width: 20%;
display: flex;
flex-flow: column;
align-items: center;
}
ul {
width: 100%;
margin-top: 10px;
}
li {
list-style: none;
padding: 12px;
margin-bottom: 2px;
}
I'm trying to create a flex header with nav. However, my image doesn't seem to be responsive. As I'm minimizing the width the menu seems to act responsive but my logo image doesn't.
The image is a dummy one, when i set an image with these certain width and height (without adding any dimensions in property i have the same issue)
How can i solve this?
body {
margin: 0;
margin: 0;
width: 100%;
display: flex;
}
header {
width: 100%;
height: 91px;
background-color: #222222;
position: relative;
}
a {
text-decoration: none;
color: #fff;
font-size: 15px;
line-height: 17.22px;
}
ul {
list-style: none;
}
nav {
display: flex;
justify-content: space-between;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
margin-right: 280px;
}
li {
margin-left: 35px;
}
nav img {
display: flex;
margin-left: 254px;
position: relative;
}
<body>
<header>
<nav>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Logo_brand_Adidas.png/800px-Logo_brand_Adidas.png" alt="Digital Wise Logo" width="404" height="91">
<ul>
<li style="margin-left:0;">Hompage</li>
<li>About us</li>
<li>Our Services</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
Preserve aspect ratio:
img {
height: 91px;
width: auto;
}
please check the code you need to add height: 91px; object-fit: contain; in logo image and set max-width for responsive you need to add media query I have mention in code so you can check it.
body {
margin: 0;
margin: 0;
width: 100%;
display: flex;
flex-direction:column;
}
header {
width: 100%;
padding: 10px 0;
background-color: #d2d2d2;
position: relative;
}
a {
text-decoration: none;
color: #000;
font-size: 15px;
}
ul {
list-style: none;
padding:0;
margin:0;
}
nav {
display: flex;
justify-content: space-between;
padding:0 5%;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
}
li {
margin-right: 35px;
}
li:last-child {
margin-right:0px;
}
nav img {
display: flex;
position: relative;
height: 91px;
object-fit: contain;
width: 100%;
max-width: 100px;
}
#media screen and (max-width:575px){
nav{flex-direction:column;}
nav ul {
display: flex;
justify-content: left;
align-items: center;
margin-top: 20px;
flex-wrap: wrap;
}
}
<body>
<header>
<nav>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ee/Logo_brand_Adidas.png/800px-Logo_brand_Adidas.png" alt="Digital Wise Logo" width="404" height="91">
<ul>
<li style="margin-left:0;">Hompage</li>
<li>About us</li>
<li>Our Services</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</nav>
</header>
</body>
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>
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;
}
}
}
}
}
I have a header on my website which is behaving oddly as I expand and shrink the window size. I have not come across a bug like this before and am not sure if I am overlooking something simple.
It seems that the flex behavior of the header is changing every few pixels — for no apparent reason to me. Reference the attached video:
Here are two images show the difference in width for for #nav--logo when the window width is 1px different.
Here is the relevant code I have for the header:
body#home-page {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--blue);
color: var(--red);
height: 100vh;
}
body#home-page>header {
flex: 0 0 auto;
}
body#home-page>#main {
flex: 1 0 auto;
}
body#home-page>footer {
flex: 0 0 auto;
}
/* Header */
header {
display: flex;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
position: relative;
width: 100%;
height: 7rem;
padding: var(--outer-padding);
background-color: var(--secondary-color);
color: var(--red);
}
header>.nav-wrapper {
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: var(--max-layout-width);
}
header nav {
align-self: center;
z-index: 1000;
}
header nav .nav--link {
cursor: pointer;
font-size: 2.15rem;
}
header #nav--logo {
flex: 0 1 auto;
position: relative;
display: flex;
justify-content: flex-start;
height: 100%;
}
header #nav--logo>img {
width: auto;
height: 100%;
}
header #nav--logo>span {
align-self: center;
}
header #nav--menu {
flex: 1 0 auto;
display: flex;
justify-content: flex-end;
}
header #nav--menu>ul>li {
display: inline-block;
margin-left: 4.75rem;
}
<body id="home-page">
<header>
<div class="nav-wrapper">
<nav id="nav--logo">
<img src="assets/images/logo.png" alt="">
</nav>
<nav id="nav--menu">
<ul>
<li class="nav--link"><span>work</span></li>
<li class="nav--link"><span>about</span></li>
</ul>
</nav>
</div>
</header>
<!-- rest of site below -->
</body>
All suggestions are appreciated! Thanks for the help!
FYI: the error in the console is related to my favicon.ico missing.