I'd like to make the li elements tall as the height of the header.
CodePen
*,
::before,
::after {
border-box: box-sizing;
margin: 0; padding: 0;
}
header {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
background: yellow;
height: 7.5vh;
}
.navigation li {
display: inline-block;
padding: 0 1em;
}
.navigation li:hover {
text-align: center;
background-color: white;
}
<header>
<h1>Logo</h1>
<nav>
<ul class="navigation">
<li>Home</li>
<li>About</li>
<li>Products</li>
<li>Contact</li>
</ul>
</nav>
</header>
One way to achieve this is to utilize the line-height property and make it the same as the height you defined for your <header>:
.navigation li:hover {
text-align: center;
background-color: white;
line-height: 7.5vh;
}
Here's an updated CodePen. Hope this helps! Let me know if you have any questions.
Add display:block in .navigation li:hover.
Related
I have a navigation bar and I added a red line on the bottom when hovering any item of the list, but I want to move that red line under the header (something like "Services"), any idea how to achieve this?
I added an small sample in codepen so you can easily check the HTML and CSS code
header {
background-color: lightblue;
padding-top: 1rem;
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
header nav {
min-width: 50%;
}
header nav ul {
margin: 0;
height: 100%;
list-style: none;
padding-left: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
header li:hover {
height: 100%;
border-bottom: 2px solid red;
}
<header>
<a href="/">
<p>Whatever logo</p>
</a>
<nav>
<ul>
<li>About us</li>
<li>Services</li>
<li>Pricing</li>
<li>Blog</li>
</ul>
</nav>
CONTACT
</header>
Link to check the code
You can fix the header height and also fix the height of navbar items.
Also, you had one issue where on hover li elements are moving. You can also fix that with always adding border with transparent color to the element, so the overall height of the element won't change on hover state.
Here is the fixed CSS
header {
background-color: lightblue;
position: sticky;
display: flex;
height: 60px;
align-items: center;
justify-content: space-around;
}
header nav {
min-width: 50%;
}
header nav ul {
margin: 0;
height: 100%;
list-style: none;
padding-left: 0;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
}
header li {
display: flex;
align-items: center;
border-bottom: 2px solid transparent;
height: 60px;
}
header li:hover {
border-bottom: 2px solid red;
}
https://codepen.io/swarajgk/pen/JjZewPo?editors=1100
I think just giving height to all list elements the same as the header will work.
Like this:-
header {
background-color: lightblue;
padding-top: 1rem;
height: 3rem;
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
header nav {
min-width: 50%;
height : 100%;
}
header nav ul {
margin: 0;
height: 100%;
list-style: none;
padding-left: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
header li{
height: inherit;
}
header li:hover {
border-bottom: 2px solid red;
}
<body>
<header>
<a href="/"
><p>Whatever logo</p></a>
<nav>
<ul>
<li>About us</li>
<li>Services</li>
<li>Pricing</li>
<li>Blog</li>
</ul>
</nav>
CONTACT
</header>
</body>
Hope this solves the issue.
header {
background-color: lightblue;
padding-top: 1rem;
height: 3rem;
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
header nav {
min-width: 50%;
height : 100%;
}
header nav ul {
margin: 0;
height: 100%;
list-style: none;
padding-left: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
header li{
height: inherit;
}
header li:hover {
border-bottom: 2px solid red;
}
I'd suggest the following approach, with explanatory comments in the CSS:
/* removing default padding and margin from all
elements, and forcing the browser to use the
same sizing algorithm - border-box - to calculate
element sizes, including the padding and border
widths in the declared size: */
*, ::before, ::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* setting common properties for the two element
groups: */
header,
header nav ul {
/* using display: flex layout: */
display: flex;
/* forcing the flex-items within the flex parent
to take the full height of that parent: */
align-items: stretch;
}
header {
background-color: lightblue;
block-size: 3em;
position: sticky;
justify-content: space-around;
}
/* using :is() to combine the two selectors
header a,
header li
into one selector: */
header :is(a, li) {
/* using grid layout: */
display: grid;
/* positioning the - including text - content
at the center of the element: */
place-items: center;
}
header nav {
min-width: 50%;
}
header nav ul {
/* the <ul> isn't a flex-item so we have to specify
that we want it to take all available space on
the block-axis (equivalent to 'height' in left-to-right
languages such as English): */
block-size: 100%;
list-style: none;
justify-content: space-between;
}
header li {
/* to prevent the jumping content: */
border-bottom: 2px solid transparent;
}
header li:hover {
/* to style the color of the bottom border: */
border-bottom-color: red;
}
<header>
<a href="/">
<p>Whatever logo</p>
</a>
<nav>
<ul>
<li>About us</li>
<li>Services</li>
<li>Pricing</li>
<li>Blog</li>
</ul>
</nav>
CONTACT
</header>
JS Fiddle demo.
References:
align-items.
display.
justify-content.
place-items.
Bibliography:
"Aligning items in a flex container," MDN.
"Basic concepts of flexbox," MDN.
"Box alignment in grid layout," MDN.
I've tried multiple times now and I can't figure out how to place my unordered list in the middle of my div.
1: Describes how it looks like right now
2: Describes how I wish it to look like
HTML:
<div id="wrapper">
<div class="container">
<img src="flower.jpg"/>
</div>
<div class="header">
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
CSS:
#wrapper {
position:absolute;
background-color: white;
width:100%;
height:100%;
top:0px;
left:0px;
}
img {
width: 100%;
height: 100%;
display: block;
}
.header {
width: 100%;
height: 100px;
background-color: green;
}
.header a {
color: black;
text-decoration: none;
margin: 50px;
padding: 10px;
font-size: 40px;
text-align: center;
}
ul {
list-style-type: none;
position: absolute;
}
li {
float: left;
}
What am I doing wrong? I've tried these in multiple elements:
position: relative/absolute
text-align: center
margin
padding
display: inline
Thanks for the help <3
You can change the styles for the ul element to match the code below:
ul {
list-style-type: none;
position: absolute;
left: 0;
right: 0;
display: flex;
justify-content: center;
}
You can achieve this with flex:
.header {
display: flex;
width: 100%;
height: 100px;
background-color: green;
justify-content: center;
}
Note: you can also change the value of justify-content. A very good explanation about flex and the different properties is this one: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
ul {
display: flex;
justify-content:center;
text-align: center;
list-style-type:none;
width:80%;//depending on how wide you want it and note justify center wont work
unless you specify width on most cases
}
You can do that using flex, like this:
ul {
display: flex;
flex-direction: row;
justify-content: center;
list-style-type:none;
}
You can also try space-around value for justify-content property, and items will have space before, between, and after them.
Here is the working example: https://jsfiddle.net/tLc9zmoy/26/
I'm trying to create a responsive navbar with three items in the same container in the middle as shown below.
For some reason the ul items are not being space evenly and it is showing me this:
I used these lines of code:
nav {
font-size: 1.5em;
display: flex;
justify-content: space-between;
}
ul {
flex: 1;
max-width: 50%;
display: flex;
justify-content: space-evenly;
}
ul,
li {
display: inline;
margin: 0;
padding: 0;
}
<nav>
Home
<ul>
<li>
Learn More
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
Sign Up
</nav>
I appreciate any help and apologize if this post is unclear; I'm still new to this website.
What seemed to fix the issue was changing the "ul {...}" item in css to "nav ul{...}". Hopefully this can help out someone else in the future as well.
space-evenly or space-between will work!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
display: block;
width: 90%;
margin: 5% auto;
}
nav {
display: flex;
justify-content: space-evenly;
}
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
li+li {
margin-left: 1.5rem;
float: left;
display: inline-block;
}
<header>
<nav>
Home
<ul>
<li>Learn More</li>
<li>About</li>
<li>Contact</li>
</ul>
Sign Up
</nav>
</header>
For some reason my navbar is not becoming 100% width. I tried to make .main-header 100% width but still not sure what the problem. The reason to make the navbar 100% is for all the nav items fit on one line. Any ideas what I am doing wrong?
Here is what the navbar looks like on the machine
http://imgur.com/a/za9LH
HTML
**Css**
/* Navigation */
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: purple;
width: 100%;
}
.logo-name {
margin-left: 1%;
background-color: red;
}
.main-nav {
display: flex;
background-color: yellow;
}
.main-nav li {
padding: 0.3em;
align-items: flex-end;
background-color: transparent;
font-size: 17px;
}
<header class="main-header">
<!--<h1 class="logo-name"><li>R.J Roofer</li></h1>-->
<h1 class="logo-name">R.J Roofer</h1>
<nav class="main-nav">
<li class="nav-item-1">home</li>
<li>services</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
<!--<li>FREE QUOTE</li>-->
</nav>
</header>
By default body take 8px margin, thats why your navbar is not fullwifth. So add margin:0 in your body tag. Here is the codepen: https://codepen.io/bhuwanb9/pen/XgmegE
body{
margin:0;
}
Probably all you need is the padding and margin for html and body to be set to zero. You may want to consider using a generic reset like this or this.
/* Navigation */
html, body {
padding: 0;
margin: 0;
}
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: purple;
width: 100vw;
}
.logo-name {
margin-left: 1%;
background-color: red;
}
.main-nav {
display: flex;
background-color: yellow;
}
.main-nav li {
padding: 0.3em;
align-items: flex-end;
background-color: transparent;
font-size: 17px;
}
<header class="main-header">
<!-- <h1 class="logo-name"><li>R.J Roofer</li></h1>
-->
<h1 class="logo-name">R.J Roofer</h1>
<nav class="main-nav">
<li class="nav-item-1">home</li>
<li>services</li>
<li>gallery</li>
<li>about us</li>
<li>contact</li>
<!-- <li>FREE QUOTE</li>
-->
</nav>
</header>
The problem was, that the container wasn't full width. And the list items were also too small. Here is a pen: https://codepen.io/praedictus/pen/zzvpez
/* Navigation */
.main-header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: purple;
width: 100%;
}
.logo-name {
margin-left: 1%;
background-color: red;
}
.main-nav {
display: flex;
background-color: yellow;
width: 100%;
}
.main-nav li {
padding: 0.3em;
align-items: flex-end;
background-color: transparent;
font-size: 17px;
display: block;
float: left;
width: 20%;
text-align: center;
}
I am styling a header of a webpage. I want the header to be a single line which includes a logo and some navigational links. I feel the best, most modern way to layout this header today is with CSS3's flexbox, so that is what I would like to use.
I would like for the logo to be as far left in the flex container as possible, and the remaining navigation items to be as far right as possible. This could easily be achieved by floating the elements left and right, but that is not what I would like to do. So...
How do you align child elements of a flexbox container to opposite far ends of the main axis?
There is a property for the flexbox child elements that allows you to do this on the cross axis, align-self, but it seems there is none to do this on the main axis.
The best way I have come up with to achieve this is to insert an additional, empty, element in between the logo and the navigational links to serve as a spacer. But part of the reason I am choosing to use flexbox for this header is to cohere with a responsive design and I do not know of a way to make the spacing element take up all the remaining space, regardless of the width of the viewing window.
Here is where I currently stand with the mark-up, simplified to only include the elements pertinent to this situation.
HTML
<ul>
<!-- Should be as far left as possible -->
<li id="main">Some Logo <span>Some tag line.</span></li>
<!-- Should be as far right as possible -->
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>
CSS
ul {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
li {
margin: 0 8px;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
#main { font-size: 2rem; }
#main span { font-size: 1rem; }
From your question:
I do not know of a way to make the spacing element take up all the remaining space, regardless of the width of the viewing window.
This is exactly what the flex-grow CSS rule was designed for. If only one child element has the flex-grow attribute set, then it will take up all the remaining space in the flex container. The only markup you will need in this case is the following:
HTML:
<li id="spacer"></li>
CSS:
#spacer {
visibility: hidden;
flex-grow: 1;
}
Full Live Demo:
ul {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
li {
margin: 0 8px;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
#main { font-size: 2rem; }
#main span { font-size: 1rem; }
#spacer {
visibility: hidden;
flex-grow: 1;
}
<ul>
<!-- Should be as far left as possible -->
<li id="main">Some Logo <span>Some tag line.</span></li>
<!-- Spacer element -->
<li id="spacer"></li>
<!-- Should be as far right as possible -->
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>
JSFiddle Version: https://jsfiddle.net/7oaahkk1/
I think the only flexibility that is needed, at least on large screens, should go on the first flex-item in the list. The one you want to place your logo at.
By setting this items flex-grow rule to 1 and the text-align to left it will stay on the left side, growing in size, making sure all other items stay on the right side. Since the logo may have a greater height value than all the other items it would make sense to change the align-items rule to baseline, making sure all items are horizontally aligned.
Furthermore i have added a few media queries to change the flex settings accordingly.
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: border-box;
}
body {
margin: 0;
}
ul {
width: 100%;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: stretch;
padding: 0;
margin: 0;
list-style: none;
}
li {
margin: 0;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
li:first-child {
font-family: sans;
font-size: 2em;
text-align: center;
}
li:first-child span {
font-size: initial;
}
#media (min-width: 34em) {
ul {
flex-flow: row wrap;
justify-content: space-between;
align-items: flex-start;
}
li {
flex: 1;
}
#main {
flex: 0 0 100vw;
}
}
#media (min-width: 48em) {
ul {
justify-content: flex-end;
align-items: baseline;
}
li {
flex: none;
}
#main {
flex: 1 0 auto;
text-align: left;
}
}
<ul>
<!-- Should be as far left as possible -->
<li id="main">Some Logo <span>Some tag line.</span></li>
<!-- Should be as far right as possible -->
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>
Essentially you need a row container with two child columns
container is a flexible div
column one is a flexed div with the logo
column two is a flexible ul with flexed li's
AND 'justify-content: space-between' to move the columns to the far ends
Check my snippet (full page)!
.container,
.menu {
display: flex;
}
.container {
justify-content: space-between;
width: 100%;
}
.menu {
padding: 0;
margin: 0;
list-style: none;
}
li,
.logo {
margin: 0 8px;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
#main {
font-size: 2rem;
}
#main span {
font-size: 1rem;
}
<div class="container">
<div id="main" class="logo">Some Logo <span>Some tag line.</span>
</div>
<ul class="menu">
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>
</div>
JSfiddle Demo
Wrap a ul over the rest of the list items and use nested flex container. This is to provide flexbox to act on two elements.
Use justify-content: space-between on the main flexbox parent to equally space the two elements.
.parent-menu {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
/* Modify */
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
li {
margin: 0 8px;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
#main {
font-size: 2rem;
}
#main span {
font-size: 1rem;
}
.right-menu {
display: flex;
/* Add */
}
<ul class="parent-menu">
<!-- Should be as far left as possible -->
<li id="main">Some Logo <span>Some tag line.</span>
</li>
<ul class="right-menu">
<!-- Should be as far right as possible -->
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>
</ul>
One posibility is to set a right margin on the first element
ul {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
li {
margin: 0 8px;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
#main {
font-size: 2rem;
margin-right: auto; /* create a right margin as needed */
}
#main span { font-size: 1rem; }
#spacer {
visibility: hidden;
flex-grow: 1;
}
<ul>
<!-- Should be as far left as possible -->
<li id="main">Some Logo <span>Some tag line.</span></li>
<!-- Should be as far right as possible -->
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>