I'm currently trying to build a mobile nav with Flexbox :
A vertical menu that take 100% of the available height. The nav items are evenly placed and takes the whole height.
I use a ul>li>a structure.
The issue :
I can't find a way to:
force <a> to take 100% of the parent li height
make the content of a vertically align.
I did success to do one or the other, but seems I can't have both :(
Here a jsFiddle of what I got so far :
http://jsfiddle.net/hopxzcq3/
<nav>
<ul class="main-nav">
<li>Cat 1</li>
<li>Cat 2</li>
<li>Cat 3</li>
<li>Cat 4</li>
<li>Cat 5</li>
</ul>
</nav>
.main-nav {
display:flex;
flex-direction:column;
justify-content:space-between;
height:100%;
}
.main-nav li {
display:flex;
flex-grow: 1;
}
.main-nav li a {
display:block;
width:100%; height:100%;
}
Use flex:1 on the anchor instead of display:block; width:100%; height:100%;
.main-nav li a
{
flex:1; /* make the anchor full size*/
display:flex; /*these 2 are needed for vertical alignment*/
align-items: center;
}
Updated fiddle
Related
I am trying to center just 2 elements in the center of a page. This is a page with clickable icons for your social links. But I need to find a way to center them in a way that they are centered no matter the device's size. Please bare in mind this is my second day ever developing. Any feedback is highly appreciated!
Here is what it should look like in the end
Here is the code I have
<div class="fresh">
<img width="160" src=logo.svg>
</div>
<div class="icons-inline">
<ul class="icons">
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
</ul>
</div>
css:
.fresh {
color: #E3EEF8;
text-align: center;
padding-top: 20%;
}
.icons {
text-align: center;
padding-right: 1.5%;
}
I'm currently just using text-align and then setting the padding to 20% on the top text so that it pushes both of them down and appears centered only on MY specific screen. But I want it to work on phones, other monitors, etc.
use flex-box, try this:
You can skip the * {...} since it will override every element in your document, and you'll have to set margin and padding manually
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.flex-container{
display: flex;
flex-flow: row wrap; /* can also try column wrap */
align-items: center;
justify-content: center;
}
#main-container{ /* this will be the size of your browser window */
width: 100%;
height: 100vh;
}
html:
<section class="flex-container" id="main-container">
<!-- your things here -->
</section>
if you want an ul to show li elementos horizontally just add flex-container class to it, it will show horizontally, then you can add this rule ul.flex-container li to treat those kind of list better, e. g:
ul.flex-container li{
margin: 15px 0 0 15px;
}
your code could look like this:
<section class="flex-container" id="main-container">
<ul class="flex-container">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</section>
you'll have a main container with the size of fhe window with its elements centered, inside youll have a list with its elements horizontally aligned
I like to use this approach:
.pageContainer {
display: grid;
place-items: center;
min-height: 100vh;
}
You can read more about it directly from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
Create a container at least as big as the screen, and align the content to the center of the container.
The centering of elements can be handled by Flexbox. You just need to make sure that the container that holds the logo and the list of social media icons is as big as any screen the user might have. You can use viewport-percentage sizes for that, for example min-height: 100vh means “make the height of this element at least 100 percent of the viewport height”, where viewport is the size of the browser window.
Here’s a working solution:
body {
margin: 0;
}
main {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
margin-bottom: 16px;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
}
li:not(:last-of-type) {
margin-right: 16px;
}
<main>
<img src="https://picsum.photos/id/237/280/120" alt="Logo" />
<ul>
<li>Icon 1</li>
<li>Icon 2</li>
<li>Icon 3</li>
<li>Icon 4</li>
<li>Icon 5</li>
<li>Icon 6</li>
<li>Icon 7</li>
</ul>
</main>
I have a navigation menu (header menu) in my web page which is actually takes dynamic content. The dynamic menu items are loaded into ul>li>{dynamic_content}. I want this navigation bar (I mean the ul ) in the center of the section, not vertically but horizontally. I can have text-align:center because it has multiple children tags.
Also I can't do the following,
.class{
width:50%;
margin-left:auto;
margin-right:auto;
}
because I can't set a width since this is a DYNAMIC navigation.
You may think why I can't try
.class{
position:absolute;
left:50%;
transform:translateX(-50%);
}
This is also can not be done, because I can't set the position:absolute since it's going to be a fixed header on scroll. It make some position problems in responsive.
I'm looking for an alternative to solve this problem.
You can use justify-content: center from flexbox.
.container {
display: flex;
justify-content: center;
}
<div class="container">
<span>Title 1</span>
<span>Title 2</span>
<span>Title 3</span>
</div>
Using flexbox to center the list on the page will work.
nav {
width: 100%;
display: flex;
justify-content: center;
}
ul {
margin: 0;
display: flex;
list-style: none;
}
li:not(:last-child) {
margin-right: 1rem;
}
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
If you are looking for old browsers support, another option would be using display table as it is explained here
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="something-semantic">
<div class="something-else-semantic">
Unknown stuff to be centered.
</div>
</div>
I think I figured it out a new way to align contents Horizontally.This works nice to me and have no issue with browser compatibility.
Wrapped the navigation with a div and set text-align:center and added display:inline-block to the ul that I wanted to center.
div {
text-align: center;
}
ul {
display:inline-block;
list-style-type: none;
}
ul>li{
float:left;
}
<div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
I'm currently working on a menu consisting of two parts (see image). On mobile, I'd like to show these menu items stacked from top to bottom, but starting with the bottom menu and ending with the top menu. Is there any (clean) way to do this with CSS or will I have to create two menus and show the correct one depending on page width?
EDIT: To clarify, the image is just to show an example of what I mean. I'm wondering in a more general sense if it's possible to somehow reverse the divs in CSS (without absolute positioning etc).
EDIT 2: Apologies for not adding any code. Here's a small pen that shows the situation: https://codepen.io/anon/pen/GWwrMW
<div class="nav">
<ul class="nav__top">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
<ul class="nav__primary">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
.nav__top,
.nav__primary {
list-style: none;
margin: 0 0 20px 0;
text-align: right;
li {
display: inline-block;
padding: 10px;
background-color: #ccc;
}
}
On mobile, I want the sub items to be displayed underneath the main items.
You can do this with flex and flex-direction: column-reverse, or for more control, using the order property on flex children. But with your example, flex-direction: column-reverse would work.
.nav__top li,
.nav__primary li {
display: inline-block;
padding: 10px;
background-color: #ccc;
}
#media (max-width: 420px) {
.nav {
display: flex;
flex-direction: column-reverse;
}
.nav li {
display: list-item;
}
}
<div class="nav">
<ul class="nav__top">
<li>Sub Item 1</li>
<li>Sub Item 2</li>
</ul>
<ul class="nav__primary">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
This added CSS will reverse the order in the second menu:
.nav__primary {
display: flex;
flex-direction: row-reverse;
}
You can put it in a media query.
https://codepen.io/anon/pen/ryQjdg
ADDITION: I overread the wish of it to be stacked horizontally. In this case you need
.nav__primary {
display: flex;
flex-direction: column-reverse;
}
If you want responsive nav bar you have to use media queries. Something like this
#media screen and (max-width: 600px){
ul.topnav li {float: none;}}
This will work if your menu was built by list.
Figured it out. Since I only need to support mobile browsers I can use Flexbox:
.nav {
display: flex;
flex-direction: column-reverse;
}
I'm currently trying to make a sidebar layout work. I feel like I'm nearly there but the last bit is just not working.
html,body {
width: 100%;
height: 100%;
}
#wrapper {
display: flex;
width: 100%;
height: 100%;
}
.sidebar {
height: 100%;
position: fixed;
width: 200px;
background: red;
overflow: auto;
flex-direction: column;
display: flex;
}
ul {
padding: 0;
margin: 0;
}
.menu {
flex: 1;
background: rgb(150,0,0);
}
.users {
overflow: auto;
max-height: 240px;
min-height: 100px;
}
<div id="wrapper">
<div class="sidebar">
<ul class="menu">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
<ul class="users">
<li>user 1</li>
<li>user 2</li>
<li>user 3</li>
</ul>
</div>
<div class="content">
</div>
</div>
Here is a fiddle of the layout which works better to see the issue than the above snippet:
https://jsfiddle.net/ybp4og8w/1/
All works great except when the height of the window gets really small, smaller than the menu items list. The content at the bottom disappears off screen. Ideally I'd like to have the user list sticky at the bottom (which is correct right now but I've also had this issue when messing with the code), not overlap the menu items when the height gets small but instead make the sidebar become scroll-able.
Any tips on how to achieve this?
I see your jsfiddle and apply this code in #sidebar
overflow-y:scroll;
May be this helpful.
Thanks!
I wonder, what's the best way to create horizontal menu with fixed width and variable number of items?
To adjust menu to make items equally spaced on menu strip, seems the only way is to use table width=100% as menu wrapper and items as td. So they would be adjusted automatically.
Is there another solution (without td), considering that we don't know the number of items and, moreover, it can vary?
You could give the <ul>/<ol> a display: table and the <li> a display: table-cell:
HTML:
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
CSS:
ul {
width: 100%;
margin: 0;
padding: 0;
display: table;
}
li {
display: table-cell;
text-align: center;
}
http://jsfiddle.net/8RXUw/
Hmm, try this:
.wrapper {
width:100%; /*or fixed width*/
}
header {
text-align:center;
}
nav {
margin:0 auto
}
nav ul {
list-style: none outside none;
overflow: hidden;
height: 20px;
margin:0;
padding: 5px;
text-align: justify;
cursor: default;
}
nav ul li {
display: inline;
margin:0;
padding:0;
}
nav ul li a {
display: inline-block;
padding:5px 10px;
}
ul:after {
content: "1";
margin-left: 100%;
height: 1px;
overflow: hidden;
display: inline-block;
}
http://jsfiddle.net/inc1uder/VCy8L/13/
Unordered list with the list items set to display: inline:
CSS:
<style type="text/css">
ul li {
display: inline;
}
</style>
HTML:
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
</ul>
and if it needs to be a fixed width you can play about with the width on the ul tag.
This days we can use the HTML5 and Grid CSS benefits:
menu {
display: grid;
grid-template-columns: repeat(4, auto);
}
<menu>
<menuitem>Item 1</menuitem>
<menuitem>Item 2</menuitem>
<menuitem>Item 3</menuitem>
<menuitem>Item 4</menuitem>
</menu>
This method has the advantage that styling is only suitable for the parent element in structure and is very easily expandable.
Note 1: The equivalent form for this rule:
grid-template-columns: repeat(4, auto);
is also:
grid-template-columns: repeat(4, 1fr);
or
grid-template-columns: auto auto auto auto;
Note 2: Of course, we can use any other structure instead of <menu> and <menuitem> tags (eg <ul> with <li> or nested <div> tags, etc.). Also instead of <menuitem> tag we can use also <li> tag with <menu> tag, because currently the tag is not supported by the most of the web browsers.