I'm creating navigation bars using flexbox and ran into this particular issue when trying to create buttons out of anchor tags (i.e. link in the centre of a box).
I have the li set to display flex so I can centre the a, but as soon as I give the a some height, the a aligns to the top-left. Is there any way of getting the a centred?
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font: sans-serif;
}
#top-nav {
border-bottom: 4px solid blue;
}
#center-section {
display: flex;
width: 1000px;
margin: auto;
}
#center-section>* {
flex: 1 1 0;
}
header section {
background: blue;
height: 90px;
width: 500px;
}
.navbar {
display: flex;
}
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
align-self: center;
border: 1px solid red;
}
.navbar ul li {
display: flex;
flex: 1 1 100%;
}
.navbar ul li a {
background-color: yellow;
align-self: center;
width: 100%;
height: 100%;
}
.navbar ul li a:hover {
background-color: green;
}
<header>
<div id="top-nav">
<div id="center-section">
<section id="logo">
Home
</section>
<div class="navbar">
<ul>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</header>
When you set height:100% to a you make it stretch all the li and thus you can no more control it as all the alignment are equivalent in this case. What you need is to align the content inside the a. For this you can make it a flex container and use align-items and/or justify-content:
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
font: sans-serif;
}
#top-nav {
border-bottom: 4px solid blue;
}
#center-section {
display: flex;
width: 1000px;
margin: auto;
}
#center-section>* {
flex: 1 1 0;
}
header section {
background: blue;
height: 90px;
width: 500px;
}
.navbar {
display: flex;
}
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
align-self: center;
border: 1px solid red;
}
.navbar ul li {
display: flex;
flex: 1 1 100%;
}
.navbar ul li a {
background-color: yellow;
display:inline-flex;
align-items: center;
justify-content:center;
width: 100%;
height: 100%;
}
.navbar ul li a:hover {
background-color: green;
}
<header>
<div id="top-nav">
<div id="center-section">
<section id="logo">
Home
</section>
<div class="navbar">
<ul>
<li>About</li>
<li>Store</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</header>
Related
I'm having some problems creating a header.
Here, my ul is not using the full height of the nav, but the nav IS using the full height of the header.
I want to fix this in order to center vertically the text.
Thank you.
(edit) When I use height: 100%; on the ul, this happens.
This is my HTML:
<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORKS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
This is my SASS:
$BLACK:#000;
$WHITE:#fff;
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 75px;
background-color: $BLACK;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
nav {
width: 50%;
padding-right: 50px;
ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
li {
display: inline-block;
margin-left:50px;
a {
text-decoration: none;
color: $WHITE;
}
}
}
}
}
Here is a solution for this. Just add line-height: 75px; to the li elements and set the ul element's margin to zero by adding margin: 0px;.
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 75px;
background-color: #000;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}
header .logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
header nav {
width: 50%;
padding-right: 50px;
}
header nav ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
margin: 0px;
}
header nav ul li {
display: inline-block;
margin-left: 50px;
line-height: 75px;
}
header nav ul li a {
text-decoration: none;
color: #fff;
}
<header>
<div class="logo">
<img src="img/logo.png"/>
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORKS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
However I converted your SASS code into CSS to run it on the stack overflow code snippet runner. You can change this to SASS again if you want.
Thanks and best regards!
Its probably because you did not reset the margin for the ul tag and also apply a 100% percent height to it also.
$BLACK: #000;
$WHITE: #fff;
* {
box-sizing: border-box;
// margin: 0;
// padding: 0;
}
header {
width: 100%;
height: 75px;
background-color: $BLACK;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
nav {
width: 50%;
padding-right: 50px;
background: red;
ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
background: orange;
height: 100%;
li {
display: inline-block;
margin-left: 50px;
a {
text-decoration: none;
color: $WHITE;
}
}
}
}
}
<header>
<div class="logo">
<img src="https://via.placeholder.com/20x20.png/09f/fff" />
</div>
<nav>
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>WORKS</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
Please update your css with following code:
$BLACK:#000;
$WHITE:#fff;
* {
box-sizing: border-box;
}
header {
width: 100%;
height: 75px;
background-color: $BLACK;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.logo {
width: 50%;
display: flex;
align-items: center;
padding-left: 50px;
}
nav {
width: 50%;
padding-right: 50px;
height: 100%;
display: flex;
align-items: center;
ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
justify-content: right;
flex: 1 0 auto;
align-self: stretch;
align-items: center;
li {
display: inline-block;
margin-left:50px;
a {
text-decoration: none;
color: $WHITE;
}
}
}
}
}
I have this navigation bar that works really well. It is fixed so it follows you as you scroll through the website. However, I would like for the navbar to only start in the second section (#home) and for it to not be visible in the first section (#section0).
Could I please have some help?
#section0 {
width: 100%;
height: 100vh;
background-color: blue;
}
#home {
width: 100%;
height: 100vh;
background-color: white;
display: block;
margin: 0 auto;
}
#home ul {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
z-index: 9999;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-fixed;
/* Safari */
position: fixed;
top: 0;
}
#home ul li.left-menu {
display: flex;
justify-content: flex-end;
}
#home ul li.right-menu {
display: flex;
justify-content: flex-start;
}
#home li a {
display: block;
color: white;
text-align: center;
padding: 13px 20px;
text-decoration: none;
font-family: Futura;
font-size: 8px;
}
#home li a:hover {
color: #00CFFF;
}
#home .active {
color: #00CFFF;
}
#secondpage {
height: 100vh;
width: 100%;
background-color: orange;
}
<section id="section0">
</section>
<section id="home">
<ul>
<li class="left-menu">
<a class="active" href="#home">HOME</a>
HOW IT WORKS
WHY CHOOSE US
</li>
</li>
<li class="right-menu">
SERVICES
OUR GALLERY
CONTACT US
</li>
</section>
<section id="secondpage">
</section>
Just set a higher z-index for the first section.
body {
margin: 0;
padding: 0;
}
#section0 {
width: 100%;
height: 100vh;
background-color: blue;
z-index: 99999;
position: relative;
}
#home {
width: 100%;
height: 100vh;
background-color: white;
display: block;
margin: 0 auto;
}
#home ul {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
z-index: 9999;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-fixed;
/* Safari */
position: fixed;
top: 0;
}
#home ul li.left-menu {
display: flex;
justify-content: flex-end;
}
#home ul li.right-menu {
display: flex;
justify-content: flex-start;
}
#home li a {
display: block;
color: white;
text-align: center;
padding: 13px 20px;
text-decoration: none;
font-family: Futura;
font-size: 8px;
}
#home li a:hover {
color: #00CFFF;
}
#home .active {
color: #00CFFF;
}
#secondpage {
height: 100vh;
width: 100%;
background-color: orange;
}
<section id="section0">
</section>
<section id="home">
<ul>
<li class="left-menu">
<a class="active" href="#home">HOME</a>
HOW IT WORKS
WHY CHOOSE US
</li>
</li>
<li class="right-menu">
SERVICES
OUR GALLERY
CONTACT US
</li>
</section>
<section id="secondpage">
</section>
Note:
I have added position: relative to first section (.section0) for z-index to work.
I have remove margin and padding from <body> only to make this snippet clean.
Edit: As you said, the previous example makes the navigation bar slide out from under the first section, you can try this example using position: sticky.
I'll explain what I did here.
I took the navigation bar (<ul>) out of home section.
I have wrapped the element <ul>, home and secondpage in an element and gave it a class called wrapper.
The first section remains out of the wrapper.
I have applied position: sticky; to navigation (<ul>) and added a top value at which the navigation should stay fixed.
I have also added position: relative; to wrapper class for the sticky element to work.
This means the navigation bar (<ul>) stays fixed inside the wrapper class.
Working Example:
body {
margin: 0;
padding: 0;
}
#section0 {
width: 100%;
height: 100vh;
background-color: blue;
position: relative;
}
#home {
width: 100%;
height: 100vh;
background-color: white;
display: block;
margin: 0 auto;
}
ul {
background: #fff;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
z-index: 9999;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
position: -webkit-fixed;
/* Safari */
/*position: fixed;*/
position: sticky;
top: 0;
}
ul li.left-menu {
display: flex;
justify-content: flex-end;
}
ul li.right-menu {
display: flex;
justify-content: flex-start;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 13px 20px;
text-decoration: none;
font-family: Futura;
font-size: 8px;
}
li a:hover {
color: #00CFFF;
}
.active {
color: #00CFFF;
}
#secondpage {
height: 100vh;
width: 100%;
background-color: orange;
}
.wrapper {
position: relative;
}
<section id="section0">
</section>
<div class="wrapper">
<ul>
<li class="left-menu">
<a class="active" href="#home">HOME</a>
HOW IT WORKS
WHY CHOOSE US
</li>
<li class="right-menu">
SERVICES
OUR GALLERY
CONTACT US
</li>
</ul>
<section id="home">
</section>
<section id="secondpage">
</section>
</div>
How can I align 2 different Component side by side using flexbox ?
I have my 1st component "nav-menu" and the 2nd "homepage" I would like it to be side by side.
homepage.component.html
<app-nav-menu></app-nav-menu>
<div class="container">
<div>
<img src="https://colorlib.com/preview/theme/amado/img/product-img/pro-big-1.jpg">
</div>
</div>
I gave a width to my container
homepage.component.css
.container {
display: flex;
width: 50%;
}
div.container>div {
flex-grow: 1;
}
img {
width: 20%;
height: auto;
}
nav-menu.component.html
<h1>Furniture</h1>
<nav class="nav" role="navigation">
<ul clas="menu">
<li>Home</li>
<li>Shop</li>
<li>Product</li>
<li>Cart</li>
</ul>
</nav>
I gave a width to my nav
nav-menu.component.css
* {
box-sizing: border-box;
}
h1 {
display: flex;
justify-content: space-between;
margin-left: 30px;
margin-bottom: 100px;
}
nav {
width: 40%;
}
.nav ul {
margin: 0px;
padding: 0px;
background: white;
list-style: none;
}
.nav a {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0.5em;
text-decoration: none;
color: black;
font-size: 2em;
width: 10px;
}
.nav a:hover {
color: #FFA500;
transition: 0.1s;
}
whats the next step ?
thanks.
you have to wrap your both components in a flex
<div style="display: flex; flex-grow: grow">
<app-component-1></app-component-1>
<app-component-2></app-component-2>
</div>
I'm having trouble displaying my child div tags side-by-side while the parent div tag is display flex, if anyone can show me how to get this to work, that would be great! Here's my code sample:
css
.wrapper{
z-index: +1;
display: flex;
flex-direction: column;
height: 100vh;
align-items: baseline;
justify-content: space-around;
}
.wrapper .logo{
outline: 1px solid #fff;
width: 400px;
height: 150px;
}
.wrapper .logo img{
width: 100%;
}
.wrapper .discription{
width: 320px;
outline: 1px solid #fff;
}
.wrapper .discription h1{
color: #fff;
padding: 0;
margin: 0;
text-transform: uppercase;
}
.wrapper .links{
outline: 1px solid #fff;
}
.wrapper .links nav ul{
list-style-type: none;
list-style: none;
padding: 0;
margin: 0;
}
.wrapper .links nav ul li{
display: block;
}
.wrapper .links nav ul li a{
font-size: 20px;
color: #fff;
padding: 10px;
display: block;
text-transform: uppercase;
text-decoration: none;
}
html
<div class="wrapper">
<div class="logo">
<img src="images/fire-engine.png" draggable="false">
</div>
<div class="discription">
<header>
<h1>Best non-host mw2 menu cheat engine [cex/dex]</h1>
</header>
</div>
<div class="links">
<nav>
<ul>
<li>home</li>
<li>pricing</li>
<li>support</li>
<li>login</li>
</ul>
</nav>
</div>
</div>
what I'm trying to do, similar to this:
Just keep display: flex and remove flex-direction: column in your .wrapper because flex-direction by default is row when you have display: flex.
.wrapper{
z-index: +1;
display: flex;
height: 100vh;
align-items: baseline;
justify-content: space-around;
}
https://jsfiddle.net/nL27af3z/1/
I am using an inline list as a nav menu, and I would like the hyperlink/list item to take up the full height of the container with the label vertically positioned in the center of the container. Here is what I have:
#top-nav-container {
font-size: 14px;
width: 100%;
height: 50px;
overflow: hidden;
top: 0;
left: 0;
position: fixed;
z-index: 500;
background: #3498db;
}
#top-nav-container .nav-contents {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
#top-nav-container .nav-left {
width: 175px;
}
#top-nav-container .nav-mid {} #top-nav-container .nav-right {
margin-left: auto;
text-align: right;
width: 250px;
}
#top-nav-container .top-nav-logo {
max-height: 35px;
float: left;
}
#top-nav-container ul {
margin: 0 0 0 30px;
padding: 0;
float: left;
list-style: none;
display: flex;
/* Removes whitespace between li elements */
flex-direction: row;
align-items: center;
}
#top-nav-container ul li {} #top-nav-container li a {
text-decoration: none;
background: red;
border-right: 1px solid #fff;
color: #fff;
padding: 0 12px;
}
<header id="top-nav-container">
<div class="container nav-contents">
<div class="nav-left">
<a href="#" title="Home">
<img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="Home" class="top-nav-logo" />
</a>
</div>
<div class="nav-mid">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<div class="nav-right">
Stuff here...
</div>
</div>
</header>
Any other suggestions you have with any of this is greatly appreciated.
You need to add both height and line-height to the links, and also make sure they are either display: block or display: inline-block. Note that inline-block would be preferred:
#top-nav-container li a {
height: 50px;
line-height: 50px;
display: inline-block;
}
Note that on small screens, the Stuff Here... div would get cut off due to having a current width of 250px. Simply turn this down to say 50px (or however wide your container would actually be):
#top-nav-container .nav-right {
width: 50px;
}
I've created a fiddle showing this here.
Hope this helps! :)
You need to modify your CSS a little, see the following snippet:
#top-nav-container {
font-size: 14px;
width: 100%;
height: 50px;
overflow: hidden;
top: 0;
left: 0;
position: fixed;
z-index: 500;
background: #3498db;
}
#top-nav-container .nav-contents {
height: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
#top-nav-container .nav-left {
width: 175px;
}
#top-nav-container .nav-mid {
/* all below rules were added*/
position: absolute;
line-height: 50px;
height: 100%;
left: 50%;
transform: translateX(-50%);
}
#top-nav-container .nav-right {
margin-left: auto;
text-align: right;
width: 250px;
}
#top-nav-container .top-nav-logo {
max-height: 35px;
float: left;
}
#top-nav-container ul {
margin: 0 0 0 30px;
padding: 0;
float: left;
list-style: none;
display: flex;
/* Removes whitespace between li elements */
flex-direction: row;
align-items: center;
}
#top-nav-container ul li {} #top-nav-container li a {
text-decoration: none;
background: red;
border-right: 1px solid #fff;
color: #fff;
padding: 0 12px;
/* all below rules were added*/
height: 50px;
line-height: 50px;
display: inline-block;
}
<header id="top-nav-container">
<div class="container nav-contents">
<div class="nav-left">
<a href="#" title="Home">
<img src="http://coneyislandpark.com/imgUploader/logos/Pepsi_logo_2008.png" alt="Home" class="top-nav-logo" />
</a>
</div>
<div class="nav-mid">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
<div class="nav-right">
Stuff here...
</div>
</div>
</header>