I am trying to space my navigation items in my header evenly for desktop display using flexbox, justify content: space-around.
However it seems as though having .header also set to flex is interfering, as I am able to implement space-around when I comment out .header as display flex.
Tried everything I can think of, so now I come to the experts!
Any ideas greatly appreciated. Thank you.
.header {
margin-bottom: 15%;
display: flex;
justify-content: space-between;
}
.header-ul {
display: flex;
justify-content: space-between;
}
<section class="home">
<header class="header">
<h1 class="h1">made tight</h1>
<i class="fa fa-bars is-hidden-tablet" aria-hidden="true"></i>
<!--non-mobile nav-->
<ul class="header-ul is-hidden-mobile">
<li href='#'>Home</li>
<li href='#'>Studio</li>
<li href='#'>Services</li>
<li href='#'>Careers</li>
<li class='contact-li' href='#'>Contact</li>
</ul>
</header>
You can add margin-left to ul.header-ul.is-hidden-mobile li
.header {
margin-bottom: 15%;
display: flex;
justify-content: space-between;
}
.header-ul {
display: flex;
justify-content: space-between;
}
ul.header-ul.is-hidden-mobile li {
margin-left:30px;
}
<section class="home">
<header class="header">
<h1 class="h1">made tight</h1>
<i class="fa fa-bars is-hidden-tablet" aria-hidden="true"></i>
<!--non-mobile nav-->
<ul class="header-ul is-hidden-mobile">
<li href='#'>Home</li>
<li href='#'>Studio</li>
<li href='#'>Services</li>
<li href='#'>Careers</li>
<li class='contact-li' href='#'>Contact</li>
</ul>
</header>
You can use flex-grow: 1 to make the nav fill the remaining space.
.header {
margin-bottom: 15%;
display: flex;
justify-content: space-between;
}
.header-ul {
display: flex;
justify-content: space-between;
flex-grow: 1;
}
<section class="home">
<header class="header">
<h1 class="h1">made tight</h1>
<i class="fa fa-bars is-hidden-tablet" aria-hidden="true"></i>
<!--non-mobile nav-->
<ul class="header-ul is-hidden-mobile">
<li href='#'>Home</li>
<li href='#'>Studio</li>
<li href='#'>Services</li>
<li href='#'>Careers</li>
<li class='contact-li' href='#'>Contact</li>
</ul>
</header>
Related
How can I prevent the "about" section (flexcontainer div) from being moved by the header element?
I have a distance between the header element, a title and nav bar, and the "about" section. Upon resizing the window, the "about" section gets moved, when there is still space inbetween the elements.
HTML Code:
<body style="background-image: url(#); background-color: #a6afbe;">
<header>
<h1>Haruhi Suzumiya 3D School</h1>
<nav>
<ul class="nav-list">
<li><a class="noselect" href="#">Home</a></li>
<li><a class="noselect" href="#">About</a></li>
<li><a class="noselect" href="#">Pictures</a></li>
<li><a class="noselect" href="#">Contact</a></li>
<li><a class="noselect"
href="#"</a></li>
</ul>
</nav>
</header>
<div class="flexcontainer" style="top: 30rem">
<section>
<h2>About</h2>
<article>
<p class="main">
texttexttext
</p>
<img src="#" alt="">
</article>
</section>
</div>
</body>
CSS Syle:
.flexcontainer {
top: inherit;
display: -webkit-flex;
display: flex;
position:relative;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
justify-content: center;
}
header {
display: flex;
flex-flow: row wrap;
flex-direction: column;
justify-content: center;
}
Illustration displaying how it looks when not being moved:
Element not moved
Illustration displaying how it looks when being resized and moved:
Element being moved
The about section is moving away from the top thanks to style="top: 30rem. You should remove your inline style attribute and use a media query in the main css file for your "flexcontainer" class. My suggustion for any future webpage related projects is to build the site mobile first.
e.g:
#media screen and (max-width: 1000px){
top: 30rem
}
#media screen and (max-width: 500px){
top: 20rem
}
#media screen and (max-width: 300px){
top: 15rem
}
I found a solution! I used absolute positioning on the header.
Code:
<body style="background-image: url(#); background-color: #a6afbe;">
<div class="flexcontainer">
<header>
<h1>Haruhi Suzumiya 3D School</h1>
<nav>
<ul class="nav-list">
<li><a class="noselect" href="#">Home</a></li>
<li><a class="noselect" href="#">About</a></li>
<li><a class="noselect" href="#">Pictures</a></li>
<li><a class="noselect" href="#">Contact</a></li>
<li><a class="noselect" href="#">Wiki</a></li>
</ul>
</nav>
</header>
<section style="top: 45rem" >
<h2>About</h2>
<article>
<p class="main">
texttexttext
</p>
<img src="#" alt="">
</article>
</section>
</div>
</body>
CSS:
.flexcontainer {
position: relative;
top: inherit;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
justify-content: center;
text-align: center;
font-weight: bold;
}
header {
display: flex;
justify-content: center;
flex-direction: column;
position: absolute;
}
Illustration of not being moved: not being moved
Illustation of not being moved when resizing: enter image description here
okay so, im trying to make my navigation bar responsive and im having some troubles
my html and my css
#media (max-width: 600px) {
.toggle-btn {
display: flex;
}
.logo {
display: none;
}
header {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.row ul {
display: flex;
flex-direction: column;
}
}
<header>
<div class="container">
<a href="" class="toggle-btn">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="row">
<img src="myLogo.png">
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>About us</li>
<li>Support</li>
</ul>
</nav>
</div>
</div>
</header>
okay so, i made the li's display in a column so far. And now i want to get them to the center of the page. And i have tried so so much like justify-content: center; and justify-items: center; and text-align center; i dont know how to do this could someone help please?
Thanks :)
align-items: flex-start; should be align-items: center;
I would suggest going through a few articles on Flexbox, this would be a good start.
I'm working on a sidebar using Angular and Flex. It's app-sidebar within the following layout Angular component:
<div fxlayout="row" fxFill>
<app-sidebar fxLayout="column" fxFlex="10%"></app-sidebar>
<div fxLayout="column" fxFlex="100">
<app-top-navbar class="navbar-component" fxLayout="column"></app-top-navbar>
<div class="content" fxLayout="column" fxFlex>
<router-outlet></router-outlet>
</div>
</div>
</div>
I'm trying to get the sidebar to fill the page vertically, the list items within evenly spaced between that expanse. But I'm not having any luck... I've made a simplified version in this JSFiddle. You can see that it stretches horizontally (great, as I want it to fill that 10% of the greater layout), but it doesn't go to the bottom of the page.
I'm new to Angular and Flex, so any help would be appreciated. Here's the Fiddle code (if it makes a difference, anchors are used, because I also have icons not included):
:host {
display: flex;
flex-direction: column;
flex: 1 1 100%;
}
#sidebar-cont-div{
display: flex;
flex:1;
flex-direction: column;
}
#navbar-content-container{
display: flex;
flex: 1;
flex-direction: column;
}
#main-navbar {
background-color: red;
border-radius: 50px 20px 20px 50px;
text-align:center;
}
#nav-list {
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
justify-content: space-around;
flex: 1;
margin: auto;
min-width:100%;
height:100%;
}
<div id = "sidebar-cont-div">
<nav id="main-navbar">
<div id="navbar-content-container">
<a href="#">
<h1 id="sidebar-logo">Project<br>Dash</h1>
</a>
<ul id="nav-list">
<li class="sidebar-item" role="presentation">
<a href="#">
<span>Overview</span>
</a>
</li>
<li class="sidebar-item" role="presentation">
<a href="#">
<span>Project Record</span>
</a>
</li>
</ul>
</div>
</nav>
</div>
please try like this
body , html {
height:100% ;
margin : 0px ;
}
#sidebar-cont-div{
display: flex;
flex-direction: column;
height:100%
}
#main-navbar {
background-color: #ffffff;
background-image: linear-gradient(180deg,rgba(127,162,137,0.82) 20%,rgba(39,86,94,0.92));
border-radius: 50px 20px 20px 50px;
text-align:center;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
You can use the rest of the style as it is.By using the styles above your side nav will strech vertically.
working sample in stackblitz
https://stackblitz.com/edit/js-aqedvi
I am using the CSS framework Bulma (first time), though my question might not be Bulma specific, I thought I'd include that just be clear.
I have a navigation bar that has a centered set of links, but also right-align elements. Here is a screenshot:
You can ignore the fixed leaves on the left. I want to know how I can get the cart and the login button to be right aligned whilst having the other bits centre aligned.
Here is a codepen of what I have tried. I just do not know of the proper way to have the car and the login right aligned. I mean I can position absolute them, but that sounds silly.
HTML CODE
<nav class="navbar is-fixed-top">
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
</nav>
CSS CODE
nav {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #194522;
font-weight: bold;
margin: 0 40px;
display: flex;
align-items: center;
}
nav a:hover {
color: #abcf39;
}
How can I get my navigation like that?
Bulma has two regions in its navbar called navbar-startand navbar-end for control of alignment. Just add an additonal class (in my example: navbar-start--centered) to adapt the "start region" to your needs:
.navbar-start--centered {
flex-grow: 1;
justify-content: center;
}
Here a codepen to play with.
Look at it with a wide viewport - it is desktop only. If you want the start region in the viewports center, you could additionally position the "end region" absolutely.
.navbar-start--centered {
flex-grow: 1;
justify-content: center;
}
<nav class="navbar" role="navigation" aria-label="main navigation">
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start navbar-start--centered">
<a class="navbar-item" href="">Products</a>
<a class="navbar-item" href="">Our Story</a>
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a class="navbar-item" href="">Blog</a>
<a class="navbar-item" href="">Contact Us</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary">
<span class="icon">
<i class="fas fa-shopping-cart"></i>
</span>
<span>Cart</span>
</a>
<a class="button is-light">
Log in
</a>
</div>
</div>
</div>
</div>
</nav>
You can add an empty element to the left (as a placeholder) and one to the right (to hold the links) and set them to be flex:1.
Then use normal flex positioning to set the contents of the second (right) container to be right aligned.
nav {
display: flex;
width: 100%;
height: 100px;
align-items: center;
justify-content: center;
}
nav a {
text-decoration: none;
color: #194522;
font-weight: bold;
margin: 0 40px;
display: flex;
align-items: center;
}
nav a:hover {
color: #abcf39;
}
.nav-container{
display:flex;
flex:1;
justify-content: flex-end;
}
.nav-container a {
margin:0 10px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" />
<nav class="navbar is-fixed-top">
<div class="nav-container"></div>
Products
Our Story
<div id="logo">Logo placeholder</div>
Blog
Contact Us
<div class="nav-container">
🛒
Login
</div>
</nav>
I am using Bootstrap 4 and this CSS class to vertically align my items:
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: flex-start;
}
With this, all this content is aligned to the left. How can I align, for example, the list (ul> li) to the right? Nothing I've tried is working.
Here is a working demo:
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: flex-start;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row vertical-align">
<div class="col-md-3" style="background-color: #f1f1f1;">
<div class="logo">
<img src="http://placehold.it/120x50" alt="" class="img-responsive">
</div>
</div>
<div class="col-md-6" style="background-color: #ffccff;">
<div class="catergorias">
<ul class="list-inline categorias_topo">
<li class="list-inline-item">
Categoria 1
</li>
<li class="list-inline-item">
Categoria 2
</li>
<li class="list-inline-item">
Categoria 3
</li>
<li class="list-inline-item">
Categoria 4
</li>
</ul>
</div>
</div>
<div class="col-md-3" style="background-color: #f1f1f1;">
BUSCA
</div>
</div>
</div>
I also have a JSFiddle: https://jsfiddle.net/xcottg08/
You should use justify-content: flex-end; instead of justify-content:flex-start to justify content to the right side.
You must specify it within these rules
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
However, I would create a new class like .vertical-align-right and one extra class to the container with list (the div above .catergorias with class .col-md-6), thus the code would look as follow:
.vertical-align-right > .list,
justify-content: flex-end;
}