I'm a very new programmer working on a product landing project for FCC and am currently stuck trying to align the nav links under a logo image. Some bits of the css are messy or blank because I've been experimenting.
I've tried different margins, flex-directions, and padding.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
}
li {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
#header-img {
display: flex;
max-width: 75rem;
width: 45rem;
justify-content: center;
align-items: center;
text-align: center;
}
header {
position: fixed;
top: 0;
min-height: 7.5rem;
padding: 0rem 2rem;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #A9A9A9;
}
nav {
width: 100%;
margin: ;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 5rem;
}
nav>ul {
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
<div class="wrapper">
<header id="header">
<div class="logo">
<img id="header-img" src="https://i.imgur.com/G5nVsYG.png" alt="ar-15 logo" />
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#points">What seperates us</a></li>
<li><a class="nav-link" href="#put-together">How to build</a></li>
<li><a class="nav-link" href="#product-price">Current Product Deals</a></li>
</ul>
</nav>
</header>
I expected the nav links to be under the image.
Add to header tag 'flex-wrap: wrap;'
I added what I wrote in the title and it lowered the NAV.
By the way, in CSS you should use Class.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper {
position: relative;
}
li {
list-style: none;
}
a {
color: #000;
text-decoration: none;
}
#header-img {
display: flex;
max-width: 75rem;
width: 45rem;
justify-content: center;
align-items: center;
text-align: center;
}
header {
position: fixed;
top: 0;
min-height: 7.5rem;
padding: 0rem 2rem;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
background-color: #A9A9A9;
}
nav {
width: 100%;
margin: ;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 5rem;
}
nav > ul {
/* width: 35vw; */
display: flex;
flex-direction: row;
justify-content: space-around;
}
nav ul li {
padding: 10px 10px;
}
<div class="wrapper">
<header id="header">
<div class="logo">
<img id="header-img" src="https://i.imgur.com/G5nVsYG.png" alt="ar-15 logo" />
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#points">What seperates us</a></li>
<li><a class="nav-link" href="#put-together">How to build</a></li>
<li><a class="nav-link" href="#product-price">Current Product Deals</a></li>
</ul>
</nav>
</header>
Related
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 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 need to help with how to fix the navbar and logo of the webpage and also how I can able to provide spacing between navbar instead of margin using flexbox.
Please advise every suggestion will be welcome.
header {
display: flex;
justify-content: space-between;
max-width: 100%;
background-color: red;
}
#logo {
margin-left: 2em;
}
nav {}
ul {
display: flex;
}
li {
margin-right: 2.5em;
list-style-type: none;
}
a {
text-decoration: none;
}
<header>
<h1 id="logo">
<a src="#">Portfolio</a>
</h1>
<nav>
<ul>
<li><a src="#">Work</a></li>
<li><a src="#">Quote</a></li>
<li><a src="#">Contact</a></li>
</ul>
</nav>
</header>
Do you want a thing like this?
header {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 100%;
height: 12vh;
background-color: red;
}
#logo {
margin-left: 2em;
height: 100%;
width: 7%;
}
#logo img {
width: 100%;
height: 100%;
}
nav {
width: 40%;
display: flex;
justify-content: flex-end;
}
ul {
display: flex;
justify-content: space-around;
width: 100%;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
#media screen and (max-width: 700px) {
nav {
width: 60%;
}
}
<header>
<div id="logo"><img src="https://s4.uupload.ir/files/7560b48482bfae5c-02b97ffc647f-3822363654_tji3.jpg"></div>
<nav>
<ul>
<li>work</li>
<li>qoate</li>
<li>contact</li>
</ul>
</nav>
</header>
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.
I am trying to list navigation elements from left to right like this:
Start Über Weitere Kontakt instead of this
Start
Über
Weitere
Kontakt
but it doesn't seem to work. I have already tried using float: left;
,display:inline; and list-style: none; on #navigation li but it just stays the same.
This is the navigation structure in the index.html
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body header {
top: 0;
left: 0;
display: flex;
position: absolute;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 30px 100px;
}
#navigation {
display: flex;
justify-content: center;
align-items: center;
}
#navigation li {
display: inline;
position: absolute;
}
<header>
Logo
<ul class="navigation">
<li>Start</li>
<li>Über</li>
<li>Weitere</li>
<li>Kontakt</li>
</ul>
</header>
You have given ul a class="navigation"
But the problem is that in your CSS you are using the id selector
#navigation
Jsut change it to class selector:
.navigation
Also, to achieve your goal position is not required.
The Following Code is Sufficient.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 10px;
}
.navigation {
display: flex;
align-items: center;
}
.navigation li {
display: inline;
padding: 0 10px;
}
<header>
Logo
<ul class="navigation">
<li>Start</li>
<li>Über</li>
<li>Weitere</li>
<li>Kontakt</li>
</ul>
</header>
If I understood right, here is the solution.
body {
font-family: sans-serif;
box-sizing: border-box;
}
header {
display: flex;
flex-direction: row;
}
.logo{
margin: 0 30px 0 0;
}
.navigation {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
}
.navigation li {
margin: 0 10px 0 0;
padding: 0 10px 0 0;
}
<header>
<div class="logo">Logo</div>
<ul class="navigation">
<li>Start</li>
<li>Über</li>
<li>Weitere</li>
<li>Kontakt</li>
</ul>
</header>