I'm trying to create a hamburger menu on media queries that shows all list items vertically so it will fit on the mobile phone screen, but the flex-direction: column doesn't want to work.
I think the problem is somewhere in the CSS class .topnav.responsive a.
Does anyone have a solution?
Thanks
HTML
<header id="header-home">
<nav id="main-nav" class="sticky">
<div class="container">
<div class="nav-content">
<img src="img/logo.png" alt="Alikis Treff" id="logo" />
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Darts</li>
<li>Gertänkekarte</li>
<li>Öffnungszeiten</li>
<li>Reservierung</li>
<li>Kontakt</li>
<li>
<a
href="javascript:void(0);"
class="icon"
onclick="myFunction()"
>
<i class="fa fa-bars fa-2x"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
CSS
#main-nav {
background: $dark-color;
height: 4rem;
ul {
display: flex;
}
li {
padding: 1rem 2rem;
}
a {
text-transform: uppercase;
color: #fff;
text-decoration: none;
font-size: 1rem;
letter-spacing: 1.2px;
padding: 0.3rem;
border-radius: 5px;
&:hover {
color: $dark-color;
background: $light-color;
transition: all ease 250ms;
}
}
.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.topnav .icon {
display: none;
}
}
Media
#media screen and (max-width: 600px) {
#main-nav {
.topnav a {
display: none;
}
.topnav a.icon {
display: flex;
justify-content: space-between;
}
.topnav.responsive a {
display: flex;
flex-direction: column;
text-align: left;
}
JS
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
You don't need a display flex in mobile.
In media screen your nav must to be display: block
Related
I have a sidebar that is set to flex with direction column. I am trying to get my menu ul to be vertically centered, and my .logo-container to be on the top of the page.
Is there any way to get one child to flex-start and another one centered?
Code:
<aside class="side-bar">
<nav class="navigation">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
</nav>
</aside>
CSS:
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
}
.navigation {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.logoname {
display: inline-block;
}
* {
color: black;
}
ul {
list-style: none;
}
Codepen
Many thanks!
What you can do is to create an empty/invisible element as a third flex item inside the flex parent (in my example below it's the divwith class xxx) and apply justify-content: space-between to the flex parent (instead of center).
Depending on your actual code and content you should make sure that that additional element has the same height as the nav element (30px in your and my example). And again, depending on the situation you might want to add visibility: hidden; to the additional element (xxx) to make it invisible but still have its height included in the flex position calculations:
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
}
.navigation {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
height: 100%;
}
.logoname {
display: inline-block;
}
* {
color: black;
}
ul {
list-style: none;
}
.xxx {
height: 30px;
visibility: hidden;
}
<aside class="side-bar">
<nav class="navigation">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
<div class="xxx"></div>
</nav>
</aside>
You can try this approach.
html {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
}
.navigation {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
* {
color: black;
}
ul {
list-style: none;
}
.logo-container {
display:grid;
justify-content:space-around;
margin:0 auto;
padding-top: 20px;
}
.logo-container img {
text-align:center;
padding:5px;
}
<aside class="side-bar">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<nav class="navigation">
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
</nav>
</aside>
All you have to do is to have the logo and ul in separate divs within the parent div that has the column direction styling, apply flex-shrink:0 to the div containing the logo and flex-grow: 1 to the other div.
That will allow the logo to be at the top and the other div to take the rest of the space - then you can apply flex styling in the navigation -container to center the ul within that div.
UPDATE - the OP wanted the ul centered into the height of the viewport - as noted in the comments this is as simple as offsetting the position of the ul in the bottom div by half the height of the top div - so in this case - moving it up by 20px) because the top div is 40px in height. This allows centering of the ul into the viewport height without resorting to adding empty divs just to get the alignment.
html {
box-sizing: border-box;
color: white;
}
* {
margin: 0;
padding: 0;
}
.side-bar {
width: 35%;
height: 100vh;
background-color: blue;
padding: 8px;
}
.navigation {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
align-items: center;
}
.logo-container {
flex-shrink:0
}
.logoname {
display: inline-block;
padding : 8px;
color: lime;
}
.navigation-container {
flex-grow:1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul {
list-style: none;
position: relative;
top: -20px
}
li a{ color: white; }
<aside class="side-bar">
<nav class="navigation">
<div class="logo-container">
<a href="index.html" class="link">
<img src="http://unsplash.it/30/30" class="logoimg" alt="">
<h6 class="logoname">My<span class="lastname">Name</span></h6>
</a>
</div>
<div class="navigation-container">
<ul class="nav-list">
<li class="item">Menuitem1</li>
<li class="item">Menuitem2</li>
<li class="item">Menuitem3</li>
<li class="item">Menuitem4</li>
</ul>
</div>
</nav>
</aside>
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
Hi i have three h3 (masthead-brand 0-2)
now i saw on the internet that display inline block makes them on the same line, but my idea was having them in the same line AND having spaces between that: masthead is on the left corner of the website, masthead1 is in the center, and masthead2 is in the right corner of the website.
How could i do it?
.masthead-brand {
text-align: left;
font-size: 50px;
margin-right: 30px;
margin-top: 10px;
margin-bottom: 10px;
color: #3434f3;
}
.masthead-brand1 {
text-align: center;
font-size: 50px;
margin-right: 30px;
margin-top: 10px;
margin-bottom: 0px;
}
.masthead-brand2 {
text-align: right;
font-size: 50px;
margin-top: 10px;
margin-bottom: 10px;
color: crimson;
}
h3 {
display: inline-block;
}
<div class="background">
<div>
<h3 class="masthead-brand">Held </h3>
<h3 class="masthead-brand1"> oder</h3>
<h3 class="masthead-brand2"> Schurke?</h3>
</div>
<nav>
<ul class="nav masthead-nav">
<li class="active"><a [routerLink]="['/dashboard']">Dashboard</a></li>
<li><a routerLink="/heroes">Heroes</a></li>
<li><a routerLink="/villains">Schurken</a></li>
</ul>
</nav>
<p class="lead">
Kämpfe jetzt!
</p>
<router-outlet></router-outlet>
</div>
Just add any class to h3' wrapper div:
<div class="wrapper">
<h3 class="masthead-brand">Held</h3>
<h3 class="masthead-brand1">oder</h3>
<h3 class="masthead-brand2">Schurke?</h3>
</div>
and make it flex:
.wrapper {
display: flex;
justify-content: space-between;
}
It's semantically wrong to use 3 seperate headlines.
You should rather use one headline and format its contents.
Here I did it with the help of span elements.
The positioning is done with the help of flex. Flex offers the property to justify its contents just as you need it:
.masthead-brand {
color: #3434f3;
}
.masthead-brand1 {
}
.masthead-brand2 {
color: crimson;
}
h3 {
display: flex;
justify-content: space-between;
}
h3 span {
display: block;
}
<h3>
<span class="masthead-brand">Held</span>
<span class="masthead-brand1">oder</span>
<span class="masthead-brand2">Schurke?</span>
</h3>
I am new to CSS so please excuse if this s basic question ,
I am trying to develop a similar User Interface as show in this picture below
This is my code
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li><span>NASDAQ</span><br>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li><span>DJIA</span><br>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
But could you please tell me why only the first span is visible and others are hidden ??
http://jsfiddle.net/Wf43X/319/
I have tried something like this..
body {
margin: 0px;
padding: 0px;
background-color: #fff;
}
.marquee {
margin: 10px;
padding: 10px;
}
span {
display: inline-block;
margin:0px;
padding:0px;
}
.container{
display: flex;
justify-content: center;
list-style-type: none;
}
.ind-cont {
background-color: #000;
width: 200px;
height: 100px;
margin: 0px;
padding:0px;
}
.txtcolor {
color: #fff;
}
.txtcolorb {
color: #aaa;
}
.ind-name {
margin: 20px;
}
.capital {
float: right;
margin: 20px;
}
.floatright {
float: right;
margin: 10px;
margin-right: 20px;
}
.one-share {
margin: 10px;
margin-left: 20px;
}
<div class="container">
<div class="marquee-sibling"> </div>
<div class="marquee">
<span class="ind-cont">
<span class="ind-name txtcolor ">NASDAQ</span>
<span Class="capital txtcolor">4655.92</span>
<span class="one-share txtcolorb">17.93</span>
<span class="per txtcolorb floatright">0.39%</span>
</span>
<span class="ind-cont">
<span class="ind-name txtcolor ">DJIA</span>
<span Class="capital txtcolor">16414.39</span>
<span class="one-share txtcolorb">15.82</span>
<span class="per txtcolorb floatright">0.1%</span>
</span>
</div>
</div>
You can do this with Flexbox
ul {
display: flex;
justify-content: center;
list-style-type: none;
}
li {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: space-between;
background: black;
color: white;
border: 1px solid white;
paddgin: 10px;
}
li span {
flex: 50%;
padding: 5px;
box-sizing: border-box;
}
li > span:nth-child(4n+2),
li > span:nth-child(4n+4) {
text-align: right;
}
li > span:nth-child(4n+1),
li > span:nth-child(4n+2) {
font-size: 16px;
font-weight: bold;
}
li > span:nth-child(4n+3),
li > span:nth-child(4n+4) {
font-size: 14px;
color: #aaa;
}
<div class="container">
<div class="marquee-sibling">Indices </div>
<div class="marquee">
<ul class="marquee-content-items">
<li>
<span>NASDAQ</span>
<span>4655.92</span>
<span>17.93</span>
<span>0.39%</span>
</li>
<li>
<span>DJIA</span>
<span>16414.39</span>
<span>15.82</span>
<span>0.1%</span>
</li>
</ul>
</div>
</div>
You are breaking a line after the first span, and this code is hiding whatever is after the first line:
.container {
overflow: hidden;
height: 45px;
}
I also think that the flexbox ideas is the best but if you still want to stay with your code, I think you should try changing the size height of your .container in your css. you will be able to see the rest of your 'li' element. The text is in white color and you can't really see it when you run your code cause the background is white.
Current code: http://www.bootply.com/NuuxNSnmrf
I have a few issues I am struggling with in this revision:
hamburger icon is not on the left side upon collapse
vertical gap between left and right side text
brand is not centered
My goal:
Suggestions appreciated!
Update like this along with your code: Demo
.navbar-toggle {
float: left;
}
.navbar-brand {
display: block;
float: none;
text-align: center;
}
.navbar-nav > li > a {
padding-bottom: 3px;
padding-top: 3px;
}
I wrote my own minimal bootstrap navbar stylesheet which builds on top of Bootstrap variables.
/* material navbar */
.material-navbar {
/*
Hides normally visible elements
important notes:
#grid-float-breakpoint - point at which navbar becomes uncollapsed
#grid-float-breakpoint-max - point at which the navbar begins collapsing
*/
> * {
width: 100%;
flex: 1;
list-style-type: none;
}
> .left {
text-align: left;
}
> .center {
text-align: center;
}
> .right {
text-align: right;
}
padding: #navbar-padding-vertical #navbar-padding-horizontal;
margin: 0;
/* collapsed */
#media (max-width: #screen-sm-max) {
display: none;
}
/* not collapsed */
#media (min-width: (#screen-sm-max - 1px)) {
display: flex;
flex-direction: row;
align-items: baseline;
align-content: center;
flex-wrap: nowrap;
justify-content: space-between;
}
}
.material-navbar-collapsed {
/*
Shows normally visible elements
important notes:
#grid-float-breakpoint - point at which navbar becomes uncollapsed
#grid-float-breakpoint-max - point at which the navbar begins collapsing
*/
> * {
width: 100%;
flex: 1;
list-style-type: none;
}
> .left {
text-align: left;
}
> .center {
text-align: center;
}
> .right {
text-align: right;
}
padding: #navbar-padding-vertical #navbar-padding-horizontal;
margin: 0;
/* collapsed */
#media (max-width: #screen-sm-max) {
display: flex;
flex-direction: row;
align-items: baseline;
align-content: center;
flex-wrap: nowrap;
justify-content: space-between;
}
/* not collapsed */
#media (min-width: (#screen-sm-max - 1px)) {
display: none;
}
}
Example:
https://jsfiddle.net/eo2gsxcm/
Update 1: https://jsfiddle.net/eo2gsxcm/1/
Update 2:
Set viewport breakpoints to screen-sm-max https://jsfiddle.net/eo2gsxcm/2/
What I have changed:
included expanded left & rigt navbar toggle buttons inside the navbar-header div and got rid of the container div on left-navbar-menu & right-navbar-menu unordered list elements.
applied float:left on the hamburger menu
aligned left navbar and right navbar list item text to left and right respectively.
included as third dummy search button.
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
color: #FFFFFF;
margin: auto;
}
.navbar {
background-color: #3F50B5;
color: #FFFFFF;
}
a {
color: #FFFFFF !important;
}
a:hover {
color: #000000 !important;
}
.custom-navbar .hamburger-on-left {
float: left;
}
.navbar-left li {
text-align: left;
}
.navbar-right li {
text-align: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top custom-navbar" role="navigation">
<div class="container-fluid">
<!-- expanded behavior -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
<!-- expanded left navbar-->
<div class="navbar-left">
<button type="button" class="navbar-toggle hamburger-on-left" data-toggle="collapse" data-target="#left-navbar-menu">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="false"></span>
</button>
</div>
<!-- expanded right navbar -->
<div class="navbar-right">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#right-navbar-menu">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="false"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#">
<span class="glyphicon glyphicon-search" aria-hidden="false"></span>
</button>
</div>
</div>
<!-- collapsed behavior -->
<ul id="left-navbar-menu" class="nav navbar-nav navbar-left navbar-collapse collapse">
<li>Left
</li>
<li>Left
</li>
</ul>
<ul id="right-navbar-menu" class="nav navbar-nav navbar-right navbar-collapse collapse">
<li>Right
</li>
<li>Right
</li>
</ul>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>