I am working on a web project for school, which brings me to a dead end at the moment. I am currently building a navigation bar for my pages and I am looking to nest a logo image to the inside left portion of the navbar. Any suggestions would be great!
Note: I apologize ahead of time, I could not figure out jsfiddle. Too many dang errors.
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
background: lightblue;
}
small {
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
}
h1 {
text-align: center;
padding: 50px 0;
font-weight: 800;
margin: 0;
letter-spacing: -1px;
color: inherit;
font-size: 40px;
}
h2 {
text-align: center;
font-size: 30px;
margin: 0;
font-weight: 300;
color: inherit;
padding: 50px;
}
.center {
text-align: center;
}
section {
height: 50vh;
}
/* NAVIGATION */
nav {
width: 60%;
margin: 0 auto;
background: #d67ca8;
padding: .25px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: black;
font-weight: 800;
text-transform: uppercase;
margin: 0 1px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover,
nav.fill ul li a.active {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after,
nav.fill ul li a.active:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
/* IMAGES */
#navlogo {}
<html>
<head>
<title>Title | Home</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel="icon" type="text/css" sizes="32x32" href="images/favicon1-32x32.png" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<meta charset="utf-8" />
</head>
<body>
<nav class="fill">
<ul>
<li>
<img id="navlogo" src="images/logo-72x72.png"></img>
<li>Home
</li>
<li>About
</li>
<li>Downloads
</li>
<li>More
</li>
<li>Contact
</li>
</ul>
</nav>
</body>
</html>
Hello I change some HTML code which is not proper and some style to make exact
you want.
I hope this code will help you.
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
background: lightblue;
}
small {
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
}
h1 {
text-align: center;
padding: 50px 0;
font-weight: 800;
margin: 0;
letter-spacing: -1px;
color: inherit;
font-size: 40px;
}
h2 {
text-align: center;
font-size: 30px;
margin: 0;
font-weight: 300;
color: inherit;
padding: 50px;
}
.center {
text-align: center;
}
section {
height: 50vh;
}
/* NAVIGATION */
.logo{
float: left;
max-width: 50px;
width: 100%;
height:50px;
display: inline-block;
}
.logo a{
max-width: 100%;
width: 100%;
display: block;
}
.logo a img{
max-width: 100%;
height: auto;
}
nav {
width: 60%;
margin: 0 auto;
background: #d67ca8;
padding: .25px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: black;
font-weight: 800;
text-transform: uppercase;
margin: 0 1px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover,
nav.fill ul li a.active {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after,
nav.fill ul li a.active:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
<html>
<head>
<title>Title | Home</title>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel="icon" type="text/css" sizes="32x32" href="images/favicon1-32x32.png" />
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<meta charset="utf-8" />
</head>
<body>
<nav class="fill">
<ul>
<div class="logo"><img src="images/logo-72x72.png"></div>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Contact</li>
</ul>
</nav>
</body>
</html>
Not likely to fix your issue - but in the interest of teaching - you are trying to nest a series of li's inside another one - this is not correct - you need to nest a UL inside the li. - also img tags are self closing so you us /> and also you should add an ALT text to all of your image (and also size attributes..
Note that I do not recommend doing this way - but to answer your query regarding nesting - it is fine to nest a ul with li's inside an li - but not naked li's on their own.
<nav class="fill">
<ul>
<li>
<img id="navlogo" src="images/logo-72x72.png" alt ="logo" width="72" height ="72"/>
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Contact</li>
</ul>
</li>
</ul>
</nav>
<img id="navlogo" class = "brand" src="images/logo-72x72.png"></img>
add name for class eg:brand and,try this
.brand {height: 25px;}
Related
I am trying to create a horizontal navbar with a logo on the left and the menu items on the right of the navbar. I can find the basic setup for this, but what I cannot find is how to create sub menus off of some of the parent links :( here is what I have so far, I am kinda new - so please, if you can, be gentle k :)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: green;
}
header {
height: 100px;
background-color: white;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 79px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Add your custom styles below to change appearance of links */
color: black;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked~nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
#media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: -10px;
background-color: transparent;
}
nav ul {
max-height: 70px;
padding: 15px 0;
text-align: right;
}
nav ul li {
display: inline-flex;
padding-left: 20px;
}
<header class="menu">
<div class="menu-wrap">
<img src="logoHOLD.gif" class="logo-img" alt="Logo">
<input type="checkbox" id="checkbox">
<label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
<nav>
<ul>
<li>Home</li>
<li>Topics
<ul>
<li>Item One
<li>Item Two
<li>Item Three
</ul>
</li>
<li>Commentaries</li>
<li>Donate</li>
<li>Something</li>
</ul>
</nav>
</div>
</header>
What you'll need to do is assign a class or id to the parent ul that has the other ul you want to appear as a dropdown and give it a relative position. Then, give the child ul (the dropdown element) absolute positioning and play around with transform / top / opacity values. That's one way to do it.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
background-color: green;
}
header {
height: 100px;
background-color: white;
padding: 10px 0;
}
.menu-wrap {
display: flex;
justify-content: space-between;
padding: 0 15px;
}
.logo-img {
height: 79px;
}
.menu-icon {
font-size: 2.4em;
color: #ffffff;
line-height: 50px;
}
nav {
position: absolute;
background-color: #3D4852;
top: 70px;
left: 0;
width: 100%;
}
nav ul {
list-style-type: none;
}
nav ul li {
padding: 0 15px;
}
nav ul li a {
display: inline-block;
padding: 12px;
/* Add your custom styles below to change appearance of links */
color: black;
text-decoration: none;
letter-spacing: 0.05em;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
nav ul li a:hover,
nav ul li a:focus {
color: #eb6f4a;
}
#checkbox {
display: none;
}
#checkbox:checked~nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
#media (min-width: 768px) {
.menu-icon {
display: none;
}
nav {
position: relative;
top: -10px;
background-color: transparent;
}
nav ul {
max-height: 70px;
padding: 15px 0;
text-align: right;
}
nav ul li {
display: inline-flex;
padding-left: 20px;
}
.dd-parent {
position: relative;
}
.dd-list {
position: absolute;
top: 25px;
left: 0;
width: 100%;
transform: scaleY(0);
opacity: 0;
transition: .3s all ease;
transform-origin: top;
}
.dd-list li {
text-align: left;
background: DarkOrchid;
color: white;
}
.dd-list li:not(:first-of-type) {
border-top: 2px solid black;
}
.dd-parent:hover > .dd-list {
transform: none;
opacity: 1;
}
<header class="menu">
<div class="menu-wrap">
<img src="logoHOLD.gif" class="logo-img" alt="Logo">
<input type="checkbox" id="checkbox">
<label for="checkbox"><i class="fa fa-bars menu-icon"></i></label>
<nav>
<ul>
<li>Home</li>
<li class="dd-parent">Topics
<ul class="dd-list">
<li>Item One
<li>Item Two
<li>Item Three
</ul>
</li>
<li>Commentaries</li>
<li>Donate</li>
<li>Something</li>
</ul>
</nav>
</div>
</header>
I was trying to apply some style to the active item in an HTML navigation bar, which is same as the a tag for the same.
To experiment this, I have taken the example from http://cssdeck.com/labs/css-hover-effect
Below is my modified code, where I basically created a new class "active" and replicated the same style for a:
HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel = "stylesheet" type = "text/css" href = "CSS.css">
</head>
<body>
<section style="background: #e74c3c; color: #fff;">
<h2>Underline Stroke</h2>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
</section>
</body>
CSS code:
.center {
text-align: center;
}
section {
height: 100vh;
}
/* NAVIGATION */
nav {
width: 80%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a, nav ul li a.active {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before,
nav ul li a.active:after,
nav ul li a.active:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a,
nav.stroke ul li a.active,
nav.fill ul li a.active {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after,
nav.stroke ul li a.active:after,
nav.fill ul li a.active:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:hover:after {
width: 100%;
}
nav.fill ul li a,
nav.fill ul li a.active {
transition: all 2s;
}
nav.fill ul li a:after,
nav.fill ul li a.active:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
Unfortunately, the styles are not getting reflected in the "active" class in the navigation menu.
How to fix the error code?
Points you need to consider:
If you're going to apply the same styles for the anchor tag and the anchor tag with the class active, you don't need to mention the active classes explicitly. It applies it on all regardless of that.
If you want to have some other styles which should be applied specifically for only active class, you need to define that like I have just for demonstration changed the color of active class component to red.
.active{
...
}
Third, you got the spelling of active wrong in your html.
.center {
text-align: center;
}
section {
height: 100vh;
}
/* NAVIGATION */
nav {
width: 80%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before{
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a{
position: relative;
}
nav.stroke ul li a:not(.active):after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after{
width: 100%;
}
.active{
color: #555;
}
.active:after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
content: '.';
background: #aaa;
height: 1px;
}
<section style="background: #e74c3c; color: #fff;">
<h2>Underline Stroke</h2>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
</section>
Update:
These two CSS styles have been updated to have the hover effect on load on the active by default.
nav.stroke ul li a:not(.active):after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after{
width: 100%;
}
.active{
color: #555;
}
.active:after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
content: '.';
background: #aaa;
height: 1px;
}
It looks like you don't have any different styles to apply to just your active class. All of your styles apply to both a element and the a.active. If you want your a.active elements to be different, apply different styles.
a {
color: #fff;
}
a.active {
color: #34dd42;
}
As the previous answer said having both a and a.active on the css selector is redundant and unnecessary. Simply applying the styles to just the a element will cover both.
I'm wondering why (looking to achieve a drop down menu), my nav is not aligned horizontally, I've looked for every error I know, obviously didn't find anything. Can anyone help me to find the error? Or a way which I can use to make that nav aligned? :)
body {
background: #182530;
}
.clearfix:after {
display: block;
clear: both;
}
.menu-wrap {
width: 100%;
box-shadow: 0px 1px 3px #000000;
background: #ffffff;
}
.menu {
width: 1000px;
margin: 0px auto;
}
.menu li {
margin: 0px;
list-style: none;
font-family: helvetica;
font-weight: bold;
color: #000000;
}
.menu a {
transition: all linear 0.15s;
color: #000000;
text-decoration: none;
}
.menu li:hover>a,
.menu .current-item>a {
text-decoration: none;
color: #be5b70;
}
menu>ul>li {
float: left;
display: inline-block;
position: relative;
font-size: 19px;
}
.menu>ul>li>a {
padding: 10px 40px;
display: inline-block;
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.4);
}
.menu>ul>li:hover>a,
.menu>ul>.current-item>a {
background: #2e2728;
}
.submenu {
width: 10%;
padding: 5px 0px;
position: absolute;
right: auto;
z-index: -1;
opacity: .0;
transition: opacity linear 0.15s;
background: #2e2728;
}
.menu li:hover .submenu {
z-index: 1;
opacity: 1;
}
.submenu li a {
display: block;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Test Page
</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css">
</head>
<body>
<header>
<div class="menu-wrap">
<nav class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>
Projects
<ul class="submenu">
<li>WebIdentity</li>
<li>LogoDesign</li>
<li>Branding</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</header>
</body>
</html>
How can I align my nav? Where is the error?
maybe you need
.menu > ul > li {
display: inline-block;
}
I fixed the code just by adding
nav ul li {
display:inline;
}
Here is a working fiddle
On my home page the dropdown ul looks exactly how I want it to:
But on all my other pages the ul looks much bigger like this:
Here is the HTML for the home page:
<header id="header" class="alt">
<h1><strong>South Somerset Motocross Club</strong></h1>
<nav id="nav">
<ul>
<li>Home</li>
<li><a>Info</a>
<ul class="alt">
<li>Club Rules</li>
<li>Pre-Race Bike Check</li>
<li>Job Descriptions</li>
<li>Race Fees</li>
<li>Groups And Ages</li>
</ul>
</li>
<li><a>About Us</a>
<ul class="alt">
<li>Our Heritage</li>
<li>Committee</li>
</ul>
</li>
<li>News</li>
<li>Fixtures</li>
</ul>
</nav>
</header>
Here is the HTML for the other page:
<header id="header">
<h1><strong>South Somerset Motocross Club</strong></h1>
<nav id="nav">
<ul>
<li>Home</li>
<li><a>Info</a>
<ul class="alt">
<li>Club Rules</li>
<li>Pre-Race Bike Check</li>
<li>Job Descriptions</li>
<li>Race Fees</li>
<li>Groups And Ages</li>
</ul>
</li>
<li><a>About Us</a>
<ul class="alt">
<li>Our Heritage</li>
<li>Committee</li>
</ul>
</li>
<li><a>News</a></li>
<li>Fixtures</li>
</ul>
</nav>
</header>
Here is the CSS for both:
#header {
background-color: #fff;
border-bottom: solid 1px rgba(144, 144, 144, 0.25);
box-shadow: 0px 0.0375em 0.125em 0px rgba(0, 0, 0, 0.05);
color: #000;
cursor: default;
font-size: 1.25em;
height: 4.5em;
left: 0;
line-height: 4.4em;
position: fixed;
text-transform: uppercase;
top: 0;
width: 100%;
z-index: 10000;
z-index: 10001;
}
#header a {
color: #000;
}
#header h1 {
color: #000;
font-weight: 400;
height: inherit;
left: 1.25em;
line-height: inherit;
margin: 0;
padding-left: 10px;
padding-right: 10px;
position: absolute;
top: 0;
}
#header nav {
height: inherit;
line-height: inherit;
position: absolute;
right: 1.25em;
top: 0;
vertical-align: middle;
}
#header nav ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#header nav ul li {
color: #fff;
display: inline-block;
padding-top: 0;
padding-bottom: 0;
padding-left: 10px;
padding-right: 10px;
margin-left: 1em;
}
#header nav ul li ul {
display: none;
padding: 0;
margin: 0;
background-color: #eee;
border-radius: 4px;
}
#header nav ul li:hover ul {
display: block;
position: absolute;
}
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 0;
padding-right: 50px;
display: block;
color: black;
font-size: 12pt;
}
#header nav ul li ul li a {
color: #111;
padding: 0;
margin: 0;
display: block;
}
#header nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li:hover {
background-color: #3477ff;
}
#header nav ul li ul li:hover {
background-color: #3477ff;
}
#header.alt nav ul li ul li a {
color: #000;
padding: 0;
display: block;
}
#header nav ul li a {
-moz-transition: color 0.1s ease-in-out;
-webkit-transition: color 0.1s ease-in-out;
-ms-transition: color 0.1s ease-in-out;
transition: color 0.1s ease-in-out;
color: #000;
display: inline-block;
text-decoration: none;
}
#header nav ul li a:hover {
color: #000;
}
#header nav ul li .button {
border-color: rgba(144, 144, 144, 0.25);
box-shadow: none;
height: 3em;
line-height: 2.9em;
margin-bottom: 0;
padding: 0 1.5em;
position: relative;
top: -0.075em;
vertical-align: middle;
}
#header .container {
position: relative;
}
#header .container h1 {
left: 0;
}
#header .container nav {
right: 0;
}
#header.alt {
background-color: transparent;
border: 0;
box-shadow: none;
height: 3.25em;
line-height: 3.25em;
position: absolute;
}
#header.alt h1 {
color: #ffffff;
left: 2.5em;
top: 2em;
}
#header.alt h1 a {
color: #FFF;
}
#header.alt nav {
right: 2em;
top: 2em;
}
#header.alt nav a {
color: #ddd;
}
#header.alt nav a:active, #header.alt nav a:hover {
color: #FFF;
}
#header.alt .button {
border-color: rgba(255, 255, 255, 0.5);
color: #ffffff !important;
}
#media screen and (max-width: 980px) {
#header {
display: none;
}
}
I would like the other page's <ul> elements to be the same size as the home page but I can't seem to find any extra margins or padding on them.
It is because of the alt class. The ul li ul li gets a line-height from the alt class.
So force the same line-height upon the #header nav ul li ul li by adding the same line-height. Which is line-height: 3.25em;.
The issue is down to your line heights - they are set on #header and #header.alt to different values:
#header.alt:
line-height: 3.25em;
#header:
line-height:4.4em;
This is causing the difference you are seeing in your nav links.
I am currently trying to create a navbar that fills when hovered over a link. However, I would also like to have the link filled (or highlighted) while on the relative page. Any help would be much appreciated!
Note: This code has been retrieved from an open source.I am new learner of web technologies and working for a web project.
/*NAVIGATION */
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
small {
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
}
h1 {
text-align: center;
padding: 50px 0;
font-weight: 800;
margin: 0;
letter-spacing: -1px;
color: inherit;
font-size: 40px;
}
h2 {
text-align: center;
font-size: 30px;
margin: 0;
font-weight: 300;
color: inherit;
padding: 50px;
}
.center {
text-align: center;
}
section {
height: 100vh;
}
nav {
width: 60%;
margin: 0 auto;
background: #fff;
padding: 10px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after {
width: 100%;
}
nav.fill ul li a {
transition: all 2s;
}
nav.fill ul li a:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
/* Keyframes */
#-webkit-keyframes fill {
0% {
width: 0%;
height: 1px;
}
50% {
width: 100%;
height: 1px;
}
100% {
width: 100%;
height: 100%;
background: #333;
}
}
<section style="background: #2ecc71; color: rgba(0, 0, 0, 0.5);">
<h2>Nav bar test</h2>
<nav class="fill">
<ul>
<li>Home
</li>
<li>About
</li>
<li>Downloads
</li>
<li>More
</li>
<li>Contact
</li>
</ul>
</nav>
</section>
The best practice is just to add an "active" class to the current page button.
<li>Home</li>
And add "a.active" to every "a:hover" that you already have so it has the same css.
nav.fill ul li a:hover,
nav.fill ul li a.active { /* Here */
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after,
nav.fill ul li a.active:after { /* Here */
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:after { /* Here */
width: 100%;
}
Here is an jsfiddle live example: https://jsfiddle.net/884o5sjs/
(To get help faster, remember to create your own jsfiddle next time)
You could add the class="active" to the current page dynamically with php (suggested) or even with jQuery (not suggested), but since it looks like you are using ".html" you will have to add it manually on each page.
Hope this helps.
Looks like you've already achieved your first task of having it highlight when hovered. I would do this in php because that's the language I'm most comfortable, but then you'd also have to run a web server on your computer so hopefully you get some more helpful tips from some of the Jscript pros on here. If you do have to resort to php, one way I commonly do this is by having a variable on the page that lets the header know what page you're on, and then a few if statements that coorespond and apply a .current-page style.
I'm probably doing it the long way, but I just haven't learned Javascript yet.
the if statement would look like this within the li of the ul of the nav... <li <?php if ($title == "Home) { echo "class='current-page'"; } ?>>Home and so on for each element in the ul with the corresponding title, and title declarations in the body of the page.