i have this markup which i gave a background color, but the contents just flow out of the background color, even though i gave it height of 100% and a min-height too.
.nav {
padding: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: 40px;
list-style: none;
border: 1px solid red;
}
.nav li {
padding-left: 8px;
padding-right: 8px;
}
<div class="navBar">
<ul class="nav dark-grey">
<li>Home</li>
<li>About</li>
<li>Support</li>
<li>Blog</li>
<li>Blog</li>
</ul>
</div>
I am just trying to build without a framework, please can someone point me in the right direction?
Update the height of .nav to auto instead of 40px, and that should allow it to consume required space.
.nav {
padding: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: auto;
list-style: none;
border: 1px solid red;
}
.nav li {
padding-left: 8px;
padding-right: 8px;
}
<div class="navBar">
<ul class="nav dark-grey">
<li>Home</li>
<li>About</li>
<li>Support</li>
<li>Blog</li>
<li>Blog</li>
</ul>
</div>
That is because you are forcing the height to use height: 40px you need to use min-height:40px;
see fiddle
https://jsfiddle.net/bf6nLmL6/
.nav {
padding: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
min-height: 40px;
list-style: none;
border: 1px solid red;
}
I have update the CSS, please check:
.nav {
padding: 0;
display: flex;
height: 40px;
list-style: none;
border: 1px solid red;
}
.nav li {
padding: 8px;
float: left;
}
<div class="navBar">
<ul class="nav dark-grey">
<li>Home</li>
<li>About</li>
<li>Support</li>
<li>Blog</li>
<li>Blog</li>
</ul>
</div>
Second option:
.nav {
padding: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: auto;
list-style: none;
border: 1px solid red;
}
.nav li {
padding-left: 8px;
padding-right: 8px;
}
<div class="navBar">
<ul class="nav dark-grey">
<li>Home</li>
<li>About</li>
<li>Support</li>
<li>Blog</li>
<li>Blog</li>
</ul>
</div>
Change :
.nav {
height: 40px;
//other codes...
}
To :
.nav {
height: auto;
//other codes...
}
.nav {
padding: 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
height: auto;
list-style: none;
border: 1px solid red;
}
.nav li {
padding-left: 8px;
padding-right: 8px;
}
<div class="navBar">
<ul class="nav dark-grey">
<li>Home</li>
<li>About</li>
<li>Support</li>
<li>Blog</li>
<li>Blog</li>
</ul>
</div>
Related
Here is my code:
.row {
width: 800px;
}
.menu {
display: inline-block;
display: flex;
list-style: none;
padding: 0;
}
li {
width: 100%;
}
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
I want the menu to fill the full width of the div. The distances are the same and the elements are to coincide with the edges of div test.
This is what it would look like:
Test
Best Regards and Thank You
justify-content is what you probably look for : see https://css-tricks.com/snippets/css/a-guide-to-flexbox/#justify-content
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line.
demo
.row {
width: 800px;
}
.menu {
display: flex;
list-style: none;
padding: 0;
justify-content:space-between;
}
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
.row {
width: 800px;
overflow-x: hidden;
}
.menu {
display: inline-block;
display: flex;
list-style: none;
width: 100%;
padding: 0;
}
li {
width: 100%;
text-align: center;
}
.test {
width: 100%;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
<div class="test">
<p> </p>
</div>
</div>
Try this😊
.menu {
display: inline-block;
display: flex;
list-style: none;
padding: 0;
width: 100%;
}
This should fix your problem
display: flex; and justify-content: space-between; get you there.
I also added:
* {
margin: 0;
padding: 0;
}
I also removed (commented):
li {
width: 100%;
}
to get rid of the default margin and padding on the body element.
* {
margin: 0;
padding: 0;
}
.row {
width: 800px;
}
.menu {
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
}
/*
li {
width: 100%;
}
*/
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
You need to configure your flex better. Here is a solution
* {
margin: 0;
padding: 0;
}
.row {
width: 800px;
}
.menu {
display: flex;
list-style: none;
padding: 0;
flex-direction: row;
flex-wrap: nowrap;
align-content: center;
align-items: stretch;
justify-content: space-between;
}
.test {
width: 800px;
background-color: red;
}
<div class="row">
<ul class="menu">
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
<li>Test6</li>
<li>Test7</li>
</ul>
</div>
<div class="test">
<p> </p>
</div>
I have a problem, I need to do, two navigation and one logo on left side. What I need you can see on image below
I need to do effectively and responsively, when the browser shrinks, gaps will gradually shrink until it jumps to the hamburger menu.
Below you see how I have it now, the picture I need but I do not know how to do it
.site-nav {
width: 100%;
height: 100px;
display: flex;
}
.site-nav .nav-logo {
width: 200px;
height: 100px;
float: left;
display: flex;
}
.site-nav .nav-logo img {
width: 97px;
height: 47px;
margin: auto 0;
}
.site-nav .nav-links {
height: 100px;
float: right;
flex-grow: 1;
}
.site-nav .nav-links ul {
list-style: none;
margin: 0;
padding: 0;
height: 100px;
display: flex;
}
.site-nav .nav-links ul li {
float: left;
margin: auto;
padding-left: 16px;
}
.site-nav .nav-links ul li:not(:last-child) {
padding-right: 16px;
}
<nav class="site-nav">
<div class="container">
<div class="nav-logo">
<img src="logo.png" alt="">
</div>
<div class="nav-links">
<ul class="nav-list">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</nav>
You can use nested flexboxes and media queries to get the desired result. I used dummy images for the logo and the hamburger.
ul {
list-style: none;
margin: 0;
}
.site-nav {
width: 100%;
}
.container {
display: flex;
justify-content: space-between;
align-items: center;
width: 80%;
margin: 0 auto;
}
.nav-links {
display: none;
}
.nav-links .nav-list {
display: flex;
flex-wrap: no-wrap;
}
.mobile-menu {
position: relative;
}
.mobile-menu .nav-list {
display: none;
position: absolute;
bottom: -90px;
left: -40px;
}
.mobile-menu:hover>.nav-list {
display: inline-block;
}
.nav-links .nav-list>li:not(:last-child) {
margin-right: 1rem;
}
#media screen and (min-width: 500px) {
.mobile-menu {
display: none;
}
.nav-links {
display: inline-block;
}
}
<nav class="site-nav">
<div class="container">
<div class="nav-logo">
<img src="https://via.placeholder.com/50x50" alt="">
</div>
<div class="mobile-menu">
<img src="https://via.placeholder.com/30x30" alt="">
<ul class="nav-list">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div class="nav-links">
<ul class="nav-list">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div class="nav-links">
<ul class="nav-list">
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</nav>
How about the following example. With css grid it's easy to specify columns. With extra properties like justify-content you can specify how the columns are spaced.
.site-nav {
width: 100%;
height: 100px;
}
.site-nav .container {
display: grid;
grid-template-columns: 200px 1fr 1fr;
}
.site-nav .nav-logo {
grid-column: 1;
width: 200px;
height: 100px;
float: left;
display: flex;
}
.site-nav .nav-logo img {
width: 97px;
height: 47px;
margin: auto 0;
}
.site-nav .nav-links {
grid-column: auto;
}
.site-nav {
list-style-type: none;
}
.site-nav li {
display: inline-block;
}
<nav class="site-nav">
<div class="container">
<div class="nav-logo">
<img src="https://cdn.pixabay.com/photo/2018/08/19/19/56/peacock-feathers-3617474_960_720.jpg" alt="">
</div>
<div class="nav-links">
<ul class="nav-list">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
<div class="nav-links">
<ul class="nav-list">
<li>Home</li>
<li>Home</li>
</ul>
</div>
</div>
</nav>
I'm trying to have the elements in the middle 1240px of the screen using a wrapper, however, when I add the wrapper, the .space <li> element stops shrinking when I shrink down the page making my sign in button and sign out button disappear in the right side of the page. Also I've been wondering whether using an empty <li> with flex: 1 is the correct way of creating the space in between the first 3 <li> elements and the last 2.
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 1240px;
margin: 0 auto;
height: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
You need to use percent to make it responsive.
Or, add max-width: 100%; if you want to maintain width: 1240px;
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 100%;
margin: 0 auto;
height: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
Use width: 100%; to nav and wrapper
.container {
display: flex;
}
.container>li {
padding: 10px;
text-align: center;
font-size: 1em;
color: white;
box-sizing: border-box;
background-color: black;
list-style-type: none;
}
.space {
flex: 1;
}
.wrapper {
width: 1240px;
margin: 0 auto;
height: 100%;
width: 100%;
}
nav{
width: 100%;
}
<nav>
<div class='wrapper'>
<ul class="container">
<li>Images</li>
<li>Albums</li>
<li>Tags</li>
<li class='space'></li>
<li>Log In</li>
<li>Sign Up</li>
</ul>
</div>
</nav>
The copyright info comes as next menu item, but I want it to come on the next row inside the footer as a centered text so tell me please how I can achive this. Please help. thanks in advance.
/* ----- FOOTER ----- */
.footer-nav{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
background-color: #333;
padding: 50px;
font-size: 80%;
}
.footer-nav li{
flex-grow: 100%;
}
<div class="wrapper">
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li><a href="#"blah</a></li>
<li>blah</li>
<p class = "copyright">aaa</p>
</ul>
</div>
Take out background color from your ulr tag and add it to .wrapper
Also remove the p tag from your ul list and place in outside the list but inside the wrapper
Apply a text-align:center to you p tag
remove padding-top and padding-bottom from your footer for a nice fitting
Snippet below
/* ----- FOOTER ----- */
p{
text-align:center;
}
.footer-nav{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
padding: 50px;
padding-top:0;
padding-bottom:0;
font-size: 80%;
}
.footer-nav li{
flex-grow: 100%;
}
.wrapper{
background-color: #333;
}
<div class="wrapper">
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li><a href="#"blah</a></li>
<li>blah</li>
</ul>
<p class = "copyright">aaa</p>
</div>
I, you should try using footer element and put <ul> inside and <p> outside of <ul> with a special class to center the text.
CSS :
.footer-nav{
display: flex;
flex-direction: row;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
padding: 50px;
font-size: 80%;
}
footer{
background-color: #333;
}
.copyright{
text-align: center;
color: white;
}
.footer-nav li{
flex-grow: 100%;
}
and HTML :
<div class="wrapper">
<footer>
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li><a href="#"</a>blah</li>
<li>blah</li>
</ul>
<p class="copyright">aaa</p>
</footer>
</div>
https://jsfiddle.net/nesquimo/u1pq6xvq/
A bunch of ways you could do it. If you want the copyright in your list, you need to wrap it in an li as only an li can be a child of a ul. Then just give that li a width: 100% or flex-basis: 100% and set the parent to flex-wrap: wrap
.footer-nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
text-align: center;
text-transform: uppercase;
background-color: #333;
padding: 50px 50px 25px;
font-size: 80%;
}
.footer-nav li {
flex-grow: 100%;
}
.copyright {
flex-basis: 100%;
margin-top: 25px;
}
<div class="wrapper">
<ul class="footer-nav">
<li>About Us</li>
<li>blah</li>
<li>blah</li>
<li>blah</li>
<li class="copyright"><p>aaa</p></li>
</ul>
</div>
I have a brand image in the center of the navbar and one menu on either side of it. I want to align both menus to the image (menu on the right side of the image is left aligned and vise versa). I managed this on the right menu but I can't align the menu on the left side.
What I have right now, looks good on large screens but does not condense properly on a smaller screen (on the left side, the right is correct).
CSS
.navbar{
background-color: white;
border: 0px;
height: 200px;
}
.navbar-middle {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin: auto;
}
.navbar-left {
padding-right: 10%;
padding-top: 90px;
width: 50%;
}
.navbar-right {
padding-left: 3%;
padding-top: 90px;
width: 50%;
}
.navbar-left li {
padding-left: 20%;
}
.navbar-right li {
padding-left: 15%;
}
HTML
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Our Vision</li>
<li>The Team</li>
</ul>
<ul class="nav navbar-middle">
<li><img src="200.jpg"></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Portfolio</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
Thanks for the help!
I think you are after something like this
ul{
list-style: none;
padding: 0;
}
.navbar{
background-color: white;
border: 0px;
height: 200px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-end;
}
.navbar-left {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-end;
}
.navbar-middle {
margin: 0 20px;
}
.navbar-right {
display: flex;
flex-wrap: nowrap;
justify-content: center;
align-items: flex-start;
}
.navbar-left li {
margin-left: 20px;
white-space:nowrap;
}
.navbar-right li {
margin-right: 20px;
white-space:nowrap;
}
<div class="navbar">
<ul class="nav navbar-nav navbar-left">
<li><a class="pull-right" href="#">Home</a></li>
<li>Our Vision</li>
<li>The Team</li>
</ul>
<img class="nav navbar-middle" src="https://placehold.it/200x100/894567/ffffff?text=Logo">
<ul class="nav navbar-nav navbar-right">
<li>Portfolio</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
From what I can see from inspecting the elements, your three ul seem to be overlapping.
So I changed the widths of the navbar-left and navbar-right classes to 45% each and added a width specification for the image, i.e. img src="200.jpg" size=10%.
From what I can tell, your left ul looked to be right-aligned not because of class="pull-right" but because of your .navbar-left li { padding-left: 20%; }. You can do the same for your navbar-right, i.e. .navbar-right li { padding-right: 20%; }.
This is the result: http://codepen.io/anon/pen/OMreKN. Not sure if it is what you're looking for.
Here's another option: JSFiddle
<div class="wrapper">
<ul class="nav navbar-nav navbar-left">
<li><a class="pull-right" href="#">Home</a></li>
<li>Our Vision</li>
<li>The Team</li>
</ul>
<ul class="nav navbar-middle">
<li><img src="200.jpg"></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Portfolio</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
body {
margin: 0;
}
.wrapper {
background-color: gray;
font-size: 0;
width: 100%;
height: 100px;
text-align: center;
}
img {
width: 100%;
}
.nav {
display: inline-block;
font-size: initial;
list-style: none;
padding: 0;
vertical-align: middle;
}
li {
display: inline-block;
width: 75px;
}
.navbar-left, .navbar-right {
width: 45%;
}
.navbar-middle {
width: 10%;
}