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>
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;
}
}
}
}
}
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>
My header should be fixed on the page so i couldn't use float:right;. I'm %150 newbie around here. Logo should be on right side of the navbar and also responsive. I tried margin, float and other flex properties. I'm just going to be mad. Where is the mistake.
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
margin: 0;
font-family: 'Trebuchet MS', sans-serif;
background-color: #efefef;
}
.wrapper {
position: relative;
}
.header-logo {
width: 20vw;
height: 20vw;
}
header {
width: 100%;
height: 4rem;
background: #609F92;
position: fixed;
display: flex;
font-family: Oswald, sans-serif;
font-size: 1.5rem;
}
#header-img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 1px 1px 2px 1px;
}
#nav-bar {
display: flex;
flex-direction: row;
}
#nav-bar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
}
#nav-bar li {
margin: 10px;
}
<div class="wrapper">
<header id="header">
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="header-logo">
<img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943%2C943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
</div>
</nav>
</header>
</div>
The issue is mainly caused because you nesting so many flexboxes within each other. As such the elements will not span the entire available width automatically.
Give the nav tag a width of 100% to fill out the entire containers width: #nav-bar { width: 100% }
to align the logo to the right within a flexbox use margin-left: auto: .header-logo { margin-left: auto; }
Also you could improve your code by removing the ID from the nav element and target the nav element directly. As semantically you should only have one nav element it would be unecessary to asign an id to it. Same rule also counts for the header element.
Then you could remove display: flex; from the header which has only one child element in the first place and as such is useless. IMHO it would be smarter though to close the nav with the ul as the logog is semantically not part of the navbar.
Last but not least you could remove flex-direction: row as it is the default value anyways.
#nav-bar {
width: 100%;
}
.header-logo {
margin-left: auto;
}
/* original CSS */
#import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');
body {
margin: 0;
font-family: 'Trebuchet MS', sans-serif;
background-color: #efefef;
}
.wrapper {
position: relative;
}
.header-logo {
width: 20vw;
height: 20vw;
}
header {
width: 100%;
height: 4rem;
background: #609F92;
position: fixed;
display: flex;
font-family: Oswald, sans-serif;
font-size: 1.5rem;
}
#header-img {
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 1px 1px 2px 1px;
}
#nav-bar {
display: flex;
flex-direction: row;
}
#nav-bar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
}
#nav-bar li {
margin: 10px;
}
<div class="wrapper">
<header id="header">
<nav id="nav-bar">
<ul>
<li>Features</li>
<li>About Us</li>
<li>Contact</li>
</ul>
<div class="header-logo">
<img id="header-img" src="https://thumbnails-photos.amazon.com/v1/thumbnail/lFJOXJpuTKGgtJYa9-wScA?viewBox=943%2C943&ownerId=A4PYAHHROL8LR&groupShareToken=OSTx_M1GRRS1y_rPWtVfGA.8mpQdgJWAet53NrSPN2TyS">
</div>
</nav>
</header>
</div>
I also created a Codepen for you where I corrected the code to be semantically correct and to shroten it to the necessary lines: Codepen
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
.nav-links,
.logo {
text-decoration: none;
color: #000;
}
.logo {
max-width: 80%;
width: 20%;
height: 20%;
}
.navbar img {
width: 10%;
height: auto;
display: in-line block;
}
.navbar {
padding: 20px;
height: 50vh;
}
.navbar,
ul {
display: flex;
flex-direction: row;
}
ul li {
padding: 0 5px;
}
.wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}
<nav class="navbar">
<img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt="">
<div class="wrapper">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
</ul>
<ul class="ul2">
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</div>
</nav>
Above is my code, as you can see there's a huge gap in between my image and the above highlighted below:
It also seems like the white space in between it is clickable. I want to get rid of it so it looks like this instead (keeping the spacing in between about us and contact us but removing the spacing between the image and Home):
I tried getting rid of all padding and changing my logo to inside my unorder list, but that didn't do anything.
For best results, set image size by height, ex:
img {
height: 30px;
width: auto;
}
See the working fiddle https://jsfiddle.net/8hdt4rfu/1/
Try changing the width of the Image to a set amount of pixels and not a percent like so:
.navbar img {
width: 50px;
}
It looks to me like you are trying to target a class by the name of logo in your CSS file, but when I look at your HTML, I don't see a class='logo'.
In response to his request in the comments, here is the final code snippet:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
.nav-links,
.logo {
text-decoration: none;
color: #000;
}
.logo {
max-width: 80%;
width: 20%;
height: 20%;
}
.navbar img {
width: 10%;
height: auto;
display: in-line block;
}
.navbar {
padding: 20px;
height: 50vh;
}
.navbar,
ul {
display: flex;
flex-direction: row;
}
ul li {
padding: 0 5px;
}
.wrapper {
display: flex;
justify-content: space-between;
width: 100%;
}
.nav-logo{
text-decoration: none;
color: #000;
padding-left: 10px;
}
<nav class="navbar">
<img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt="">
<div class="wrapper">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
</ul>
<ul class="ul2">
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</div>
</nav>
You try to make the image 10% inside <a> tag, it means that the difference between <a> tag and <img> tag must be 90%, that's how I understand that. So you can solve your issue just by changing % to pixels, or change percentage on <a> and <img> tags.
.navbar img {
width: 100%;
height: auto;
display: in-line block;
}
.navbar a {
width: 10%;
}
But as i can see you mixed up everything in your html/css, you can achieve the same result by this way:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.navbar {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.leftbar, .rightbar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 40%;
}
.rightbar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 16%;
}
.navbar img {
width: 100%
}
.navbar a {
width: 20%;
}
.nav-links {
text-align: center;
}
<nav class="navbar">
<div class="leftbar">
<img src="https://cdn.discordapp.com/attachments/714128376884887644/783384657366482954/Double20Hospital20Doors20push20plate20and20kickplate.png" alt="">
Home
Products
About Us
</div>
<div class="rightbar">
Contact Us
Blog
</div>
</nav>
For some reason my navbar is not becoming 100% width. I tried to make .main-header 100% width but still not sure what the problem. The reason to make the navbar 100% is for all the nav items fit on one line. Any ideas what I am doing wrong?
Here is what the navbar looks like on the machine
http://imgur.com/a/za9LH
HTML
**Css**
/* Navigation */
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: purple;
width: 100%;
}
.logo-name {
margin-left: 1%;
background-color: red;
}
.main-nav {
display: flex;
background-color: yellow;
}
.main-nav li {
padding: 0.3em;
align-items: flex-end;
background-color: transparent;
font-size: 17px;
}
<header class="main-header">
<!--<h1 class="logo-name"><li>R.J Roofer</li></h1>-->
<h1 class="logo-name">R.J Roofer</h1>
<nav class="main-nav">
<li class="nav-item-1">home</li>
<li>services</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
<!--<li>FREE QUOTE</li>-->
</nav>
</header>
By default body take 8px margin, thats why your navbar is not fullwifth. So add margin:0 in your body tag. Here is the codepen: https://codepen.io/bhuwanb9/pen/XgmegE
body{
margin:0;
}
Probably all you need is the padding and margin for html and body to be set to zero. You may want to consider using a generic reset like this or this.
/* Navigation */
html, body {
padding: 0;
margin: 0;
}
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: purple;
width: 100vw;
}
.logo-name {
margin-left: 1%;
background-color: red;
}
.main-nav {
display: flex;
background-color: yellow;
}
.main-nav li {
padding: 0.3em;
align-items: flex-end;
background-color: transparent;
font-size: 17px;
}
<header class="main-header">
<!-- <h1 class="logo-name"><li>R.J Roofer</li></h1>
-->
<h1 class="logo-name">R.J Roofer</h1>
<nav class="main-nav">
<li class="nav-item-1">home</li>
<li>services</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
<!-- <li>FREE QUOTE</li>
-->
</nav>
</header>
The problem was, that the container wasn't full width. And the list items were also too small. Here is a pen: https://codepen.io/praedictus/pen/zzvpez
/* Navigation */
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: purple;
width: 100%;
}
.logo-name {
margin-left: 1%;
background-color: red;
}
.main-nav {
display: flex;
background-color: yellow;
width: 100%;
}
.main-nav li {
padding: 0.3em;
align-items: flex-end;
background-color: transparent;
font-size: 17px;
display: block;
float: left;
width: 20%;
text-align: center;
}