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>
Related
I have a working code for flex in css. Although the buttons are realigning but the blue bars is not moving. Due to this changing the screen size make it seem that all the buttons have disappeared.
*
{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body
{
background-image: url(background.jpg);
background-size: cover;
background-position : center;
font-family: sans-serif;
}
.menu-bar
{
background: #273044;
text-align: center;
height:30px;
}
.menu-bar ul
{
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li
{
width: 120px;
place-items:center;
display: grid;
padding: 5px;
}
.menu-bar ul li a
{
text-decoration: none;
color: white;
}
.active, .menu-bar ul li:hover
{
background-color: #0b56ab;
height:auto;
height:30px;
}
.toggle-button{
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar{
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media(max-width: 700px){
.toggle-button{
display:flex;
}
.menu-bar-links{
/* display:none; */
width:100%;
}
.menu-bar{
flex-direction: column;
align-items: flexstart;
}
.menu-bar-links ul{
width:100%;
flex-direction: column;
}
.menu-bar-links li{
text-align: center;
}
}
/* body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;} */
This is my HTML Code:
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<!----header---->
<body>
<div class="menu-bar">
<a href = "#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="menu-bar-links">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
</div>
<!-- <div class= "grid">
</div> -->
</body>
</html>
This is how it looks when in full screen:
When i rearrange the screen it looks like this:
As you can see all the buttons seems to have disappeared except the one which is hovered over
It is also not centering even with
.menu-bar-links li{
text-align: center;
The problem you have is that you have a fixed height on your .menu-bar, namely height: 30px. You're better off removing that, adding some padding for presentation and making the .menu-bar element a flex container.
Link to CodePen:
https://codepen.io/thechewy/pen/QWQQMjg
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.menu-bar {
background: #273044;
text-align: center;
/* height: 30px; */
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
.menu-bar ul {
display: inline-flex;
list-style: none;
color: #fff;
}
.menu-bar ul li {
width: 120px;
place-items: center;
display: grid;
padding: 5px;
}
.menu-bar ul li a {
text-decoration: none;
color: white;
}
.active,
.menu-bar ul li:hover {
background-color: #0b56ab;
height: auto;
height: 30px;
}
.toggle-button {
position: absolute;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 31px;
height: 21px;
}
.toggle-button .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
#media (max-width: 700px) {
.toggle-button {
display: flex;
}
.menu-bar-links {
/* display:none; */
width: 100%;
}
.menu-bar {
flex-direction: column;
align-items: flexstart;
}
.menu-bar-links ul {
width: 100%;
flex-direction: column;
}
.menu-bar-links li {
text-align: center;
}
}
<html>
<head>
<title> Title of page </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet1" href="https://cdn.jsdelivr.net/npm/#fortawesome/fontawesome-free#6.1.1/css/fontawesome.min.css">
</head>
<body>
<div class="menu-bar">
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="menu-bar-links">
<ul>
<li class="active">Home</li>
<li>About us</li>
<li>Services</li>
<li>Investors</li>
<li>Pricing</li>
<li>Training </li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
I am trying to get the links on the navbar to take full width and NOT take any of the area of the background image placed on the following section when the page is displayed on a smaller viewport #media (max-width: 900px).
Why is the hamburger menu icon not displaying?
I am trying to get navmenu items stacked and then a background image to display in full on a smaller viewport.
header {
position: fixed;
z-index: 100;
width: 100%;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--secondary-dark);
color: var(--main-white);
padding: 5px 30px;
height: 90px;
}
.logo {
font-size: var(--fs-600);
margin: 0.5rem;
text-decoration: none;
font-family: var(--ff-nav);
font-weight: var(--fw-400);
letter-spacing: 1px;
}
.navbar-items ul {
margin: 0;
padding: 0;
display: flex;
}
.navbar-items li a {
text-decoration: none;
color: var(--main-white);
padding: 1rem;
display: block;
}
.navbar-items li:hover a {
color: var(--blue-primary);
}
.toggle-button a {
position: absolute;
top: 0.75rem;
right: 1rem;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
.toggle-button a .bar {
height: 3px;
width: 100%;
background-color: var(--main-white);
border-radius: 10px;
}
#media (max-width: 900px) {
.toggle-button {
display: flex;
}
.navbar-items {
/* display: none; */
width: 100%;
background-color: var(--secondary-dark);
}
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar-items ul {
flex-direction: column;
width: 100%;
}
.navbar-items li {
text-align: center;
}
.navbar-items li a {
padding: .5rem 1rem;
width: 100;
}
.navbar-items.active {
display: flex;
}
}
/* //////////////////////
Main
/////////////////////// */
.welcome {
position: relative;
outline: 2px solid red;
padding-top: 70px;
height: 700px;
background-image: url("/img/background.png");
background-position: center;
background-size: cover;
}
.welcome p {
position: absolute;
display: block;
bottom: 0;
right: 0;
margin: 20px 50px;
font-size: 3em;
color: var(--clr-section-background);
letter-spacing: 0.5px;
}
<header>
<nav class="navbar">
<div class="logo">
<span>Brand</span>
</div>
<div>
<a href="#">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
</div>
<div class="navbar-items">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>
Blog
</li>
<li>Newsletter</li>
</ul>
</div>
</nav>
</header>
<!--mission statement------------------------------------------>
<section class="welcome">
<div>
<p>#OnPoint</p>
</div>
</section>
Problem resolved, I just needed to add a z-index on navbar and remove padding on ul in order to have the hamburger menu displaying on full width on smaller viewports.
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 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.
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);
}