This question already has answers here:
How to Right-align flex item?
(13 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 1 year ago.
I want to move the NAV bar to the right and I am trying with the justify-content property, but it isn't working.
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
color: blanchedalmond;
}
.header {
background-color: lightskyblue;
width: 100%;
height: 80px;
}
.innerheader {
height: 100%;
width: 1200px;
margin: auto;
display: flex;
align-items: center;
}
.logo_nav h1 {
font-weight: 200;
}
.logo_nav h1 span {
font-weight: 900;
}
nav {
margin: 0 auto;
display: flex;
justify-content: flex-end;
}
ul {
display: flex;
padding: 0px 100px 0px 240px;
}
ul a li {
display: flex;
color: blanchedalmond;
font-size: 22px;
}
ul a {
padding: 0px 100px 0px 20px;
}
<header class="header">
<div class="innerheader">
<div class="logo_nav">
<h1>My <span>SITE</span></h1>
</div>
<nav class="nav">
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#">
<li>About</li>
</a>
<a href="#">
<li>Services</li>
</a>
<a href="#">
<li>Hire us</li>
</a>
</ul>
</nav>
</div>
</header>
Thanks in advance for your replies.
Related
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 10 months ago.
Essentially, after applying a margin, my text of different sizes all are above or below each other (they are in the same line) but they arent like centered, only when I make them all the same size do they look centered.
body {
background-color: lightgrey;
}
.logo {
font-size: 2.5rem;
}
.navbar {
/* color: white; */
display: flex;
justify-content: space-between;
width: 100%;
padding: 25px 40px;
color: white;
font-family: 'Open Sans', sans-serif;
}
.nav-options {
list-style: none;
}
.nav-options .nav-buttons li {
display: inline-block;
font-size: 1.5rem;
padding: 20px;
font-weight: bold;
}
.navbar a {
color: white;
font-size: 1.5rem;
}
.flex-row {
flex-flow: row wrap;
}
<div class="navbar">
<label class="logo">appy</label>
<div class="nav-options">
<ul class="nav-buttons">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Pricing</li>
<li>Features</li>
<li>FAQ</li>
<li>Blog</li>
<li>Contacts</li>
</ul>
</div>
<a class="sign-up">Sign Up</a>
</div>
try adding align-items: center; to css class .navbar.
.navbar{
/* color: white; */
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 25px 40px;
color: black;
font-family: 'Open Sans', sans-serif;
}
you can use
justify-content: center;
align-items: center;
then you can give some margin or padding to logo or sign up.
Y
This question already has answers here:
Does UL have default margin or padding [duplicate]
(2 answers)
Closed 1 year ago.
I was making a navbar using flexbox. By default, shouldn't the justify-content property be set to flex-start; ? But the content inside my container is not begining from the start.
Here's the output and code:
html,
body {
background-color: #ffeead;
margin: 10px;
}
ul {
list-style-type: none;
}
.container {
border: 5px solid #dff124;
display: flex;
justify-content: flex-start;
}
.container li {
padding: 10px;
text-align: center;
font-size: 2em;
color: #ffeead;
background-color: #96ceb4;
}
.search {
flex: 1;
}
<nav>
<ul class="container">
<li>Home</li>
<li>Profile</li>
<li class="search">
<input type="text" class="search-input" placeholder="Search">
</li>
<li>Logout</li>
</ul>
</nav>
That white-space is caused by the default padding of the <ul>. You can remove it by adding: ul { padding-left: 0; }
html,
body {
background-color: #ffeead;
margin: 10px;
}
ul {
list-style-type: none;
padding-left: 0;
}
.container {
border: 5px solid #dff124;
display: flex;
justify-content: flex-start;
}
.container li {
padding: 10px;
text-align: center;
font-size: 2em;
color: #ffeead;
background-color: #96ceb4;
}
.search {
flex: 1;
}
<nav>
<ul class="container">
<li>Home</li>
<li>Profile</li>
<li class="search">
<input type="text" class="search-input" placeholder="Search">
</li>
<li>Logout</li>
</ul>
</nav>
This question already has answers here:
How to center an unordered list?
(8 answers)
How can I center <ul> <li> into a div?
(16 answers)
Closed 2 years ago.
I have a list and css.
However the ul goes to the left. I have tried many things but it either stays inline and floats to the left or it goes to the center as I want it to, but then it's not inline, they stack on one another..how can I have both an centered ordered list and inline?
.navbar {
display: table;
margin: 0 auto;
width: 100%;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.navbar ul li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 12px 16px;
font-size: 25px;
text-decoration: none;
}
<div class="navbar">
<ul>
<li>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>
To center the navbar ul add text-align: center;
.navbar {
display: table;
margin: 0 auto;
width: 100%;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
text-align: center;
}
.navbar ul li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 12px 16px;
font-size: 25px;
text-decoration: none;
}
<div class="navbar">
<ul>
<li>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>
All you need is "text-align:center;" on your .navbar ul like below:
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
text-align: center;
}
<li> runs as a text element because of your css .navbar ul li { display: inline-block; }. therefor you can center it with text-align. In this case just add: .navbar { text-align: center; }
.navbar {
margin: 0 auto;
width: 100%;
text-align: center;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.navbar ul li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 12px 16px;
font-size: 25px;
text-decoration: none;
}
<div class="navbar">
<ul>
<li>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>
Just use display: flex; justify-content: center; for either <ul> tag or navbar div container.
.navbar {
display: table;
margin: 0 auto;
width: 100%;
}
.navbar ul {
display: flex;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
}
.navbar ul li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 12px 16px;
font-size: 25px;
text-decoration: none;
}
<div class="navbar">
<ul>
<li>The Stock</li>
<li>
<a> <img style="height: 50px; width: 50px" src="img/logo.svg" alt="logotype" /> </a>
</li>
<li>The Stock</li>
</ul>
</div>
Just change your .navbar class like this
.navbar {
display: flex;
justify-content: center;
}
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Closed 2 years ago.
I know that this is probably asked many times already. I just want to center all items of my navbar vertically. I tried to set vertical-align: center; in my headercss tag.
I probably miss something:
<header>
<nav class="navbar">
<div class="branding">
<img src="pic/branding.png" alt="branding">
</div>
<div class="navbar-links">
<ul>
<li>Login </li>
</ul>
</div>
<div class="searchbox-container">
<input class="searchbar" type="text" placeholder="Search...">
<button class="search-button" type="submit"><img src="pic/searchicon.png" height="25px" width="25px" alt="search"></button>
</div>
</nav>
</header>
css:
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body{
font-family: sans-serif;
}
/* Navbar stuff */
header{
background-color: #424242/*#80aaff*/;
height: 60px;
}
.navbar{
width: 80%;
margin: auto;
}
.branding{
float: left;
}
.navbar-links{
float: right;
}
.navbar-links ul{
list-style: none;
}
.navbar-links ul li a{
text-decoration: none;
text-transform: uppercase;
color: white;
}
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
body {
font-family: sans-serif;
}
/* Navbar stuff */
header {
background-color: #424242/*#80aaff*/
;
height: 60px;
display: flex;
align-items: center;
}
.navbar {
width: 80%;
margin: auto;
display: flex;
flex-flow: row nowrap;
align-items: center;
}
.branding {
margin-right:
}
.navbar-links {
margin-left: auto;
}
.navbar-links ul {
list-style: none;
}
.navbar-links ul li a {
text-decoration: none;
text-transform: uppercase;
color: white;
}
<header>
<nav class="navbar">
<div class="branding">
<img src="pic/branding.png" alt="branding">
</div>
<div class="navbar-links">
<ul>
<li>Login </li>
</ul>
<div>
<div class="searchbox-container">
<input class="searchbar" type="text" placeholder="Search...">
<button class="search-button" type="submit"><img src="pic/searchicon.png" height="25px" width="25px" alt="search"></button>
</div>
</div>
</div>
</nav>
</header>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 3 years ago.
I am building the top navigation of a page. To the left, I have a logo and directly beside it I have my primary navigation links. I have two buttons that I want to position all the way to the right of the page, but I can't figure out how to get them over there. When I am able to get the buttons to move at all, it's only about halfway through the page...which isn't correct.
The buttons should be all the way to the right, like on https://webflow.com/
Notes: I used flex center to vertically center my navigation items.
body {
font-family: 'Poppins', sans-serif;
}
.wrap {
margin: 0 auto;
width: 90%;
}
nav {
display: flex;
align-items: center;
height: 80px;
width: 1000px;
}
nav ul li {
display: inline;
list-style: none;
padding: 0 24px 0 24px;
}
nav a {
color: #353D49;
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
nav a:hover {
color: #247BFA;
}
<div class="wrap">
<nav>
<img src="img/logo.svg" />
<ul class="navItems">
<li>Overview</li>
<li>Features</li>
<li>Blog</li>
<li>Learn</li>
</ul>
<div class="actionButtons">
<button class="primary">Request a demo</button>
</div><!--actionButtons-->
</nav>
</div><!--wrap-->
.actionButtons {margin-left: auto}
or
nav {justify-content: space-between}
cheers :)
You can position the element to the right of the flex parent using margin-left: auto. You can do the same for vertical positioning with margin-top: auto.
body {
font-family: 'Poppins', sans-serif;
}
.wrap {
margin: 0 auto;
width: 90%;
}
nav {
display: flex;
align-items: center;
height: 80px;
width: 1000px;
}
nav ul li {
display: inline;
list-style: none;
padding: 0 24px 0 24px;
}
nav a {
color: #353D49;
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
nav a:hover {
color: #247BFA;
}
nav .actionButtons {
margin-left: auto;
}
<div class="wrap">
<nav>
<img src="img/logo.svg" />
<ul class="navItems">
<li>Overview</li>
<li>Features</li>
<li>Blog</li>
<li>Learn</li>
</ul>
<div class="actionButtons">
<button class="primary">Request a demo</button>
</div><!--actionButtons-->
</nav>
</div><!--wrap-->
Great case for margin-left: auto; though I would create a separate class. The goal is to make code reusable, so nesting it in your nav tag will make it unwieldy if you continue with this method throughout your project.
I created a separate class for .align-right and you can reuse this in other areas of your project , rather than being limited to .nav or applying it to all of your .actionButtons
body {
font-family: 'Poppins', sans-serif;
}
.wrap {
margin: 0 auto;
width: 90%;
}
nav {
display: flex;
align-items: center;
height: 80px;
width: 1000px;
}
nav ul li {
display: inline;
list-style: none;
padding: 0 24px 0 24px;
}
nav a {
color: #353D49;
font-size: 14px;
font-weight: 500;
text-decoration: none;
}
nav a:hover {
color: #247BFA;
}
.align-right {
margin-left: auto;
}
<div class="wrap">
<nav>
<img src="img/logo.svg" />
<ul class="navItems">
<li>Overview</li>
<li>Features</li>
<li>Blog</li>
<li>Learn</li>
</ul>
<div class="actionButtons align-right">
<button class="primary">Request a demo</button>
</div><!--actionButtons-->
</nav>
</div><!--wrap-->