I'm trying to create a responsive navbar with three items in the same container in the middle as shown below.
For some reason the ul items are not being space evenly and it is showing me this:
I used these lines of code:
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
flex: 1;
max-width: 50%;
display: flex;
justify-content: space-evenly;
}
ul,
li {
display: inline;
margin: 0;
padding: 0;
}
<nav>
Home
<ul>
<li>
Learn More
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
Sign Up
</nav>
I appreciate any help and apologize if this post is unclear; I'm still new to this website.
What seemed to fix the issue was changing the "ul {...}" item in css to "nav ul{...}". Hopefully this can help out someone else in the future as well.
space-evenly or space-between will work!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: block;
width: 90%;
margin: 5% auto;
}
nav {
display: flex;
justify-content: space-evenly;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
li+li {
margin-left: 1.5rem;
float: left;
display: inline-block;
}
<header>
<nav>
Home
<ul>
<li>Learn More</li>
<li>About</li>
<li>Contact</li>
</ul>
Sign Up
</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 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>
* {
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;
}
I'd like to make the li elements tall as the height of the header.
CodePen
*,
::before,
::after {
border-box: box-sizing;
margin: 0; padding: 0;
}
header {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
background: yellow;
height: 7.5vh;
}
.navigation li {
display: inline-block;
padding: 0 1em;
}
.navigation li:hover {
text-align: center;
background-color: white;
}
<header>
<h1>Logo</h1>
<nav>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
</nav>
</header>
One way to achieve this is to utilize the line-height property and make it the same as the height you defined for your <header>:
.navigation li:hover {
text-align: center;
background-color: white;
line-height: 7.5vh;
}
Here's an updated CodePen. Hope this helps! Let me know if you have any questions.
Add display:block in .navigation li:hover.