I have a flexbox navbar using ul with a height of 86px. I centered
the li-s using align-items: center, but when I want to add a
background-color hover effect on the list items, having the same
the height as the ul, the list items just jump to the top of the ul and
it's no more centered...Why's that? I applied display flex on the
li-s using align-items center and this way was okay, but I know this isn't the right way to do it, because you need to apply flex on
parent elements...
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: 0 auto;
list-style-type: none;
height: 86px;
background-color: beige;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 15px;
}
ul li {
height: 86px;
}
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>FAQ</li>
</ul>
</body>
Just remove height from both the element if you want li to take full width of the navbar and adjust its width as per the padding. This is the normal and I guess a good approach to do this.
Your code was just adding height hence text inside it went up. Remove it and add some padding to li
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: 0 auto;
list-style-type: none;
background-color: beige;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 15px;
}
ul li {
padding: 20px 20px;
}
ul li:hover {
background: tomato;
}
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>FAQ</li>
</ul>
</body>
If I'm understanding the question correctly, I think you need to remove the height set for both the ul and li elements and add appropriate padding to the ul element, so this would be the entire css:
* {
margin: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: auto;
list-style-type: none;
background-color: beige;
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
gap: 15px;
padding: 43px 0;
}
I ran this locally and got a vertically and horizontally centered chunk of li items.
You Set height:86px to your li elements and that is causing the problem
you can increase their height using padding-top and padding-bottom or not to add any height to li elements and just let the align-items to work
IF
li heights is a must you can set line-height to them as well
li{
height:86px;
line-height: 86px;
}
here in this fiddle I've just removed li heights and it's working
When aligning li flex items on the y-axis I would use display: flex; on both the ul and li. Then just simply add height: 100%; to your li's for the background-color to cover the full height and you are good to go.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
max-width: 1280px;
margin: 0 auto;
list-style-type: none;
height: 86px;
background-color: beige;
}
ul,
li {
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
}
li {
height: 100%;
}
li:hover {
background-color: pink;
}
li:nth-child(2):hover {
background-color: lightgreen;
}
<body>
<ul>
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>FAQ</li>
</ul>
</body>
Related
I have tried to use the margin and padding tags, but I can never get it right because screen sizes change, and that makes the arrangements change. Also tried using flex
I am trying to make a navigation bar (top) in HTML and CSS, but I want to make all the tags uniform in spacing so it looks nicer.
Right now it looks like this:
Here is my HTML code:
<div class="header">
<div class="container">
<h1 class="logo"></h1>
<div class="nav">
<ul>
<li>Home</li>
<li>History</li>
<li>Where to Eat</li>
<li>Places to visit</li>
<li>Beauties of Nature</li>
<li>How to navigate Seoul</li>
</ul>
</div>
</div>
</div>
CSS:
.container {
width: 80%;
margin: 0 auto;
}
.header {
background: #293380;
}
.header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
padding: 10px 0;
}
.nav {
float: right;
}
.nav ul {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
list-style: none;
}
.nav li {
flex: 1;
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
.nav a {
color: #F0EFF7;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
.nav a:hover {
color: #953D60;
}
.nav a::before {
content: '';
display: block;
height: 5px;
background-color: #F7D9F1;
position: absolute;
top: 0;
width: 0%;
in your css file, under .nav ul, write justify-content: space-between;, which spaces all the elements evenly.
I really recommend you look further into justify-content, since its the main way to space out the content the way you want. Really good tool
I'm trying to align all navigation links, besides the logo, to the right side of the container/navigation. I want to keep 1rem margin on both sides so that the content has some space to breathe.
I've tried using the code below but nothing on the page changes:
.menu:not(:first-child){
text-align: right;
}
<body>
<div class="body-wrap">
<header class="header">
<nav role="navigation">
<ul class="menu">
<li class="home-link"><img src="https://www.nicolefenton.com/_/images/dec/circle-menu.svg" height="12" width="12" alt=""></li>
<li>About</li>
<li>Writing</li>
<li>Speaking</li>
<li>Projects</li>
</ul>
</nav>
</header>
</div>
</body>
* { box-sizing: inherit; margin: 0; padding: 0; }
body {
position: relative;
line-height: 1.5em;
min-width: 320px;
margin: 0 auto;
color: #222222;
border: 30px solid #ffffff;
background-color: #f8f7f3;
}
.body-wrap {
display: flex;
min-height: 100vh;
display: box;
}
.header {
width: 100%;
max-width: 960px;
margin-right: 1rem;
margin-left: 1rem;
}
.menu {
display: flex;
position: absolute;
top: -0.83rem;
width: 100%;
max-width: 960px;
}
.menu:not(:first-child){
text-align: right;
}
li {
flex-grow: 1;
position: relative;
margin-right: 1em;
display: inline-block;
}
I expect all the nav links to align to the right when using the :not(:first-child) selector.
This:
.menu:not(:first-child)
selects class menu items that aren't a first child.
What you want is:
.menu :not(:first-child)
which selects non-first-child elements within a .menu class.
Notice the space.
Or better yet, make it more obvious what you really mean:
.menu li:not(:first-child)
You might just have to change to this if all you are looking to do is align the text to the right.
.menu li:not(:first-child){
text-align: right;
}
Okay so I'm in the process of learning flexbox but I cannot understand why my navigation title is above the links.
HTML:
<style>
#import url(https://fonts.googleapis.com/css?family=Oswald:400,700);
.box {
display: flex;
}
.item {
width: 100px;
height: 100px;
background-color: red;
margin: auto;
color: #fff;
}
nav {
font-family: "Oswald", sans-serif;
display: flex;
min-width: 100%;
background-color: #181818;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
max-width: 960px
}
nav a {
display: block;
padding: 1rem;
text-decoration: none;
color: #fff;
font-weight: 400;
transition: all 0.3s ease-in-out;
}
nav a:hover {
color: #343434;
}
.title {
margin: 0 35px 0 10px;
color: #1BC;
}
</style>
<nav>
<div class="container">
<a class="title">Architect</a>
<ul>
<li>Getting Started</li>
<li>Examples</li>
<li>Blog</li>
<li>Forum</li>
</ul>
</div>
</nav>
Container CSS:
.container{
width: 100%;
margin: 0 auto:
max-width: 1200px;
}
Code Pen Link: http://codepen.io/ZoidCraft/pen/XKMewy
I would like the title "Architect" to be align to the left of the links.
You set <a class="title">Architect</a> to display: block; in your css. Block level elements will take up their own line. display: flex; elements will also take up their own line.
To fix your problem you could first remove that display: block; from your nav a style. Then change your nav ul from display: flex; to display: inline-flex;. Now you just need to add some padding back to your nav since everything is display inline now, so add padding: 1em 0; to your nav
Here is an updated CodePen of what I am talking about.
I am trying to make the top menu vertically center without assigning value like margin-top: 50px; because some of my friends say this is not the ideal approach.
/* Nav Section */
.nav {
width: 100%;
padding: 0;
margin: 0;
}
.nav-contain {
width: 1100px;
margin: 0 auto;
padding: 0;
overflow: hidden;
}
.logo {
z-index: 10;
display: inline-block;
background: #2980B9;
padding: 65px 50px 35px 45px;
font-size: 36px;
line-height: 42px;
color: #fff;
text-align: center;
}
.logo a {
color: #FFFFFF;
text-decoration: none;
}
#medical {
display: block;
text-transform: uppercase;
}
.menu {
padding: 0;
margin: 0;
float: right;
display: table-cell;
position: relative;
}
.menu a {
text-decoration: none;
color: #505050;
font-weight: bold;
}
.menu ul {
padding: 0;
margin: 0;
float: left;
top: 50%;
}
.menu ul ul {
padding: 0;
margin: 0;
}
.menu ul li {
float: left;
display: block;
margin-left: 45px;
}
.menu ul ul {
position: absolute;
left: -999px;
}
.menu ul li:hover ul {
left: auto;
}
.menu ul li ul li {
margin-left: 0;
float: none;
margin-top: 15px;
}
<div class="nav">
<div class="nav-contain">
<div class="logo">
<span id="medical">Medical</span><span id="company"> Company</span>
</div>
<!-- Logo -->
<div class="menu">
<ul>
<li>Home</li>
<li>About
<ul class="dropdown">
<li>Sample</li>
<li>Sample</li>
</ul>
</li>
<li>Gallery</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</div>
<!-- Menu -->
</div>
<!-- Nav Contain -->
</div>
<!-- Nav -->
Remove float:right on .menu, and set both .logo and .menu to this:
.logo, .menu {
display: inline-block;
vertical-align: middle;
}
If you need .menu to stay on far right side, also add this:
.nav-contain {
text-align: justify;
}
.nav-contain:after{
content: '';
display: inline-block;
width: 100%;
}
How it works:
Set text-align: justify; will line up the two inner inline blocks to the left and right edges of the container.
Create an invisible 100% width element by using :after or :before pseudo-element stretching the box to occupy the entire space of the container. Otherwise inline element occupies only the space bounded by the tags that define the inline element.
One easy way to center here is to use Flexbox:
.nav-contain {
/* what is already there */
display: flex;
align-items: center;
}
Beware of browser support (check caniuse.com to see if the compatibility level is acceptable to you).
This is superior to the margin-top solution as it ensures that you won't have to manually change that 50px each time the size of the image or anything else in the navbar changes.
Try:
.menu > ul > li {
min-height:50px;
display: table;
}
.menu > ul > li > a {
display: table-cell;
vertical-align: middle;
}
http://jsfiddle.net/rawat/4h05rq2s/
Since your navbar remains the same height the whole time, I suggest you give the .nav-contain the following code:
.nav-contain {
width: 1100px;
margin: 0 auto;
line-height: 184px;
padding: 0;
overflow: hidden;
}
Note the line-height.
This will, once you smaller the available width of your device, result in a probably not so nice looking huge navigation bar. For this, I suggest media queries.
I' trying to create a nav that's responsive but I can't get then menu items to stretch itself relative to the container.
What's the most effective modern method of making all elements auto fit themselves full width of a container?
nav {
border: solid 1px #000;
width: 700px;
}
ul {
width: 100%;
list-style-type: none;
width: 100%;
}
ul li {
padding: 25px;
display: inline-block;
background: #000;
color: #fff;
}
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</nav>
I would use CSS tables as follows.
For ul, use display: table and zero out the margin and padding, and set width to 100%.
For ul li, use display: table-cell.
The table cells will adjust themselves to the width of the parent in a reasonable fashion taking into account the width of the link text/labels.
Note: I assumed that you want the links to be inline such that all the links fill up the width, as opposed to a single link taking up 100% of the width. Otherwise, change display: inline-block to display: block for the li elements, but since that is too obvious, I assumed that you wanted a horizontal layout.
nav {
border: solid 1px #000;
width: 700px;
}
ul {
width: 100%;
list-style-type: none;
display: table;
margin: 0;
padding: 0;
}
ul li {
padding: 25px;
display: table-cell;
background: #000;
color: #fff;
}
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
<li>f</li>
</ul>
</nav>
let's say that effective is in the eye of the beholder, but flexbox is quite modern:
nav { display: flex; border: solid 1px #000; width: 700px; }
ul { display: flex; flex-grow: 1; width: 100%; padding: 10px;
list-style-type: none; }
ul li { flex-grow: 1; padding: 25px; margin: 10px;
text-align: center; background: #000; color: #fff; }
see fiddle: http://jsfiddle.net/4dxkk5wr/18/
and this resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
and have fun!
If you really want the most modern solution, you could try flexbox layout: http://jsfiddle.net/4dxkk5wr/15/
ul { width: 100%; list-style-type: none; display: flex; padding: 0; }
ul li { width: 100%; padding: 25px; box-sizing: border-box; background: #000; color: #fff; flex-wrap: nowrap; }
Use flexbox! More information. Give the container the CSS:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
and children: flex: 1 0
Example
Here is an updated jsfiddle http://jsfiddle.net/4dxkk5wr/10/
You can use:
box-sizing: border-box;
width:100%;
in the li tag and set the padding to 0 on the ul.
you can use this css
nav {
border: solid 1px black;
width: 100%;
}
ul {
width: 100%;
list-style-type: none;
width:100%;
margin-left: -35px;
}
ul li {
padding: 100px;
display: inline-block;
background: #000;
color: #fff;
}