I have a flexbox container (ul) that is intermittently centering (this is intended) and not (upon view refresh). Is this a bug or is there something missing from the css?
Live example on the jsFiddle.
HTML:
<div id="lower-half">
<nav>
<ul>
<li>
Menu
</li>
<li>
Catering
</li>
<li>
Gallery
</li>
<li>
About
</li>
</ul>
</nav>
CSS:
nav ul{
display: flex;
height: 100%;
margin: 0 auto;
justify-content: center;
flex-wrap: wrap;
list-style: none;
border: 3px solid;
border-radius: 20px;
width: 360px;
background-color: white;
}
nav ul li {
align-self: center;
flex-grow: 1;
}
It sounds like a weird issue - Is it browser-related? I just tried pasting your code into a Pen and this does indeed center the nav.
However, to perhaps solve your issue, I've changed your CSS a bit, without it affecting your design and positioning - This may perhaps solve your refresh-issue.
Updated Pen
HTML
<nav>
<ul>
<li>
Menu
</li>
<li>
Catering
</li>
<li>
Gallery
</li>
<li>
About
</li>
</ul>
</nav>
CSS
nav {
display: flex;
justify-content: center;
}
nav ul{
display: flex;
flex-wrap: wrap;
width: 360px;
list-style: none;
border: 3px solid;
border-radius: 20px;
background-color: white;
}
nav ul li {
flex-grow: 1;
}
Related
I have a nav bar list with links, the last item is a button. I displayed them using flex box but when its rendered the button text is not flush/even against the top so it will display uneven.
Here's a photo:
As you can see the FOO BAR is not even with the items to the left.
Here's the html:
<nav className={styles.PrivateHeaderNav}>
<ul>
<li>
<h5>LOGO HERE</h5>
</li>
<li>
<NavLink activeClassName={styles.NavLink__active} to="/profile">
FOO
</NavLink>
</li>
<li>
<NavLink activeClassName={styles.NavLink__active} to="/game_groups">
FOO
</NavLink>
</li>
<li>
<NavLink activeClassName={styles.NavLink__active} to="/feed">
FOO
</NavLink>
</li>
<li>
<button type="button" onClick={() => logOutCurrentUser()}>
FOO BAR
</button>
</li>
</ul>
</nav>
Here's the css:
.PrivateHeaderNav {
background-color: #252334;
color: #ff7376;
font-size: 20px;
ul {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 0.5em 0.1em;
li {
a {
text-decoration: none;
&:visited {
color: #ff7376;
}
&.NavLink__active {
color: #ffe880;
}
}
button {
padding: 0px;
white-space: normal;
background: transparent;
border: none;
color: inherit;
font-size: inherit;
}
}
}
}
Here's a photo with a border so I can see it clearly.
Is there a inner padding btn something on css that I can use to remove the padding? or margin? I don't even know if there's such a thing.
.privateHeaderNav {
background-color: #252334;
color: #ff7376;
font-size: 20px;
}
.privateHeaderNav ul {
/* Changing justify-content: space-around to make beautiful auto spacing between the li, in this case no need for the left-right padding (Check #media below), and finally align items to fit perfectly centered*/
display: flex;
flex-direction: row;
justify-content: space-around; /*Changed*/
padding: 0.5em 0; /*Changed*/
align-items: center; /*Added*/
}
.privateHeaderNav ul li a {
text-decoration: none;
}
.privateHeaderNav ul li a:visited {
color: #ff7376;
}
.privateHeaderNav ul li a.NavLink__active {
color: #ffe880;
}
.privateHeaderNav ul li button {
/*Align center the button content to match the a tag(links) */
padding: 0px;
white-space: normal;
background: transparent;
border: none;
color: inherit;
font-size: inherit;
display: flex; /*Added*/
justify-content: center; /*Added*/
align-items: center; /*Added*/
}
/*Add #media to remove the beautiful space we added between the li, basicly we're stretching the list 100%*/
#media(max-width:576px){
.privateHeaderNav ul {
justify-content: space-between;
}
/*Since we removed the space, we have to add padding left-right we removed previously*/
.privateHeaderNav ul {
padding: 0.5em 0.3em;
}
}
<header>
<nav class="privateHeaderNav">
<ul>
<li>
<h5>LOGO HERE</h5>
</li>
<li>
FOO
</li>
<li>
FOO
</li>
<li>
FOO
</li>
<li>
<button type="button">
FOO BAR
</button>
</li>
</ul>
</nav>
</header>
Give 'ul' a align-items: flex-start
Here is my code https://jsfiddle.net/n4qpv91t/4/
HTML
<nav class="m-nav-main">
<ul class="m-nav-main__menu">
<li class="m-nav-main__item">
PLATFORM OF JOYSSS SAMPLETEXT
</li>
<li class="m-nav-main__item">
LOREM DIMTURAGUA
</li>
<li class="m-nav-main__item">
WORDS
</li>
<li class="m-nav-main__item">
OFFRES SPECIALS OF WORLD
</li>
<li class="m-nav-main__item">
LEARN FROM HOME
</li>
</ul>
</nav>
CSS
.m-nav-main {
width: 1000px;
}
.m-nav-main__menu {
list-style: none;
display: inline-flex;
justify-content: flex-end;
padding: 0;
margin: 0;
}
.m-nav-main__item {
display: inline-block;
border: solid 1px red;
}
.m-nav-main__link {
display: flex;
height: 50px;
padding: 0 1rem;
color: inherit;
border: solid 1px green;
align-items: center;
}
I have menu with text that breaks to 2nd line. Flexbox desnt get proper width of this text resulting in big empty spaces between text. I want those menu items to be as narrow as possible. I use flex on links to have centered vertically text. Changing it to inline or anything doesnt make a change.
Try adding flex: 1; to .m-nav-main__item.
I am currently working on building my photography portfolio site.
I try to position my navbar under my logo, but I can't match the navbar to the size and the postion of the logo.
any idea how can I position my nav using CSS?
Thanks
Quick fix. Hero is de flexbox
header {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.logo,
nav {
width: inherit;
text-align: center;
}
ul {
list-style: none;
width: inherit;
display: flex;
justify-content: space-between;
}
<header>
<div class="logo"><img src="https://via.placeholder.com/300x100"></div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
What I'm trying to achieve:
I tried using a nested unordered list but found it difficult to set 2 buttons to the left and 2 buttons to the right, I am now trying something a little different but still no success, also I want the distance between these button to stay constant when viewed on different sized displays. Any help would be greatly appreciated.
(If anyone is familiar with xml you'll know that that its possible to give things a weight. so say you have 3 items in a box and you give them all a weight of 1 each items would take up a third of the space in the box, is there anything like this in html?)
This is what I have so far.
#navContainer nav {
display: inline-block;
}
#nav1 {
background: aqua;
position: absolute;
left: 0;
}
#nav2 {
background: pink;
position: absolute;
right: 0;
}
<div id="navContainer">
<nav id="nav1">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
</div>
How about a flexbox approach, then you only need one list
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
width: 100%;
justify-content: space-between; /* spreads things across the horizontal line */
}
.signin {
margin-left: auto; /* moves this to the right */
margin-right: 10px; /* gap between signin and signup */
}
.help {
margin-right: auto; /* don't need this really */
margin-left: 10px; /* gap between highscores and help */
}
<nav id="nav1">
<ul>
<li class="highscores">Highscores</li>
<li class="help">Help</li>
<li class="signin">Signin</li>
<li class="signup">Signup</li>
</ul>
</nav>
you can use flexbox,
just using 1 ul removing extra markup unnecessary
ul {
display: flex;
justify-content: space-between;
align-items: flex-end;
background: lightblue;
height: 160px;
margin: 0;
padding: 0;
}
li {
background: purple;
border-radius: 10px;
padding: 10px;
margin: 0 10px;
list-style: none;
color: white
}
li:nth-last-of-type(2) {
margin-left: auto
}
<ul>
<li>Highscores</li>
<li>Help</li>
<li>Signin</li>
<li>Signup</li>
</ul>
just using 1 nav and 2 ul if you want to keep the container at a minimal state
nav{
display: flex;
justify-content: space-between;
align-items: flex-end;
height: 160px;
background: lightblue
}
ul:last-of-type {
margin-left: auto
}
ul {
display: flex;
margin: 0;
padding: 0;
}
li {
background: purple;
border-radius: 10px;
padding: 10px;
margin: 0 10px;
list-style: none;
color: white
}
<nav id="navContainer">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
You can do it with the Flexbox:
* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}
ul {
list-style: none;
display: flex;
}
ul > li {
margin: 5px;
padding: 5px 0;
width: 125px;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px #000;
font-weight: bold;
text-transform: uppercase;
border-radius: 25px;
background: purple;
}
#navContainer {
display: flex;
justify-content: space-between;
}
<div id="navContainer">
<nav id="nav1">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
</div>
I don't understand ur question completely, but I think this might be your solution:
<html>
<head>
<title>Project</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="CSS/pageFormatting.css">
<style>
#navContainer nav {
display: inline-block;
}
li {display:inline;margin:20px;}
#nav1 {
background-color: aqua;
position: absolute;
left: 0;
display:inline-block;
}
#nav2 {
background-color: pink;
position: absolute;
right: 0;
display:inline-block;
}
</style>
</head>
<body>
<div id="navContainer">
<nav id="nav1">
<ul>
<li>Highscores</li>
<li>Help</li>
</ul>
</nav>
<nav id="nav2">
<ul>
<li>Signin</li>
<li>Signup</li>
</ul>
</nav>
</div>
</body>
</html>
I added tags and the head and body tags. Within those style tags I wrote the css. nav1 is now left en nav2 is now right.
Tell me if I'm wrong.
On this page, I have a footer menu #menu-footer-menu; "About - Select Your City - How Walks Work..." generated by Wordpress.
<div class="menu-footer-menu-container">
<ul id="menu-footer-menu" class="menu">
<li id="menu-item-143">About</li>
<li id="menu-item-151">Select Your City</li>
<li id="menu-item-162">How Walks Work</li>
<li id="menu-item-160">FAQs</li>
<li id="menu-item-166">Blog</li>
<li id="menu-item-153">Partners</li>
<li id="menu-item-154">Press</li>
<li id="menu-item-144">Privacy Policy</li>
<li id="menu-item-145">Site Map</li>
<li id="menu-item-146">Terms & Conditions</li>
</ul>
</div>
I want to center this menu.
I tried the following CSS but it didn't work:
div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: inline-block !important;
}
ul#menu-footer-menu li {
display: inline-block !important;
margin-right: 14px;
margin-right: 1rem;
}
Use following css instead of what you have.
I just changed display for ul#menu-footer-menu.menu to block nothing else.
div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: block !important;
}
ul#menu-footer-menu li {
display: inline-block !important;
margin-right: 14px;
margin-right: 1rem;
}
You need to add one wrapper element with a width of 100% to center your div in.
Like:
<div class="wrapper">
<div class="menu-footer-menu-container">
...
</div>
.wrapper{ width:100% }
Use display:block instead of inline-block
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: block !important;
}
Try to add CSS Style :
.menu-footer-menu-container
{
text-align: center;
}
You have two ways to do it
width degradation center tag
<center>
<ul>
...
</ul>
</center>
Create another div to force the center
.center { margin: auto; text-align: center; }
<div class="center">
<ul>
...
</ul>
</div>
Note: The tag must be inline-block.
width text-align:center;
ul{ text-align: center; }
<center>
<ul>
...
</ul>
</center>
Add one more style text-align:center to #footer-menu in css.