I am currently working on building my photography portfolio site.
I try to position my navbar under my logo, but I can't match the navbar to the size and the postion of the logo.
any idea how can I position my nav using CSS?
Thanks
Quick fix. Hero is de flexbox
header {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.logo,
nav {
width: inherit;
text-align: center;
}
ul {
list-style: none;
width: inherit;
display: flex;
justify-content: space-between;
}
<header>
<div class="logo"><img src="https://via.placeholder.com/300x100"></div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</header>
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>
So I am trying to create a browser game and I want to add 24 buttons, 12 on each side of the screen. No matter what I do (for example changing the position property of both the parent and the child divs to every possible option), the rest of the web content moves below the buttons.
<div id="buttonsContainer">
<div class="button">There are 24</div>
<div class="button">buttons in total</div>
<div class="button">But I included</div>
<div class="button">Only 5</div>
<div class="button">For demostration</div>
</div>
I included a badly drawn plan of what I want to achieve. The site content and the buttons are on separate divs of the same 'level'.
Something like this?
body {
margin: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
background: purple;
}
main {
padding: 2rem;
position: relative;
}
.block-list {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 90%;
margin: 0;
}
.block-list li {
padding: 1rem;
background: white;
margin: .5rem;
list-style: none;
width: 100%;
text-align: center;
}
.side-buttons {
position: absolute;
}
.side-buttons li {
list-style: none;
color: purple;
background: yellow;
margin: .25rem;
}
#right {
right: 0;
top: 0;
}
#left {
left: 0;
top: 0;
}
<body>
<main>
<ul class="block-list">
<li>block</li>
<li>block</li>
<li>block</li>
</ul>
<ul class="block-list">
<li>block</li>
<li>block</li>
<li>block</li>
</ul>
<ul class="block-list">
<li>block</li>
<li>block</li>
<li>block</li>
</ul>
</main>
<ul class="side-buttons" id="left">
<li>side button left</li>
<li>side button left</li>
<li>side button left</li>
</ul>
<ul class="side-buttons" id="right">
<li>side button right</li>
<li>side button right</li>
<li>side button right</li>
</ul>
</body>
You can try to apply position: fixed to your container. The idea is to position your container as fixed element, but it will consume our click events, so add pointer-events: none; to it and then restore them on buttons.
#buttonsContainer {
position: fixed;
top: 0;
left: 0;
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: space-between;
width: 100%;
height: 100%;
pointer-events: none;
}
#buttonsContainer button {
pointer-event: auto;
}
JSFiddle
I wish to have a to the left and b to the right. In the center is a list aligned horizontally. I want the full-height div to be the height of the parent.
So:
a 1 2 3 b
Here's the HTML:
<div class="container">
<div class="a">
a
</div>
<div class="full-height">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div>
b
</div>
</div>
I've looked at other SO posts which have 2 solutions:
Add flex-direction: column; to the parent. Which won't work in this situation as parent needs to be horizontally laid out.
Set parent height and make child height: 100%. I need the parents height to be dynamic.
Any ideas?
You need to use align-self:stretch; on the .full-height element.
To align elements inside the list I added:
align-items: center;
display: flex;
justify-content: center;
to the .full-height and a, also removed the padding from the ul.
UPDATE 1:
Updated to meet the comment. Moved flex content to ul instead of .full-height and added height 100% to ul.
You can read more about how flex works in this article.
.container{
display: flex;
position: static;
width: 100%;
background: gold;
align-items: center;
justify-content: space-between;
}
.a{
height: 300px;
align-items: center;
display: flex;
justify-content: center;
}
ul{
list-style-type: none;
}
li{
display: inline-block;
}
.full-height{
background: tomato;
align-self: stretch;
}
ul{
height:100%;
align-items: center;
display: flex;
justify-content: center;
padding:0;
margin:0;
}
<div class="container">
<div class="a">
a
</div>
<div class="full-height">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div>
b
</div>
</div>
I have a navigation bar as shown here: http://i.imgur.com/4rxkS2K.jpg
I am using foundation to build a website, the way I have built the nav bar is as follows:
HTML:
<nav class="top-bar">
<ul>
<li>About</li>
<li id="menu-divider">|</li>
<li>Testimonials</li>
<li><img src="images/logo.png" alt=""></li>
<li>Services</li>
<li id="menu-divider">|</li>
<li>Contact</li>
</ul>
</nav>
CSS:
.top-bar { font-family: 'bebas_neueregular';
height: 150px;
line-height: 100px;
padding: 18px;
width: 100%;
position: relative;
text-align:center;
margin-bottom:10px; }
.top-bar ul { display:inline-block;
margin-left: auto ;
margin-right: auto ;}
.top-bar ul > li { display:inline-block;
margin-left: auto ;
margin-right: auto ;}
#menu-divider { color:#ffffff;
font-size: 24px;}
As you can see in the picture, the way I have built it means that my center li element (my logo picture) is not in exact center as the other li elements are of different widths meaning they are all centered collectively. What I'm after is the logo in the dead center then the other li elements as they are centered around the logo.
Thanks in advance for any help!
You can play around but I'm pretty sure this does the trick:
http://codepen.io/anon/pen/dYXQpz
Use 3 containers (that means you lose your nav as a ul). Flex them and inside of the left and right one, flex the elements (end for the first, start for the other)
<div class="nav-bar">
<div class="sideNav leftNav">
<div class="menu">
MENU 1
</div>
<div class="split"></div>
<div class="menu">
MENU 2
</div>
</div>
<div class="logo">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSN9qhGx6NftAepiMOjdGXkcW-UxkO9dtQ4VGRlepyzNC2S8xQCcA" />
</div>
<div class="sideNav rightNav">
<div class="menu">
MENU 3
</div>
<div class="split"></div>
<div class="menu">
MENU 4
</div>
</div>
</div>
Then apply the css. It can be improved but it can help you get started.
.nav-bar {
background: pink;
display: flex;
}
.sideNav {
flex: 1 0 auto;
background: red;
display: flex;
}
.leftNav {
justify-content: flex-end;
}
.rightNav {
justify-content: flex-start;
}
.sideNav > div {
margin: 100px 20px 0 20px;
}
.split{width: 2px;background: white;height: 16px}
Hope that helps. I loves flexbox.
I have a flexbox container (ul) that is intermittently centering (this is intended) and not (upon view refresh). Is this a bug or is there something missing from the css?
Live example on the jsFiddle.
HTML:
<div id="lower-half">
<nav>
<ul>
<li>
Menu
</li>
<li>
Catering
</li>
<li>
Gallery
</li>
<li>
About
</li>
</ul>
</nav>
CSS:
nav ul{
display: flex;
height: 100%;
margin: 0 auto;
justify-content: center;
flex-wrap: wrap;
list-style: none;
border: 3px solid;
border-radius: 20px;
width: 360px;
background-color: white;
}
nav ul li {
align-self: center;
flex-grow: 1;
}
It sounds like a weird issue - Is it browser-related? I just tried pasting your code into a Pen and this does indeed center the nav.
However, to perhaps solve your issue, I've changed your CSS a bit, without it affecting your design and positioning - This may perhaps solve your refresh-issue.
Updated Pen
HTML
<nav>
<ul>
<li>
Menu
</li>
<li>
Catering
</li>
<li>
Gallery
</li>
<li>
About
</li>
</ul>
</nav>
CSS
nav {
display: flex;
justify-content: center;
}
nav ul{
display: flex;
flex-wrap: wrap;
width: 360px;
list-style: none;
border: 3px solid;
border-radius: 20px;
background-color: white;
}
nav ul li {
flex-grow: 1;
}