How to make a navigation bar with the company logo the centre - html

Layout of what I'mm trying to achieve
I've done the top half of the nav bar and I'm trying to do the second part where the boxes (represent words), which I have circled in the image. I'm trying to directly make that section below the logo sign centered like the image shows but I am unsure on how to do that.
body {
margin: 0;
font-weight: 800;
}
.container {
width: 80%;
height: 100%;
margin: 0 auto;
display: flex;
/* align-items: center; */
justify-content: center;
}
header {
background: #ffe9e3;
height: 100px;
}
.logo {
text-align: center;
margin: 0;
display: block;
}
.business {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
.menu {}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
<header>
<div class="container">
<h1 class="logo"><i>LOGO</i></h1>
<nav class=m enu>
<ul>
<li>Hair</li>
<li>Nails</li>
<li>Makeup</li>
<li>Face</li>
</ul>
</nav>
<nav class=b usiness>
<ul>
<li>List Your Business</li>
</ul>
</nav>
<<div class="menu">
<nav>
</nav>
</div>
</div>
</header>

I have done the way you wanted it to look
CSS Part :
* {
padding: 0;
margin: 0;
}
body {
background: #333333;
min-width: 100vw;
min-height: 100vh;
}
.header {
height: 150px;
background: pink;
}
.logo {
padding: 10px;
text-align: center;
}
.nav > ul {
display: flex;
justify-content: space-evenly;
padding: 10px;
margin-top: 20px;
}
.nav > ul > li {
width: 100px;
list-style: none;
border: 2px solid #000;
border-radius: 20px;
}
.nav > ul > li > a {
text-decoration: none;
color: #fff;
font-size: 1.3rem;
padding: 3px 5px;
display: flex;
justify-content: center;
}
check the whole code here: https://codepen.io/the-wrong-guy/pen/GRoyKMa?editors=1100
And you have made a lot of syntax errors like not giving double quotes to the class names

Related

Push a div to the right

I'm coding a menu in french but I need to move all the buttons (Home, About us...) to the right.
I tried with float: right; but it doesn't work.
Here is my Result :
My Result
The <a> Home, Informations, etc.. are in a div. It's this div that i want to push right !
My Objective :
My Objective
My Code:
/*
==============================
NAVBAR
==============================
*/
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #9ebd11/*55d6aa*/
;
}
header::after {
content: '';
display: table;
clear: both;
}
.logo {
float: left;
/*padding: 10px 0;*/
}
nav {
float: right;
}
nav #navbar-ul {
margin: 0;
padding: 0;
list-style: none;
}
nav .navbar-li {
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav .navbar-button {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav .navbar-button:hover {
color: #000;
}
nav .navbar-button::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav .navbar-button:hover::before {
width: 100%;
}
nav #register-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #register-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav #login-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #login-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul {
list-style-type: none;
}
nav,
.container {
display: flex;
}
.connection {
line-height: 2;
}
<header>
<div class="container">
<h1 class="logo">
<img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image">
</h1>
<nav>
<ul id="navbar-ul">
<li class="navbar-li">Home</li>
<li class="navbar-li">Informations</li>
<li class="navbar-li">About us</li>
</ul>
<ul class="connection">
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</nav>
</div>
</header>
Thanks
Float won't work because your container is a flex-container.
Just use:justify-content:space-between`
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #9ebd11/*55d6aa*/
;
}
nav #navbar-ul {
margin: 0;
padding: 0;
list-style: none;
}
nav .navbar-li {
display: inline-block;
padding-top: 23px;
position: relative;
}
nav .navbar-button {
color: #444;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav .navbar-button:hover {
color: #000;
}
nav .navbar-button::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav .navbar-button:hover::before {
width: 100%;
}
nav #register-li {
/*display: inline-block;*/
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav #register-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
nav #login-li {
position: relative;
}
nav #login-button {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 14px;
}
ul {
list-style-type: none;
}
nav,
.container {
display: flex;
justify-content: space-between;
}
.connection {
line-height: 2;
}
<header>
<div class="container">
<h1 class="logo">
<img src="images/Logo/logo_gp_.png" width="100" alt="Description de l'image">
</h1>
<nav>
<ul id="navbar-ul">
<li class="navbar-li">Home</li>
<li class="navbar-li">Informations</li>
<li class="navbar-li">About us</li>
</ul>
<ul class="connection">
<li>S'inscrire</li>
<li>Se connecter</li>
</ul>
</nav>
</div>
</header>
Bootstrap's "Container" class has a max-width of something like 1800px(not certain of exact px count).
Try using "container-fluid". This should allow the nav items to move to the far right but will probably move your logo to the far left because of your .logo float-left css.
You can give the logo a margin-left that works for you.
Edit: I just noticed you've defined your own .container class in the css. And margin set to 0 auto. This is going to center your content within the container class and give you max width of 80% so your content won't reach the far right side of the browser unless you set this items to "position:absolute" and then give them the necessary margins.
Try changing your nav class from:
nav{
floaf: right;
}
to:
nav{
position: absolute;
right: 20px;
top: 0px;
}
This should force your nav element to position it's right 20px left of the parent elements right. Tested in chrome.
remove the float: right from your .nav and add float:left from .logo
Now add display:flex to your .logo and for your container add:
.container{
justify-content: space-between;
}
I have not tested this. Let me know if this is what you wanted.

Dropdown Menu Working in Safari but not Chrome

I made a dropdown menu and it works perfect in safari, however when I open it up in chrome i can't see the dropdown when I hover over the link. Why is this? I obviously need it to work in both browsers for compatibility reasons.
* {
box-sizing: border-box;
}
h1 {
font-family: 'Arial';
font-size: 6vw;
}
h3 {
font-family: Arial;
font-size: 1.7vw;
text-align: center;
}
p {
font-family: 'Arial';
font-size: 1.7vw;
}
p1 {
font-family: 'Arial';
font-size: 3vw;
}
.header {
background-color: whitesmoke;
padding: 20px;
text-align: center;
}
body {
margin: 0;
background: whitesmoke;
font-family: 'Arial';
font-weight: 300;
font-size: 100%;
}
.main-nav {
display: flex;
}
.main-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: sticky;
position: -webkit- sticky;
background-color: #DF744A;
top: 0;
width: 100%;
}
.main-nav li {
float: left;
}
.main-nav li a,
.dropdown {
display: block;
padding: 1.2em 2.2em;
text-decoration: none;
color: black;
text-align: center;
font-family: 'Arial';
font-size: 1.2vw;
}
.main-nav li a:hover {
background-color: #FFAE89;
}
li.products {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #DF744A;
min-width: 8vw;
z-index: 1;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
.products:hover .dropdown-content {
display: block;
}
.mainbody {
display: flex;
flex-wrap: wrap;
}
.updates {
flex: 20%;
background-color: #FEDCD2;
}
.section-1 {
flex: 80%;
background-color: whitesmoke;
display: flex;
}
.footer {
padding: 20px;
text-align: center;
background: #bfd8d2;
}
#media screen and (max-width: 600px) {
.main-body {
flex-direction: column;
}
}
.bands {
flex: 50%;
padding: 1em;
}
<div class="header">
<h1>Elle and Belle Design</h1>
<p1>Bespoke Handmade Headbands and Accessories</p>
</div>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li class="products">
Products
<div class="dropdown-content">
Headbands
Earrings
Other
</div>
</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="mainbody">
<div class="updates">
<h3>Updates</h3>
</div>
<div class="section-1">
<div class="bands">
<img src="oliviaband.jpg" alt="Olivia Band" width="330" height="400">
<img src="goldband.jpg" alt="Gold Band" width="330" height="400">
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
Few points:
.main-nav ul had overflow: hidden which was hiding .dropdown-content which overflows the ul.
li.products was missing position: relative this stops your .dropdown-content position: absolute spanning full browser width.
.dropdown-content I added left: 0 and right: 0 so it uses the width of the position: relative (li.products) parent.
I've updated your code in the below snippet.
* {
box-sizing: border-box;
}
h1 {
font-family: 'Arial';
font-size: 6vw;
}
h3 {
font-family: Arial;
font-size: 1.7vw;
text-align: center;
}
p {
font-family: 'Arial';
font-size: 1.7vw;
}
p1 {
font-family: 'Arial';
font-size: 3vw;
}
.header {
background-color: whitesmoke;
padding: 20px;
text-align: center;
}
body {
margin: 0;
background: whitesmoke;
font-family: 'Arial';
font-weight: 300;
font-size: 100%;
}
.main-nav {
display: flex;
}
/* This had overflow: hidden; */
.main-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
position: sticky;
position: -webkit- sticky;
background-color: #DF744A;
top: 0;
width: 100%;
}
.main-nav li {
float: left;
}
.main-nav li a,
.dropdown {
display: block;
padding: 1.2em 2.2em;
text-decoration: none;
color: black;
text-align: center;
font-family: 'Arial';
font-size: 1.2vw;
}
.main-nav li a:hover {
background-color: #FFAE89;
}
/* Requires position: relative;*/
li.products {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
left: 0;
right: 0;
background-color: #DF744A;
min-width: 8vw;
z-index: 5;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
}
.products:hover .dropdown-content {
display: block;
}
.mainbody {
display: flex;
flex-wrap: wrap;
}
.updates {
flex: 20%;
background-color: #FEDCD2;
}
.section-1 {
flex: 80%;
background-color: whitesmoke;
display: flex;
}
.footer {
padding: 20px;
text-align: center;
background: #bfd8d2;
}
#media screen and (max-width: 600px) {
.main-body {
flex-direction: column;
}
}
.bands {
flex: 50%;
padding: 1em;
}
<div class="header">
<h1>Elle and Belle Design</h1>
<p1>Bespoke Handmade Headbands and Accessories</p>
</div>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About Us</li>
<li class="products">
Products
<div class="dropdown-content">
Headbands
Earrings
Other
</div>
</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="mainbody">
<div class="updates">
<h3>Updates</h3>
</div>
<div class="section-1">
<div class="bands">
<img src="oliviaband.jpg" alt="Olivia Band" width="330" height="400">
<img src="goldband.jpg" alt="Gold Band" width="330" height="400">
</div>
</div>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
first issue is that the main-nav is hiding any content that flows outside of it's borders change to:
.main-nav ul {
overflow: visible;
}
Second is that the menu item you want to snap to needs to have position relative set, this tells any children with position absolute what it's reference container should be
li.products {
position: relative;
}
Lastly set the dropdowns position co-ordinates
.products:hover .dropdown-content {
top: 100%;
left: 0;
position: absolute;
}
.main-nav {
display: flex;
position: fixed;
top: 0;
background-color: rgba(0, 0, 0, 0.35);
z-index: 0.9;
height: 5vw;
width: 100%;
}
.main-nav ul {
list-style-type: none;
margin: 0 0 0 20vw;
padding: 0;
overflow: visible;
top: 0;
width: 100%;
height: 5vw;
}
.main-nav ul li {
display: inline-block;
text-align: center;
margin-left: 2vw;
height: 5vw;
}
.main-nav li {
float: left;
height: 5vw;
}
.logoimg {
height: 5vw;
width: auto;
float: left;
position: fixed;
margin-left: 1vw;
z-index: 1;
}
.main-nav li a, .dropdown {
display: block;
padding: 1.2em 2.2em;
text-decoration: none;
color: whitesmoke;
text-align: center;
font-family: 'tenderness';
font-size: 1.5vw;
height: 5vw;
border-bottom: 0.3vw solid transparent;
}
.main-nav li a:after {
display: block;
content: '';
border-bottom: 0.3vw solid whitesmoke;
transform: scaleX(0);
transition: transform 0.3s ease-in-out;
min-width: 6vw;
height: 1.15vw;
}
.main-nav li a:hover:after {
height: 1.15vw;
transform: scaleX(1);
}
li.products {
display: inline-block;
position: relative;
height: 5vw;
}
.dropdown-content {
display: none;
position: absolute;
background-color: rgba(0, 0, 0, 0.35);
min-width: 8vw;
z-index: 1;
left: 0;
right: 0;
}
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
text-align: center;
height: 5vw;
}
.products:hover .dropdown-content {
display: block;
}
This is my new code. I have added the bottom border to each li as you can see when the user hovers. However, I am wanting it to align with the bottom of the navigation bar, rather than directly under the text.
I have just put an estimated height in of 1.2vw so it looks just about right, however, it isn't exact and I was just wondering if there was a more precise and not so makeshift way of doing this?
Thanks
Mary

Anchors are not clickable somehow

I've been trying to make that website for YouTube views and like bot and the logo isn't clickable somehow.
navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: gray;
}
.navbar ul li {
float: left;
margin-right: 50px;
font-weight: 600;
font-size: 20px;
color: white;
}
li:first-child {
background-image: url(bolbol.png);
width: 150px;
height: 100px;
text-indent: -1400px;
background-size: 100% 100%;
}
li:nth-child(2) {
position: relative;
top: 25px;
}
<div class="navbar">
<ul>
<li>Logo</li>
<li>Liorgay</li>
<li>Nevo King</li>
</ul>
</div>
https://jsfiddle.net/6L3jak0s/
I think what you are trying to do is to make things look like a header, it's better with flexbox. Something like this maybe..
.navbar {
display: flex;
background-color: gray;
margin: 0;
padding: 1rem;
justify-content:space-between;
align-items:center;
}
.navbar ul {
list-style-type: none;
display: flex;
align-items:center;
}
.navbar ul li {
margin-right: 50px;
font-weight: 600;
font-size: 20px;
color: white;
}
li:first-child {
background-image: url(bololo.jpg);
background-size: 100% 100%;
}
.navbar a {
display: block;
}
<div class="navbar">
Logo
<ul>
<li>Liorgay</li>
<li>Nevo King</li>
</ul>
</div>
Remove this property "text-indent: -1400px;" from this rule "li:first-child Rule".
and then add the following CSS.
.navbar li a {
width: 100%;
height: 100%;
display: inline-block;
text-indent: -1400px;
}

Problems with position: absolute when applying it

I'm trying to create a navbar whith white bars on top of the options, but the position: absolute is not responding as I expect, even if I place it after a position: relative, the white bars are wider than the width of the options:As you can see here
This is the code I'm following from the tutorial, I would appreciate your help.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Another way to achieve the same:
Instead of using the pseudo element, you can use the property border-top along with padding-top to achieve the same, if what you need is the border width to be equal with the length of the option.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
border-top:5px solid #fff;
padding-top:10px;
}
nav a:hover {
color: black;
}
/*
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}*/
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Here is another way, in-case you need the width of all borders be same. You must give a fixed width to the pseudo element, instead of 100%.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
/*width: 100%;*/
width: 100px;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
Your line item element is wider than your link element which means that your white bar will copy the relatively positioned line item's width. If you look in inspector you can see this clearly.
The width
Use the border-top property instead on your links.
nav a{
color: white;
text-decoration: none;
border-top: solid 3px #fff;
padding-top: 35px
}
nav a:hover {
color: black;
}
nav a::before {
}
On nav a:before :
If you want to create it the same width as your text - substract the padding:
width: calc(100% - 80px);
or you want to place it the same size as your li item use:
left: 0;
You have to account for the 40px * 2 = 80 px of padding you have added to the li element.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: calc(100% - 80px);
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
/*delete padding */
margin-left: 70px;
position: relative;
}
nav a {
color: white;
text-decoration: none;
/*add this */
padding: 40px 0;
display: inline-block;
border-top: 5px solid transparent;
}
nav a:hover {
color: black;
/*and this*/
border-top: 5px solid white;
}
/*
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100px;
}
*/
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>
The nav a::before pseudo-element is a child of a::before. Pseudo-elements like ::before or ::hover are always children of the elements whose selectors preface them. You need to put the position:relative property on the rule for nav a. Currently, you have the position:relative property on the li element, which is wider than the a element.
You'll also need to add some other property to raise the line. I've added padding-top to solve that problem.
body {
margin: 0;
background: #222;
font-family: sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 auto;
}
header {
background: #151515;
}
.logo {
float: left;
padding: 10px 0;
}
nav {
float: right;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left: 70px;
padding: 40px;
position: relative;
}
nav a {
position: relative;
padding-top: 20px;
color: white;
text-decoration: none;
}
nav a:hover {
color: black;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: white;
position: absolute;
top: 0;
width: 100%;
}
<header>
<div class="container">
<img src="img1.png" style="max-width: 80px; margin-top: 0px;" alt="logo" class="logo">
<nav>
<ul>
<li>CONTACTO</li>
<li>REGISTRATE</li>
<li>INGRESAR</li>
</ul>
</nav>
</div>
</header>

Center photo and text in height <ul>

How am I able to center the photo with the text, without minimizing the photo itself?
I've tried; max-height: xx, but that wasn't it.
The photo is centered in height, but not the text. How's this possible?
http://jsfiddle.net/gLpqoamn/
.hoyre{
background-color:#f19f00;
}
.hoyre:hover{
background-color:#d98500;
}
header{
background-color: white;
}
.logo{
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
}
li {
float: left;
}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body{
margin:0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container{
max-width:1300px;
margin-left:auto;
margin-right:auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li><img src="http://i.imgur.com/QAEzQxp.png" class="logo"></li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre" style="float:right;">Donate</li>
</ul>
</div>
</header>
</body>
I would use flex on the ul, then you can use align-items to vertically center or position the children. A margin-left: auto on the last link will push it to the right, then you can move the background color to the link to keep it from stretching the height of the parent
.hoyre {
margin-left: auto;
background-color: #f19f00;
min-height: 100%;
align-self: stretch;
display: flex;
align-items: center;
}
.hoyre:hover {
background-color: #d98500;
}
header {
background-color: white;
}
.logo {
width: 57px;
height: 34px;
padding: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
display: flex;
align-items: center;
}
li {}
li a {
display: block;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
}
li a:hover {
color: #f19f00;
}
body {
margin: 0;
font-family: 'Roboto', sans-serif;
background-color: #333;
}
.container {
max-width: 1300px;
margin-left: auto;
margin-right: auto;
}
.active {
position: relative;
}
</style>
<body>
<header>
<div class="container">
<ul>
<li>
<img src="http://i.imgur.com/QAEzQxp.png" class="logo">
</li>
<li>Home</li>
<li>Contact</li>
<li>About</li>
<li class="hoyre">Donate</li>
</ul>
</div>
</header>
</body>
For using height:100% in your css you should define parent element height first. then you change li element to behave like table and fill 100% height.
Update your styles like this(new styles have comment in front of them):
li {
float: left;
height: 100%; /*fill height */
display: table; /* behave as table*/
}
li a {
display: table-cell; /* behave as table-cell then you can use vertical alignment*/
vertical-align: middle;
text-align: center;
padding: 20px 20px;
text-decoration: none;
color: black;
height: 100% ; /*fill height */
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #fff;
text-transform: uppercase;
width: 100%;
color: black;
height: 80px; /*define height for using height:100% for child elements */
}