so I've tried a few different things out. But ultimately no success. I'm trying to change the colour of the "Home" link to stay a different colour than the rest when we are specifically on the homepage. So for example, say I'm on the homepage, I specifically want that colour to be orange for the home link, and then when I click on About link, about link changes to orange and the home goes to default white
Html:
<!--Header-->
<header class="header-main">
<!--Navigation menu-->
<nav class="navigation">
<!--Bakingwithwill Logo-->
<img class="logo" src="imgs/bww.png" alt="Bakingwithwill" />
<!--Navigation links-->
<div class="nav-links">
<!--Unordered list of navigation items-->
<ul class="nav-menu">
<li id="active-home" class="nav-items">Home</li>
<li class="nav-items">About</li>
<li class="nav-items">Order</li>
<li class="nav-items">Contact</li>
<li class="nav-items">Cart</li>
</ul>
</div>
<div class="footer-nav">
<!--Footer portion of the side navbar-->
<div class="nav-social">
<!--Navigation of Bakingwithwill social media accounts-->
<ul class="nav-social-list">
<li class="social-icons">
<i class="fab fa-facebook"></i>
</li>
<li class="social-icons">
<i class="fab fa-instagram"></i>
</li>
</ul>
</div>
<p class="copyright">Copyright Bakingwithwill</p>
<!--Copyright-->
</div>
</nav>
<img class="header-banner" src="imgs/bww-home-banner.jpg" alt="Bakingwithwill bread banner"/>
<!--Main image-->
<div class="main">
<!--Contents outside the side navbar representing header page-->
<h2 class="baking-heading">Bakingwithwill</h2>
<h1 class="welcome-heading">Welcome!</h1>
<h2 class="intro-heading">Get a slice of the best bread in<br>
Chatham-Kent!</h2>
</div>
</header>
CSS:
/*Base styles*/
body {
font-family: 'Oswald', sans-serif;
}
h1 {
font-family: 'Satisfy', cursive;
}
/*Home styles*/
header {
width: 100%;
height: 585px;
}
/*Side bar navigation menu*/
.navigation {
height: 100%;
width:160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #3D3732;
overflow-x: hidden;
padding-top: 20px;
opacity: 90%;
}
.navigation a {
text-decoration: none;
}
.logo {
border-radius: 50%;
height: 70px;
width: 70px;
margin-top: 10px;
margin-left: 45px;
}
#active-home:link, #active-home:visited {
color:#E88F2A !important;
}
.navigation li, p {
text-decoration: none;
color: #FFFFFF;
display: block;
text-align: center;
}
.navigation .nav-items {
padding-right: 30px;
padding-top: 10px;
text-align: center;
}
.navigation .social-icons {
list-style-type: none;
text-align: center;
display: inline;
font-size: 15px;
padding: 5px;
margin-top: 50px;
color: #FFFFFF;
margin-left: 15px;
text-decoration: none;
}
.navigation li:hover {
color: #E88F2A;
}
.navigation p {
font-size: 10px;
text-align: center;
padding: 6px 8px 6px 16px;
}
.main {
margin-left: 160px;
padding: 0px 10px;
}
.footer-nav {
margin-top: 200px;
}
/*Social media icons*/
.navigation i {
text-decoration: none;
color: #FFFFFF;
}
.navigation i:hover {
color: #E88F2A;
}
/*Text overlaying the image*/
.baking-heading {
color: #E88F2A;
font-family: 'Satisfy', cursive;
position: relative;
margin-top: 40px;
padding-left: 50px;
font-size: 50px;
}
.welcome-heading, .intro-heading {
font-family: 'Oswald', sans-serif;
position: relative;
}
.welcome-heading, .baking-heading {
transform: rotate(-13deg);
}
.welcome-heading {
padding-left: 130px;
font-size: 50px;
color: #FFFFFF;
}
.intro-heading {
padding-top: 200px;
font-size: 50px;
text-align: center;
color: #FFFFFF;
}
.header-banner {
/*Image styles*/
margin-top: -40px;
position: absolute;
width: 100%;
height: 585px;
}
So for example, say I'm on the homepage, I specifically want that
colour to be orange for the home link, and then when I click on About
link, about link changes to orange and the home goes to default white
One CSS-only approach is to:
add a class to the <body> element of each page
add classes to each of your links (or to the list-items containing the links)
Home Page:
<body class="home-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
About Page:
<body class="about-page">
<ul class="nav-menu">
<li class="nav-items home">Home</li>
<li class="nav-items about">About</li>
<li class="nav-items order">Order</li>
<li class="nav-items contact">Contact</li>
<li class="nav-items cart">Cart</li>
</ul>
Then you can change the color of the relevant link on each page:
.nav-items a {
color: white;
}
.home-page .nav-items.home a,
.about-page .nav-items.about a {
color: orange;
}
You need to add a class to the active link and #id is not recommended for styling. Also, the pseudo classes that you're using is blocking your desired outcome. Try changing :
#active-home:link,
#active-home:visited {
color: #e88f2a !important;
}
to:
.active {
color: #e88f2a !important;
}
Afterwards, place the .active class into your link code for each page. So for home it would be:
<li class="nav-items active">Home</li>
and for your about page:
<a href="#">
<li class="nav-items">Home</li>
</a>
<a href="about.html">
<li class="nav-items active">About</li>
</a>
and so on...
Related
Here's my HTML:
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
logo
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</nav>
</body>
Here's my CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Josefin Sans", sans-serif;
}
.navbar {
font-size: 18px;
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: black;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
display: block;
}
And this is the output I'm getting:
I'd like my output to be like this instead (ignore the spacing difference, just my screenshot, but have them split in the center like so):
What's the best way of doing this?
I'm thinking of creating another unorder list and moving it, but I don't know how to do that.
Make use of justify-content: space-between;.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
.nav-links, .logo {
text-decoration: none;
color: #000;
}
.navbar {padding: 20px;}
.navbar, ul {display: flex; flex-direction:row;}
ul li {padding: 0 5px;}
.wrapper {display:flex; justify-content: space-between; width:100%; }
<nav class="navbar">
logo
<div class="wrapper">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
</ul>
<ul class="ul2">
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</div>
</nav>
I have a unordered list in my HTML with 5 lists that all had with links on them that were working fine. It was working fine until I added another unordered list, but i have no links inside it. I even gave it a separate class.
Here is my markup/CSS:
ul {
margin: 0;
list-style-type: none;
color: white;
diplay: block;
padding-top: 20px;
padding-left: 350px;
font-family: "Economica", sans-serif;
font-size: 28px;
text-decoration: none;
}
ul li {
padding-left: 45px;
padding-right:45px;
display: inline;
text-decoration: none;
}
ul li a:hover {
font-weight:bold;
color:grey;
}
a {
text-decoration: none;
color:white;
}
<div id="mainPage" >
<img src="http://xoio.de/al_by_xoio1.jpg" alt="concert stadium" style="width:100%; position:absolute; padding-top:70px; height:930px">
<div id="navBar">
<div id="Logo">
<h1 style="font-weight:bold;"> Ice Arena </h1>
</div>
<ul id="select">
<li>
<a style="color:#ffe700;" href="#">Home</a>
</li>
<li>
Gallery
</li>
<li>
Order Form
</li>
<li>
The Arena
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
I've only added the code regarding the list and area of my problem.
Add position: relative; to ul, otherwise other elements are above it and prevent the link behavior.
ul {
margin: 0;
list-style-type: none;
color: white;
diplay: block;
padding-top: 20px;
padding-left: 350px;
font-family: "Economica", sans-serif;
font-size: 28px;
text-decoration: none;
/* added */
position: relative;
}
ul li {
padding-left: 45px;
padding-right: 45px;
display: inline;
text-decoration: none;
}
ul li a:hover {
font-weight: bold;
color: grey;
}
a {
text-decoration: none;
color: white;
}
<div id="mainPage">
<img src="http://xoio.de/al_by_xoio1.jpg" alt="concert stadium" style="width:100%; position:absolute; padding-top:70px; height:930px">
<div id="navBar">
<div id="Logo">
<h1 style="font-weight:bold;">Ice Arena</h1>
</div>
<ul id="select">
<li><a style="color:#ffe700;" href="#">Home</a></li>
<li>Gallery</li>
<li>Order Form</li>
<li>The Arena</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Try deleting the CSS property (position:absolute;) in line 3.
I encountered a problem when writing this code.
<body>
<header>
<div class="menu">
<div class="sayfa_ismi"><h1>PAGE TİTLE</h1></div>
<nav class="menues">
<ul>
<li><p>Home Page</p></li>
<li><p>Galery</p></li>
<li><p>Story</p></li>
<li><p>Where are the people</p></li>
<li><p>Contact</p></li>
</ul>
</nav>
</div>
</header>
</div>
</body>
in CSS
header{
position: fixed;
width: 100%;
height: 20%;
}
/*************************** title position ************************************/
.sayfa_ismi{
text-align: center;
}
/*************************** menue position************************************/
nav li{
display: inline-block;
margin: 0 8% 0 0;
}
nav{
margin: 0 0 0 15%;
}
/*************************** menu links************************************/
.menues a:link{
color:rgb(255,255,255);
text-decoration: none;
}
.menues a:hover{
color:blue;
background-color:white;
}
.menues a:visited{
color: blue;
background-color:#FFFFFF;
text-decoration: none;
}
/***** header font type and background color *****************************/
header{
background-color: rgb(59, 113, 255);
font-family: 'Andada', serif;
font-size: 110%;
}
I want Header's background color to be rgb(59, 113, 255) and I want the background color to be white when we come to link but don't.
How can I fix this?
You should remove p tag inside a tag.
Here is an updated fiddle: fiddle link
Hope this helps!
Try this
header {
position: fixed;
width: 100%;
}
.menues ul {
margin: 0;
padding: 0;
display: block;
}
.menues {
display: block;
margin: 0 auto;
width: 60%;
padding-bottom: 50px;
}
.menues li {
list-style: none;
float: left;
display: inline-block;
}
.menues a {
text-decoration: none;
padding: 5px 15px;
}
.menues a:hover {
text-decoration: none;
background: #ffffff;
border-radius: 4px;
}
/*************************** title position ************************************/
.sayfa_ismi {
text-align: center;
}
/*************************** menue position************************************/
nav li {
display: inline-block;
margin: 0 8% 0 0;
}
/***** header font type and background color *****************************/
header {
background-color: rgb(59, 113, 255);
font-family: 'Andada', serif;
font-size: 110%;
}
<body>
<header>
<div class="menu">
<div class="sayfa_ismi">
<h1>PAGE TİTLE</h1>
</div>
<nav class="menues">
<ul>
<li>Home Page</li>
<li>Galery</li>
<li>Story</li>
<li>Where are the people</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
</div>
</body>
this code will do
<body>
<header id="header">
<div class="menu">
<div class="sayfa_ismi">
<h1>PAGE TITLE</h1>
</div>
<nav class="menues">
<ul>
<li>
<a onmouseover="linkHover()" onmouseout="linkmouseout()" href="index.html" class="home">
<p>Home Page</p>
</a>
</li>
<li>
<a onmouseover="linkHover()" onmouseout="linkmouseout()" href="galery.html" class="galery">
<p>Galery</p>
</a>
</li>
<li>
<a onmouseover="linkHover()" onmouseout="linkmouseout()" href="stry.html" class="stry">
<p>Story</p>
</a>
</li>
<li>
<a onmouseover="linkHover()" onmouseout="linkmouseout()" href="herkes_nerede.html" class="where">
<p>Where are the people</p>
</a>
</li>
<li>
<a onmouseover="linkHover()" onmouseout="linkmouseout()" href="iletisim.html" class="iletisim">
<p>Contact</p>
</a>
</li>
</ul>
</nav>
</div>
</header>
<script>
var header = document.getElementById("header");
function linkHover() {
header.style.backgroundColor = "#fff";
}
function linkmouseout() {
header.style.backgroundColor = "rgb(59, 113, 255)";
}
</script>
</div>
</body>
Hello I'm a beginner and got a problem with my navigationbar in HTML. I've tried a lot but they are still unclickable...
Is there a mistake in my HTML?
<header>
<nav display: inline;>
<ul>
<li>
<navi><img src="images/header_logo.png" alt="Logo" href="index.html" width="40%" height="40%" /></navi>
</li>
<li>
<navi>
<z class="active" href="index.html">Startseite</z>
</navi>
</li>
<li>
<navi>
<z href="produkte.html">Produkte</z>
</navi>
</li>
<li>
<navi>
<z href="about.html">Über uns</z>
</navi>
</li>
<li>
<navi>
<z href="agb.html">AGB</z>
</navi>
</li>
</ul>
</nav>
or is the mistake in my CSS? It's probably not the best way to style it but it looks good in my eyes. However I cant click any links...
body {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
}
ul {
margin: 0px;
list-style: none;
padding: 0px;
overflow: hidden;
background-color: burlywood;
}
li navi {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li navi z {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li z:hover:not(.active) {
background-color: #deb27a;
}
Thanks for help
Here's the link for Your above Problem https://jsfiddle.net/kj0w9g76/
Reason:- for anchor tag we use 'a' not with 'z'
instead of navi tag we use nav tag as used in code below.
body {
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
ul {
margin: 0;
list-style: none;
padding: 0;
overflow: hidden;
background-color: burlywood;
position: relative;
z-index: 1;
}
li nav {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li nav z {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li a:hover:not(.active) {
background-color: #deb27a;
}
<header>
<nav style="display: inline;">
<ul>
<li>
<nav><a href="index.html" width="40%" height="40%" ><img src="images/header_logo.png" alt="Logo"/></a></navi>
</li>
<li>
<nav>
<a class="active" href="index.html">Startseite</a>
</nav>
</li>
<li>
<nav>
Produkte
</nav>
</li>
<li>
<nav>
Über uns
</nav>
</li>
<li>
<nav>
AGB
</nav>
</li>
</ul>
</nav>
</header>
You've a problem in your code, styles, anchors are not correct there is the correct code below.
* {
box-sizing: border-box;
}
body {
margin: 0px;
padding: 0px;
}
img {
max-width: 100%;
}
ul {
margin: 0px;
list-style: none;
padding: 0px;
overflow: hidden;
background-color: burlywood;
}
li nav {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li a {
float: left;
display: block;
text-align: center;
padding: 14px 30px;
margin-top: 40px;
color: white;
border: 2px solid white;
}
.active {
background-color: #deae6f;
}
li a:hover:not(.active) {
background-color: #deb27a;
}
<header>
<nav style="display: block;">
<ul>
<li>
<nav><img src="images/header_logo.png" alt="Logo" href="index.html" width="40%" height="40%" /></nav>
</li>
<li>
<nav>
<a class="active" href="index.html">Startseite</a>
</nav>
</li>
<li>
<nav>
Produkte
</nav>
</li>
<li>
<nav>
Über uns
</nav>
</li>
<li>
<nav>
AGB
</nav>
</li>
</ul>
</nav>
</header>
I want the position of my navigation to be fixed. But when I change the position to "fixed" in nav, it looks very weird.
Here are two examples:
Without fixed position: https://jsfiddle.net/Timowo/3nrvch3c/
<nav>
<ul>
<li class="category">Contact</li>
<li class="category">Work</li>
<li class="category active">Home</li>
<li class="logotext">Logo</li>
</ul>
</nav>
With fixed position: https://jsfiddle.net/Timowo/5aock5k1/
<nav style="position: fixed;">
<ul>
<li class="category">Contact</li>
<li class="category">Work</li>
<li class="category active">Home</li>
<li class="logotext">Logo</li>
</ul>
</nav>
What do I have to change so it's inline but also fixed?
Thanks!
With position:fixed the element will collapse to the width of the widest descendant..in the absence of a defined width.
Just set width:100%
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
background-color: red;
}
nav {
transition: all 0.2s ease-in-out;
position: fixed;
width: 100%;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
nav ul li.logo {
padding: 14px;
float: left;
}
nav ul li.logotext {
font-family: Futura;
color: white;
font-size: 1.3em;
padding: 28px;
text-shadow: 3px 3px black;
}
nav ul li.category a {
display: block;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
font-size: 1.2em;
float: right;
font-family: Futura;
text-shadow: 3px 3px black;
}
nav ul li.category:hover a {
background-color: #212121;
}
nav ul li.active a {
background-color: #212121;
}
<nav>
<ul>
<li class="category">Contact
</li>
<li class="category">Work
</li>
<li class="category active">Home
</li>
<li class="logotext">Logo</li>
</ul>
</nav>