I want to have a menu that has a logo at left and the menu items at right, Im using flexbox for this but its not working. The menu items are stick to the logo. Do you know where is the issue?
This is the html:
<div class="container">
<header class="Header content">
<h1 class="title">LOGO</h1>
<ul class="main_nav">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div class="clear"></div>
</header>
</div>
example: https://jsfiddle.net/adwkkvt6/
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
margin:0;
padding: 0;
}
.container {
float: left;
width: 100%;
}
.content {
width: 94%;
margin: 0 auto;
}
.Header, .main_nav{
display: flex;
}
.title a{
color:green;
font-size: 0.85em;
}
.main_nav li{
padding: 0 15px;
}
.main_nav{
background-color: red;
justify-content: space-between;
align-items: center;
}
.main_nav a{
font-weight: 700;
font-size: 0.85em;
color:gray;
}
Add this
.title{
flex:1 0 0;
}
title is a child so you have to give space to how mach occupy the parent div so use flex:1 0 0 to get space for logo.
flex:1 0 0 is -
flex-grow:1;
flex-shrink:0;
flex-basis:0;
More info about flex visit.
Updated fiddle link
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
float: left;
width: 100%;
}
.content {
width: 94%;
margin: 0 auto;
}
.Header,
.main_nav {
display: flex;
}
.title {
flex: 1 0 0;
}
.title a {
color: green;
font-size: 0.85em;
}
.main_nav li {
padding: 0 15px;
}
.main_nav {
background-color: red;
justify-content: space-between;
align-items: center;
}
.main_nav a {
font-weight: 700;
font-size: 0.85em;
color: gray;
}
<div class="container">
<header class="Header content">
<h1 class="title">LOGO</h1>
<ul class="main_nav">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div class="clear"></div>
</header>
</div>
If you remove the <div class="clear"></div>, you can use justify-content: space-between like that
.Header, .main_nav{
display: flex;
justify-content: space-between;
}
You have to specify the positioning of the flexbox items:
.Header, .main_nav{
display: flex;
justify-content: space-between;
}
the default value of justify-content is flex-start which pushes each item to the left of the flexbox.
Related
In my header, I'm trying to put my name in the middle item below the first item "brush up". I've tried justify-content and align-items and just can't get it to move. I also want the navigation to stay on the right side. New to flexbox thank you for any help.
.container {
display: flex;
margin: 0 auto;
max-width: 960px;
flex-direction: column;
}
/* HEADER SECTION***************************************/
header {
width: 100%;
height: 8vh;
display: flex;
flex-direction: row;
outline: 1px solid red;
}
header * {
margin: 0;
padding: 0;
display: block;
}
header h1 {
outline: 1px solid red;
height: 50px;
flex: 3;
}
header p {
flex: 2;
outline: 1px solid red;
height: 25px;
align-items: baseline;
}
header ul {
flex: 1;
justify-content: flex-end;
outline: 1px solid red;
list-style-type: none;
}
header ul li {
margin: 0 0.5em;
}
<header>
<h1>Brushing up</h1>
<p>by Keller Johnson</p>
<ul>
<li>home</li>
<li>project 1</li>
<li>project 2</li>
</ul>
</header>
Are you looking for this?
header {
width: 100%;
display: flex;
}
header, header > * {
outline: 1px solid red;
}
header > div {
flex-grow: 1;
}
header > ul {
flex: 0 0 200px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
list-style-type: none;
}
header * {
margin: 0;
padding: 0;
}
header h1 {
height: 50px;
}
header p {
outline: 1px solid red;
height: 25px;
}
header ul li {
margin: 0 0.5em;
}
<header>
<div>
<h1>Brushing up</h1>
<p>by Keller Johnson</p>
</div>
<ul>
<li>home</li>
<li>project 1</li>
<li>project 2</li>
</ul>
</header>
If this is not the result you want, consider explaining more clearly exactly what you're trying to achieve. Since we're talking about styling, a picture would help.
I have to create button animation like below:
https://media.giphy.com/media/YLgJHbH1u916XSo3JD/giphy.gif
I did it with "transition" but now can't implement that solution to my website.
my button animation solution: http://jsfiddle.net/guhqcxzt/
My website part where I wanna implement it on 'li' tags. (html and scss)
<nav class="left-side">
<ul class="navigations">
<li>ABOUT US</li>
<li>HOTEL</li>
<li>CONTACT US</li>
</ul>
<div class="rights">© 2021 All rights reserved.</div>
</nav>
nav,
.left-side {
#include flex(space-between, center, column);
min-height: 90vh;
background: $color-grey-dark-1;
padding: 5rem 0 3rem 0;
width: 18%;
color: $color-grey-light-1;
}
.navigations {
width: 100%;
li {
list-style: none;
a {
text-decoration: none;
color: $color-grey-light-1;
display: block;
padding: 2rem 0;
margin: 0.5rem 0;
padding-left: 30%;
font-size: 2.5rem;
}
}
}
a:hover {
background: $color-primary-light;
}
try this :
add transition in <a> tag
navigations {
width: 100%;
li {
list-style: none;
a {
text-decoration: none;
color: $color-grey-light-1;
display: block;
padding: 2rem 0;
margin: 0.5rem 0;
padding-left: 30%;
font-size: 2.5rem;
transition:0.5s;
}
}
}
a:hover {
background: $color-primary-light;
}
do you want this one?
try this code :
nav,.left-side
{
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
min-height: 90vh;
background: black;
padding: 4rem 0 3rem 0;
width:300px;
color: grey;
}
.navigations
{
width: 100%;
}
li
{
position:relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 100%;
height: 100px;
}
li::before
{
content:'';
position:absolute;
width:0%;
height:70px;
background:red;
left:-20px;
transition:0.5s;
}
li:hover::before
{
width:100%;
}
a
{
position:relative;
color: grey;
margin: 0.5rem 0;
width:92.4%;
text-decoration:none;
}
.rights {
font-size: 1.5rem;
}
<nav class="left-side">
<ul class="navigations">
<li >ABOUT US</li>
<li> HOTE </li>
<li>CONTACT US</li>
</ul>
<div class="rights">© 2021 All rights reserved.</div>
</nav>
I'm using CSS flexbox to create a vertical centered navigation:
#main-nav {
display: flex;
height: 400px;
width: 50%;
background: #ccc;
align-items: center;
padding: 50px;
ul {
list-style: none;
padding: 0;
margin: 0;
}
}
The child elements should stay among themselves. For now the elements are vertical centered but they stay next to each other. Is there a fancy solution or some workaround for doing that? Notice that the flex-direction is set to row.
The result should look like this:
RESULT
Check it out:
#main-nav {
display: flex;
height: 400px;
width: 50%;
background: #ccc;
align-items: center;
padding: 50px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
<nav id="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
<div class="contact-info">
Lorem Ipsum
</div>
</nav>
https://jsfiddle.net/4d58xrz8/
If I understood, flex-direction is what you need, and replace align-items by justify-content, because the direction changes.
Edit you css like this to obtain your result :
#main-nav {
display: flex;
height: 400px;
width: 50%;
background: #ccc;
justify-content: center;
flex-direction:column;
padding: 50px;
ul {
list-style: none;
padding: 0;
margin: 0;
}
}
Add flex-direction:column; to your #main-nav
#main-nav {
display: flex;
height: 400px;
width: 50%;
background: #ccc;
flex-direction:column;
align-items: left;
padding: 50px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
<nav id="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
<div class="contact-info">
Lorem Ipsum
</div>
</nav>
Whenever I apply flexbox stretch or width 100% to the li items they get pushed to a flex start position at the left side of the page instead of centered.
body {
margin: 0;
}
ul,
li,
a {
text-decoration: none;
list-style-type: none;
padding: 0;
}
.site-wrapper {
min-height: 100vh;
}
.main-header,
.main-nav {
display: flex;
}
.main-nav {
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
}
.main-nav li {
margin-bottom: 5%;
}
.mobile-nav-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.toggle-mobile-nav {
border: 1px solid black;
height: 30px;
width: 30px;
align-self: center;
margin-right: 2.5%;
border-radius: 10%;
padding: 1%;
}
.toggle-mobile-nav:hover {
cursor: pointer;
}
#logo {
margin-left: 20%;
cursor: pointer;
}
.fa-lg {
margin-top: .15em;
font-size: 1.9em;
margin-left: .05em;
}
.intro {
display: flex;
flex-direction: column;
padding-left: 2.5%;
padding-right: 2.5%;
align-items: center;
background-color: #38A5DB;
}
.intro h1 {
padding-top: 10%;
}
.intro h3 {
padding-bottom: 5%;
}
.intro-image {
max-width: 100%;
}
<div class="site-wrapper">
<div class="mobile-nav-wrapper">
<li>
<h1 id='logo'>JP</h1>
</li>
<div class="toggle-mobile-nav">
<i class="fa fa-bars fa-lg"></i>
</div>
</div>
<header class="main-header">
<!-- Main Header Start -->
<ul class="main-nav">
<li>About Me
</li>
<li>My Work
</li>
<li>Playground
</li>
<li>Contact Me
</li>
</ul>
</header>
<!-- Main Header end -->
The align-items:center is causing the li to shrink wrap instead of stretching (which is the default).
So remove it and use text-align:center on the li.
ul,
li,
a {
text-decoration: none;
list-style-type: none;
padding: 0;
}
.main-header,
.main-nav {
display: flex;
}
.main-nav {
flex-direction: column;
justify-content: space-between;
width: 100%;
}
.main-nav li {
margin-bottom: 5%;
background: lightgreen;
text-align: center;
}
.main-nav li a {
display: block;
}
<ul class="main-nav">
<li>About Me
</li>
<li>My Work
</li>
<li>Playground
</li>
<li>Contact Me
</li>
</ul>
I am trying to center the outer 'div' container using Flexbox. I have an unordered list with 3 li's. The li's width is: width: calc(100%/3). The ul's width is 70%. The problem is that when I try centering the ul (justify-content: center), it doesn't get centered.
I finally figured out the source of the problem. When I remove the line: width: calc(100%/3), it centers properly. My question is: How can I get it to center properly?
I tried margin: auto, but that didn't work.
Here's the JSFiddle, and here's the code snippet:
#flex-container {
width: 70%;
list-style-type: none;
padding: 0;
margin: 0;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-justify-content: center;
justify-content: center;
}
li {
box-sizing: border-box;
background-color: tomato;
width: calc(100%/3);
}
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
When I remove the line: width: calc(100%/3), it centers properly
You should not calculate the width when you are using flex layout, because that is what flex is itself supposed to do.
If you are looking to align the text inside of the lis then text-align is what you need. You should also remove the width from the lis and use the flex property instead.
Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
#flex-container {
list-style-type: none;
width: 70%; display: flex;
}
li {
flex: 1 1 auto;
background-color: tomato; border: 1px solid #fff;
text-align: center;
}
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
If you are looking to have variable width lis then justify-content is what you need. You should control the width via the width property and use flex property as required to expand or shrink.
Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
#flex-container {
list-style-type: none; width: 70%;
display: flex; justify-content: center;
background-color: #eee;
}
li {
flex: 0 0 auto; width: 15%;
background-color: tomato; border: 1px solid #fff;
}
li:first-child { width: 20%; }
li:last-child { width: 30%; }
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
I modified your code:
http://jsfiddle.net/hrr65ajr/2/
#flex-container {
width: 70%;
list-style-type: none;
padding: 0;
margin: 0;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-justify-content: center;
justify-content: center;
}
li {
box-sizing: border-box;
background-color: tomato;
margin: auto;
width: calc(100%/3);
text-align: center;
}
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
Try this:
HTML
<div class="center">
<ul id="flex-container">
<li class="flex-item">First</li>
<li class="flex-item">Second</li>
<li class="flex-item">Third</li>
</ul>
</div>
CSS
.center {
display:flex;
-webkit-justify-content: center;
justify-content: center;
}
#flex-container {
width: 70%;
list-style-type: none;
padding: 0;
margin: auto 0;
display: -webkit-inline-flex;
display: inline-flex;
-webkit-justify-content: center;
justify-content: center;
}
li {
box-sizing: border-box;
background-color: tomato;
width: calc(100%/3);
}