0

I started with a white navbar background and as I scroll I change it to purple. Here, I want it to have white color of list items but I am unable to do that. Here's the full source codes in HTML, CSS and JS.

// jshint esversion: 6
window.onscroll = function() { myFunction(); };

let navbar = document.getElementsByClassName("navigation")[0];
let sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky");
  } else {
       navbar.classList.remove("sticky");
  }
}
/* ------------------------------------- */
/* BASIC RESET */
/* ------------------------------------- */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
     box-sizing: inherit;
     color: #777;
     background-color: #fff;
     font-family: 'Roboto', sans-serif;
     font-size: 1.8rem;
     font-weight: 400;
     line-height: 1.5;
}

.clearfix {zoom: 1;}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */

/* HTML contents */

h1, h2.header-heading, h2 {
     margin: 0;
     text-transform: uppercase;
}

h1 {
     font-size: 4.5rem;
     color: #fff;
     letter-spacing: .4rem;
     word-spacing: .5rem;
     font-weight: 300;
}

h2 {
     font-size: 3.5rem;
}

/* Links */

a {
     text-decoration: none;
     display: inline-block;
}

/* Buttons */

.btn {
     border: 1px solid #fff;
     border-radius: .3rem;
     font-size: 1.6rem;
     padding: 1.2rem 3.5rem;
     text-transform: uppercase;
     color: #fff;
     background-color: transparent;
     font-weight: bold;
     letter-spacing: .3rem;
     transition: all .2s;
}

.btn:hover {
     background-color: #fff;
     color: #000;
}

/* Utility classes */

.u-margin-top-small {
     margin-top: 2.5rem;
}

.u-text-align-center {
     text-align: center;
}

.u-inline-block {
     display: inline-block;
}

/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */

header {
     background-color: #353353;
     height: 98vh;
}

.hero-text-box {
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
}

h2.header-heading {
     font-size: 3.5rem;
     margin-top: 2rem;
     color: #FFE800;
     font-weight: 400;
}

/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */

.navigation {
     position: relative;
     padding: 1rem;
     border-bottom: .5px solid #777;
}

.logo-box {
     float: left;
}

.logo {
     color: #353353;
     text-transform: uppercase;
     font-weight: 700;
     font-size: 4rem;
     letter-spacing: .4rem;
     margin-left: 5rem;
}

nav {
     padding: 1rem;
}

.navbar {
     float: right;
     list-style: none;
     margin-right: 10rem;
     margin-top: 1.5rem;
}

.navbar li {
     display: inline-block;
}

.navbar li a {
     margin: 0 1rem;
     padding: .2rem .6rem;
     color: black;
     text-transform: uppercase;
     border-bottom: 2px solid transparent;
     transition: all .3s;
}

.navbar li a:hover {
     border-bottom: 2px solid red;
}

/* The sticky navbar */

.sticky {
     position: fixed;
     background-color: #353353;
     top: 0;
     width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
     <!-- Required meta tags -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <!-- Rubik fonts link -->
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap" rel="stylesheet">

     <!-- CSS links -->
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/styles.css">

     <title>Arun Bohra - Design Business Solutions</title>
</head>
<body>

     <header>
          <div class="hero-text-box u-text-align-center u-inline-block">
               <h1>Hello my name is Arun</h1>
               <h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2>
               <a href="#" class="btn u-margin-top-small u-inline-block">Who am I</a>
          </div>
     </header>

     <div class="navigation">
          <nav class="clearfix">
               <div class="logo-box">
                    <a href="#" class="logo">
                         Arun
                    </a>
               </div>

               <ul class="navbar">
                    <li><a href="#" class="navbar-lists">Home</a></li>
                    <li><a href="#" class="navbar-lists">About me</a></li>
                    <li><a href="#" class="navbar-lists">Skills</a></li>
                    <li><a href="#" class="navbar-lists">Projects</a></li>
                    <li><a href="#" class="navbar-lists">Contact</a></li>
               </ul>
          </nav>
     </div>

     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>

     <script src="js/index.js" charset="utf-8"></script>
</body>


</html>

Can anyone help me with that? I want to change the color of list items to white when my navbar has the sticky position.

Improve this question

4 Answers 4

Reset to default
1

Simply target sticky class to change link color like this: .navigation.sticky .navbar li a{color: #fff}

// jshint esversion: 6
window.onscroll = function() { myFunction(); };

let navbar = document.getElementsByClassName("navigation")[0];
let sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky");
  } else {
       navbar.classList.remove("sticky");
  }
}
/* ------------------------------------- */
/* BASIC RESET */
/* ------------------------------------- */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
     box-sizing: inherit;
     color: #777;
     background-color: #fff;
     font-family: 'Roboto', sans-serif;
     font-size: 1.8rem;
     font-weight: 400;
     line-height: 1.5;
}

.clearfix {zoom: 1;}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */

/* HTML contents */

h1, h2.header-heading, h2 {
     margin: 0;
     text-transform: uppercase;
}

h1 {
     font-size: 4.5rem;
     color: #fff;
     letter-spacing: .4rem;
     word-spacing: .5rem;
     font-weight: 300;
}

h2 {
     font-size: 3.5rem;
}

/* Links */

a {
     text-decoration: none;
     display: inline-block;
}

/* Buttons */

.btn {
     border: 1px solid #fff;
     border-radius: .3rem;
     font-size: 1.6rem;
     padding: 1.2rem 3.5rem;
     text-transform: uppercase;
     color: #fff;
     background-color: transparent;
     font-weight: bold;
     letter-spacing: .3rem;
     transition: all .2s;
}

.btn:hover {
     background-color: #fff;
     color: #000;
}

/* Utility classes */

.u-margin-top-small {
     margin-top: 2.5rem;
}

.u-text-align-center {
     text-align: center;
}

.u-inline-block {
     display: inline-block;
}

/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */

header {
     background-color: #353353;
     height: 98vh;
}

.hero-text-box {
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
}

h2.header-heading {
     font-size: 3.5rem;
     margin-top: 2rem;
     color: #FFE800;
     font-weight: 400;
}

/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */

.navigation {
     position: relative;
     padding: 1rem;
     border-bottom: .5px solid #777;
}

.logo-box {
     float: left;
}

.logo {
     color: #353353;
     text-transform: uppercase;
     font-weight: 700;
     font-size: 4rem;
     letter-spacing: .4rem;
     margin-left: 5rem;
}

nav {
     padding: 1rem;
}

.navbar {
     float: right;
     list-style: none;
     margin-right: 10rem;
     margin-top: 1.5rem;
}

.navbar li {
     display: inline-block;
}

.navbar li a {
     margin: 0 1rem;
     padding: .2rem .6rem;
     color: black;
     text-transform: uppercase;
     border-bottom: 2px solid transparent;
     transition: all .3s;
}

.navbar li a:hover {
     border-bottom: 2px solid red;
}

/* The sticky navbar */

.sticky {
     position: fixed;
     background-color: #353353;
     top: 0;
     width: 100%;
}

.navigation.sticky .navbar li a {
  color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
     <!-- Required meta tags -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <!-- Rubik fonts link -->
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap" rel="stylesheet">

     <!-- CSS links -->
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/styles.css">

     <title>Arun Bohra - Design Business Solutions</title>
</head>
<body>

     <header>
          <div class="hero-text-box u-text-align-center u-inline-block">
               <h1>Hello my name is Arun</h1>
               <h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2>
               <a href="#" class="btn u-margin-top-small u-inline-block">Who am I</a>
          </div>
     </header>

     <div class="navigation">
          <nav class="clearfix">
               <div class="logo-box">
                    <a href="#" class="logo">
                         Arun
                    </a>
               </div>

               <ul class="navbar">
                    <li><a href="#" class="navbar-lists">Home</a></li>
                    <li><a href="#" class="navbar-lists">About me</a></li>
                    <li><a href="#" class="navbar-lists">Skills</a></li>
                    <li><a href="#" class="navbar-lists">Projects</a></li>
                    <li><a href="#" class="navbar-lists">Contact</a></li>
               </ul>
          </nav>
     </div>

     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>

     <script src="js/index.js" charset="utf-8"></script>
</body>


</html>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You can simply target the element with this selector: .navigation.sticky > nav > ul > li > a and change the color to white. It will select the <a> element of the navbar list when the .navigation div has the .sticky class as well.

// jshint esversion: 6
window.onscroll = function() { myFunction(); };

let navbar = document.getElementsByClassName("navigation")[0];
let sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky");
  } else {
       navbar.classList.remove("sticky");
  }
}
/* ------------------------------------- */
/* BASIC RESET */
/* ------------------------------------- */
* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}

html { font-size: 62.5%; }

body {
     box-sizing: inherit;
     color: #777;
     background-color: #fff;
     font-family: 'Roboto', sans-serif;
     font-size: 1.8rem;
     font-weight: 400;
     line-height: 1.5;
}

.clearfix {zoom: 1;}
.clearfix:after {
    content: '.';
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

/* ------------------------------------- */
/* THE REUSABLE CONTENT */
/* ------------------------------------- */

/* HTML contents */

h1, h2.header-heading, h2 {
     margin: 0;
     text-transform: uppercase;
}

h1 {
     font-size: 4.5rem;
     color: #fff;
     letter-spacing: .4rem;
     word-spacing: .5rem;
     font-weight: 300;
}

h2 {
     font-size: 3.5rem;
}

/* Links */

a {
     text-decoration: none;
     display: inline-block;
}

/* Buttons */

.btn {
     border: 1px solid #fff;
     border-radius: .3rem;
     font-size: 1.6rem;
     padding: 1.2rem 3.5rem;
     text-transform: uppercase;
     color: #fff;
     background-color: transparent;
     font-weight: bold;
     letter-spacing: .3rem;
     transition: all .2s;
}

.btn:hover {
     background-color: #fff;
     color: #000;
}

/* Utility classes */

.u-margin-top-small {
     margin-top: 2.5rem;
}

.u-text-align-center {
     text-align: center;
}

.u-inline-block {
     display: inline-block;
}

/* ------------------------------------- */
/* THE HEADER SECTION */
/* ------------------------------------- */

header {
     background-color: #353353;
     height: 98vh;
}

.hero-text-box {
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
}

h2.header-heading {
     font-size: 3.5rem;
     margin-top: 2rem;
     color: #FFE800;
     font-weight: 400;
}

/* ------------------------------------- */
/* THE NAVBAR */
/* ------------------------------------- */

.navigation {
     position: relative;
     padding: 1rem;
     border-bottom: .5px solid #777;
}

.logo-box {
     float: left;
}

.logo {
     color: #353353;
     text-transform: uppercase;
     font-weight: 700;
     font-size: 4rem;
     letter-spacing: .4rem;
     margin-left: 5rem;
}

nav {
     padding: 1rem;
}

.navbar {
     float: right;
     list-style: none;
     margin-right: 10rem;
     margin-top: 1.5rem;
}

.navbar li {
     display: inline-block;
}

.navbar li a {
     margin: 0 1rem;
     padding: .2rem .6rem;
     color: black;
     text-transform: uppercase;
     border-bottom: 2px solid transparent;
     transition: all .3s;
}

.navbar li a:hover {
     border-bottom: 2px solid red;
}

/* The sticky navbar */

.sticky {
     position: fixed;
     background-color: #353353;
     top: 0;
     width: 100%;
}

.navigation.sticky > nav > ul > li > a {
  color: white!important;
}
<!DOCTYPE html>
<html lang="en">
<head>
     <!-- Required meta tags -->
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <!-- Rubik fonts link -->
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;700&display=swap" rel="stylesheet">

     <!-- CSS links -->
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/styles.css">

     <title>Arun Bohra - Design Business Solutions</title>
</head>
<body>

     <header>
          <div class="hero-text-box u-text-align-center u-inline-block">
               <h1>Hello my name is Arun</h1>
               <h2 class="header-heading u-margin-top-small">I'm a front-end developer</h2>
               <a href="#" class="btn u-margin-top-small u-inline-block">Who am I</a>
          </div>
     </header>

     <div class="navigation">
          <nav class="clearfix">
               <div class="logo-box">
                    <a href="#" class="logo">
                         Arun
                    </a>
               </div>

               <ul class="navbar">
                    <li><a href="#" class="navbar-lists">Home</a></li>
                    <li><a href="#" class="navbar-lists">About me</a></li>
                    <li><a href="#" class="navbar-lists">Skills</a></li>
                    <li><a href="#" class="navbar-lists">Projects</a></li>
                    <li><a href="#" class="navbar-lists">Contact</a></li>
               </ul>
          </nav>
     </div>

     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>
     <h1>This is the primary heading.</h1>

     <script src="js/index.js" charset="utf-8"></script>
</body>


</html>

Improve this answer

2 Comments

Can I do the same with the logo in the navbar.
For logo, you can use this selector: .navigation.sticky > nav > .logo-box > .logo
1

You can simply add some css to make it work:

.sticky .navbar-lists {
    color: white;
}

Css will update automatically your new style if it matches correctly your html tags. I would also advise you to put a transition when you change your UX/UI, users might be lost if it happens too quickly.

Improve this answer

1 Comment

Yes, I will do that. I'm just starting to do this. All the colors are for testing.
0

Change the styles for navbar li a with the below example. And add the new styles too.

.navbar:not(.light-navbar) li a {
    color: #000;
}

.light-navbar li a {
    color: #fff;
}

.navbar li a {
     margin: 0 1rem;
     padding: .2rem .6rem;
     text-transform: uppercase;
     border-bottom: 2px solid transparent;
     transition: all .3s;
}

Add the changes in JavaScript

// jshint esversion: 6
window.onscroll = myFunction;

let navbar = document.getElementsByClassName("navigation")[0];
let targetNav = document.querySelector('.navigation .navbar');
let sticky = navbar.offsetTop;

function myFunction () {
  if (window.pageYOffset >= sticky) {
       navbar.classList.add("sticky");
       targetNav.classList.add('light-navbar');
  } else {
       navbar.classList.remove("sticky");
       targetNav.classList.remove('light-navbar');
  }
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.