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.
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
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
Why can't I use justify-content: space-between or space-around?
.mobile-page-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.mobile-nav {
display: flex;
justify-content: space-between;
}
<div class="mobile-page-wrapper">
<div class="mobile-nav">
<img src="./img/mobile-nav-logo.svg" alt="LOGO" class="logo-mobile">
<ul class="mobile-soc">
<li><img class="mobile-fb" src="./img/Facebook.svg" alt="Facebook"></li>
<li><img class="mobile-vk" src="./img/VK.svg" alt="Vk"></li>
<li><img class="mobile-inst" src="./img/Instagram.svg" alt="Instagram"></li>
</ul>
</div>
<!-- /.mobile-nav -->
<div class="main-idea-mobile">
<h1>SSDSDSDS<br>DASDASD</h1>
</div>
<!-- /.main-idea-mobile -->
</div>
<!-- /.mobile-page-wrapper -->
I would like to use justify-content: space-between; with flex-direction: column but it doesn't work. Plz help me to solve that problem.
If you wish for there to be more space between the items in mobile-wrapper you need to set its height property.
display: flex; justify-items: space-between; seems to be working on mobile-nav because mobile-nav is a div which is a block level element and therefore has a default width of 100%, and the default flex-direction is row.
I have attached your snippet below with the height of mobile-wrapper set to 100vh as an example.
.mobile-page-wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100vh;
}
.mobile-nav {
display: flex;
justify-content: space-between;
}
<div class="mobile-page-wrapper">
<div class="mobile-nav">
<img src="./img/mobile-nav-logo.svg" alt="LOGO" class="logo-mobile">
<ul class="mobile-soc">
<li><img class="mobile-fb" src="./img/Facebook.svg" alt="Facebook"></li>
<li><img class="mobile-vk" src="./img/VK.svg" alt="Vk"></li>
<li><img class="mobile-inst" src="./img/Instagram.svg" alt="Instagram"></li>
</ul>
</div>
<!-- /.mobile-nav -->
<div class="main-idea-mobile">
<h1>SSDSDSDS<br>DASDASD</h1>
</div>
<!-- /.main-idea-mobile -->
</div>
<!-- /.mobile-page-wrapper -->
(I noticed that when running the snippets from your post and my answer they look the same in the small window, you can see the difference if you click full page)
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>
You can see,
| Nav --- Logo --- Info |
This is the style I want on mobile.
Nav is left align.
Logo is center align.
Info is right align.
<div id="navbar">
<div class="item">Nav</div>
<div class="item">Logo</div>
<div class="item">Info</div>
</div>
What styles do I have to implement for each item to get what I want?
Please, Thanks.
By far the easiest way to achieve this is using flexbox. To limit it to mobile devices, you'd need to wrap it in a #media query, which, for Bootstrap, is below 768px
#navbar {
/*
* place non-mobile styles here
* For example, to hide the navbar outside mobile...
*/
display: none;
}
#media (max-width: 767px) {
#navbar {
display:flex;
justify-content: space-between;
align-items: center; /* optional, to center vertically */
}
}
<div id="navbar">
<div class="item">Nav</div>
<div class="item">Logo</div>
<div class="item">Info</div>
</div>
Use flexbox make the parent flex and space around the content.
Fiddle
.navbar{
max-width: 600px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
<header class="navbar">
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<div class="logo">
<img src="https://placehold.it/88x88" alt="logo">
</div>
<div class="info">
<p> Info about the website </p>
</div>
</header>