I want the logo and nav links centered horizontally. There is too much space on the right side. What is the best way to fix this?
Tried inline-block on the nav element. Tried text-align instead of align-items.
I expect the content to be centered with even space on both sides, but the right side has more spacing.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: black;
font-family: 'Poppins', sans-serif;
}
.logo {
color: white;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
.nav-links li {
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<header>
<nav>
<div class="logo">
<h4>Great Falls</h4>
</div>
<ul class="nav-links">
<li><a href="#">Home</li>
<li><a href="#">Plan Your Visit</li>
<li><a href="#">Learn More</li>
<li><a href="#">Contact</li>
</ul>
</nav>
</header>
your have this in your css code:
nav {
display: flex;
justify-content: space-around;
align-items: center;
}
By default, flex-direction is set to row. Therefore justify-content is horizontal and align-items vertical. In this piece of CSS, you center all children vertically, but put equal spacing around the children horizontally.
You should set justify-content to center in order to align items centered on a row direction.
nav {
display: flex;
flex-direction: row;
justify-content: space-between;
}
should work
also here is a code pen https://codepen.io/anon/pen/mYvVgL?editors=1100
Related
I wanna to put a logo in the left of the navigation.
The links are set to justify-content: flex-end;
I tried to make a div element and make it important with !important property.
.navbar {
background-color: #242931;
top: 0%;
text-align: center;
justify-content: flex-end;
display: flex;
}
.left-nav {
justify-content: flex-start !important;
display: flex !important;
}
.navbar a {
color: #b7c2d0;
font-family: cubano;
font-size: 1.15rem;
text-decoration: none;
margin-right: 15px;
margin-left: 15px;
padding: 24px;
}
.navbar a:hover {
-webkit-background-clip: text;
background-image: linear-gradient(to right, #ff6e00, #ff9400, #ffb900, #f8dc00, #e9ff00);
background-clip: text;
color: transparent;
}
<div class="navbar">
<div class="left-nav">
example
</div>
Guides
Clips
Leaderborard
Support the server
Help
Rules
</div>
You don't need any div
simply assign margin-right: auto
to the first a (logo)
.navbar {
display: flex;
gap: 2em;
}
.navbar a:first-child {
margin-right: auto;
}
<div class="navbar">
LOGO
two
three
</div>
If you want to separate those two groups, wrap the actual navigation into a <nav> tag (and for better SEO), and use instead a margin-left: auto on it. The principle is the same:
.navbar {
display: flex;
}
.navbar nav {
display: flex;
gap: 2em;
margin-left: auto;
}
<div class="navbar">
LOGO
<nav>
two
three
</nav>
</div>
Nest the right-nav in a div also. Then you can use justify-content: space-between; which will space out the two divs. Then you can add align-items: center; to make them align.
.navbar {
background-color: #242931;
top: 0%;
text-align: center;
justify-content: space-between;
display: flex;
align-items: center;
}
.left-nav {
justify-content: flex-start !important;
display: flex !important;
}
.navbar a {
color: #b7c2d0;
font-family: cubano;
font-size: 1.15rem;
text-decoration: none;
margin-right: 15px;
margin-left: 15px;
padding: 24px;
}
.navbar a:hover {
-webkit-background-clip: text;
background-image: linear-gradient(to right, #ff6e00, #ff9400, #ffb900, #f8dc00, #e9ff00);
background-clip: text;
color: transparent;
}
<div class="navbar">
<div class="left-nav">
example
</div>
<div class="right-nav">
Guides
Clips
Leaderborard
Support the server
Help
Rules
</div>
</div>
This question already has answers here:
Align 3 unequal blocks left, center and right
(4 answers)
Closed 2 years ago.
I'm trying to center the title of the navbar in the middle of the screen. Is there a way to do this without custom margin/padding values (trying to keep it responsive)?
In the image below, I want to center "Title text goes here" in the middle of the screen.
<header>
<nav class="nav">
<img class="nav-logo" src="./jumbotron.jpg" alt="logo">
<h1 class="nav-title">Title text goes here</h1>
<ul class="nav-links">
<li class="nav-link">nav link 1</li>
<li class="nav-link">nav link 2</li>
<li class="nav-link">nav link 3</li>
</ul>
</nav>
</header>
/*****************************************************************************/
/* Navbar */
/*****************************************************************************/
.nav {
display: flex;
flex-direction: row;
justify-content: center;
background-color: white;
}
.nav-logo {
width: 10%;
}
.nav-title {
flex: 1;
margin: auto 0;
text-align: center;
font-size: 30px;
}
.nav-links {
flex: 0.5;
display: flex;
width: 100%;
padding: 20px;
justify-content: flex-end;
list-style: none;
}
You can achieve this with flexbox. By setting align-items to stretch on the header and flex-grow to 1 on the title, the title will expand to cover whatever space is unoccupied by the logo and the links. Then, text-align:center will center your title's text:
.nav {
display: flex;
flex-direction: row;
align-items: stretch
background-color: white;
}
.nav-logo {
width: 10%;
}
.nav-title {
flex-grow: 1;
margin: auto 0;
text-align: center;
font-size: 30px;
text-align: center;
}
.nav-links {
display: flex;
width: 100%;
padding: 20px;
justify-content: flex-end;
list-style: none;
}
I am making making a full-bleed cover where I want 100% of the viewport on load to have an image, and then I want the header text to be centered.
I used flexbox to do this, the problem is, I also want the navbar in the full-bleed.
I get whitespace when I nest the nav in the header, but if I keep it in, I can't use flex-box to position my header
My last solution was to use absolute positioning and move it over a bit.. which is probably bad practice. I can't come up with a solution on my own other than these -- and I think absolute positioning is bad practice.
I made a codepen with a snippet. and below is my regular code.
I hope this is enough information - the idea is I want my nav inside the full bleed without it disrupting. The current codepen has absolute positioning but I would rather not use that. -- Did I miss something simple or is this a common problem?
I am not opposed to not using flexbox (I just started to use this) But I think there is a solution with flexbox that I am just not aware. Also I know my nav in generally is a little hacky
Here is my codepen and snippet
http://codepen.io/willcodes/pen/oLKZEL
HTML:
<nav>
<div class="nav-left">
<div class="logo">
<img src="assets/logo.png" alt="">
</div>
<ul>
<li>Home</li>
<li>FAQ</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact
</ul>
</div>
<ul class="nav-right">
<li><i class="fa fa-globe" aria-hidden="true"></i>ENG</li>
<li><i class="fa fa-search" aria-hidden="true"></i></li>
</ul>
</nav>
<header>
<div class="heading">
<div class="wrapper">
<h2>Trendy, Versatile, Minimal Solution to Style up Your Business</h2>
<h1>Designer. Photographer. Developer.</h1>
<button class="info">More Info</button>
</div>
</div>
</header>
<script src="https://use.fontawesome.com/902375b958.js"></script>
<script src="js/main.js"></script>
</body>
body, html {
margin: 0;
padding: 0;
width: 100%;
font-size: 10px;
}
h1, h2, h3, h4, ul {
margin: 0;
padding: 0;
}
.wrapper {
width: 70%;
margin: 0 auto;
max-width: 1280px;
}
.nav-left {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
nav {
position:absolute;
left:5%;
width: 90%;
margin: 0 auto;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
nav ul {
padding-top: 1%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
nav ul.nav-right {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-around;
-ms-flex-pack: distribute;
justify-content: space-around;
}
nav ul.nav-right i.fa-globe {
display: inline;
margin-right: 5px;
}
nav ul.nav-right li {
margin-top: 5px;
margin-right: 10px;
}
nav ul li {
margin-top: 5px;
margin-right: 2%;
list-style: none;
font-size: 1.5rem;
font-family: "Raleway", sans-serif;
text-transform: uppercase;
color: white;
}
nav ul li a {
color: white;
text-decoration: none;
}
.logo {
margin-right: 5%;
padding-top: 1%;
}
.logo img {
max-width: 100%;
display: block;
}
header {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../Images/hero.jpg") no-repeat center, black;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.heading {
color: white;
text-align: center;
padding: 25px 50px;
margin: auto;
}
.heading h2 {
font-weight: 300;
font-family: "Damion", cursive;
font-size: 2rem;
}
.heading h1 {
font-family: "Raleway", sans-serif;
text-transform: uppercase;
font-weight: 600;
font-size: 4rem;
letter-spacing: 3px;
}
I'd like to move my <h1> element in flex-start direction, so I used align-self to override the initial direction, but didn't work.
HTML:
<div class="container">
<h1>Logo</h1>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
</div>
CSS:
.container {
background: deepskyblue;
display: flex;
justify-content: flex-end;
flex-direction: row;
}
.container h1 {
align-self: flex-start;
}
.navigation {
display: flex;
list-style: none;
}
.navigation a {
color: white;
padding: 1rem;
text-decoration: none;
display: inline-block;
}
.navigation a:hover {
background-color: red;
}
CodePen
If you want the <h1> aligned at start you want to set the justify-content property of its' parent to space-between. You don't need align-self on <h1>:
.container {
background: deepskyblue;
display: flex;
justify-content: space-between;
flex-direction: row;
}
.container h1 {
color: white;
}
Updated pen.
I am styling a header of a webpage. I want the header to be a single line which includes a logo and some navigational links. I feel the best, most modern way to layout this header today is with CSS3's flexbox, so that is what I would like to use.
I would like for the logo to be as far left in the flex container as possible, and the remaining navigation items to be as far right as possible. This could easily be achieved by floating the elements left and right, but that is not what I would like to do. So...
How do you align child elements of a flexbox container to opposite far ends of the main axis?
There is a property for the flexbox child elements that allows you to do this on the cross axis, align-self, but it seems there is none to do this on the main axis.
The best way I have come up with to achieve this is to insert an additional, empty, element in between the logo and the navigational links to serve as a spacer. But part of the reason I am choosing to use flexbox for this header is to cohere with a responsive design and I do not know of a way to make the spacing element take up all the remaining space, regardless of the width of the viewing window.
Here is where I currently stand with the mark-up, simplified to only include the elements pertinent to this situation.
HTML
<ul>
<!-- Should be as far left as possible -->
<li id="main">Some Logo <span>Some tag line.</span></li>
<!-- Should be as far right as possible -->
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>
CSS
ul {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
li {
margin: 0 8px;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
#main { font-size: 2rem; }
#main span { font-size: 1rem; }
From your question:
I do not know of a way to make the spacing element take up all the remaining space, regardless of the width of the viewing window.
This is exactly what the flex-grow CSS rule was designed for. If only one child element has the flex-grow attribute set, then it will take up all the remaining space in the flex container. The only markup you will need in this case is the following:
HTML:
<li id="spacer"></li>
CSS:
#spacer {
visibility: hidden;
flex-grow: 1;
}
Full Live Demo:
ul {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
li {
margin: 0 8px;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
#main { font-size: 2rem; }
#main span { font-size: 1rem; }
#spacer {
visibility: hidden;
flex-grow: 1;
}
<ul>
<!-- Should be as far left as possible -->
<li id="main">Some Logo <span>Some tag line.</span></li>
<!-- Spacer element -->
<li id="spacer"></li>
<!-- Should be as far right as possible -->
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>
JSFiddle Version: https://jsfiddle.net/7oaahkk1/
I think the only flexibility that is needed, at least on large screens, should go on the first flex-item in the list. The one you want to place your logo at.
By setting this items flex-grow rule to 1 and the text-align to left it will stay on the left side, growing in size, making sure all other items stay on the right side. Since the logo may have a greater height value than all the other items it would make sense to change the align-items rule to baseline, making sure all items are horizontally aligned.
Furthermore i have added a few media queries to change the flex settings accordingly.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: border-box;
}
body {
margin: 0;
}
ul {
width: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: stretch;
padding: 0;
margin: 0;
list-style: none;
}
li {
margin: 0;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
li:first-child {
font-family: sans;
font-size: 2em;
text-align: center;
}
li:first-child span {
font-size: initial;
}
#media (min-width: 34em) {
ul {
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
}
li {
flex: 1;
}
#main {
flex: 0 0 100vw;
}
}
#media (min-width: 48em) {
ul {
justify-content: flex-end;
align-items: baseline;
}
li {
flex: none;
}
#main {
flex: 1 0 auto;
text-align: left;
}
}
<ul>
<!-- Should be as far left as possible -->
<li id="main">Some Logo <span>Some tag line.</span></li>
<!-- Should be as far right as possible -->
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>
Essentially you need a row container with two child columns
container is a flexible div
column one is a flexed div with the logo
column two is a flexible ul with flexed li's
AND 'justify-content: space-between' to move the columns to the far ends
Check my snippet (full page)!
.container,
.menu {
display: flex;
}
.container {
justify-content: space-between;
width: 100%;
}
.menu {
padding: 0;
margin: 0;
list-style: none;
}
li,
.logo {
margin: 0 8px;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
#main {
font-size: 2rem;
}
#main span {
font-size: 1rem;
}
<div class="container">
<div id="main" class="logo">Some Logo <span>Some tag line.</span>
</div>
<ul class="menu">
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>
</div>
JSfiddle Demo
Wrap a ul over the rest of the list items and use nested flex container. This is to provide flexbox to act on two elements.
Use justify-content: space-between on the main flexbox parent to equally space the two elements.
.parent-menu {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
/* Modify */
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
li {
margin: 0 8px;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
#main {
font-size: 2rem;
}
#main span {
font-size: 1rem;
}
.right-menu {
display: flex;
/* Add */
}
<ul class="parent-menu">
<!-- Should be as far left as possible -->
<li id="main">Some Logo <span>Some tag line.</span>
</li>
<ul class="right-menu">
<!-- Should be as far right as possible -->
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>
</ul>
One posibility is to set a right margin on the first element
ul {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
li {
margin: 0 8px;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
#main {
font-size: 2rem;
margin-right: auto; /* create a right margin as needed */
}
#main span { font-size: 1rem; }
#spacer {
visibility: hidden;
flex-grow: 1;
}
<ul>
<!-- Should be as far left as possible -->
<li id="main">Some Logo <span>Some tag line.</span></li>
<!-- Should be as far right as possible -->
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>