Javascript or CSS problem?

I’m practicing a website tutorial right now and I have some visual issues with it.

What I wanted to do: I want the navigation buttons to be in the black when I scroll down my website. Before I scroll the navigation items are white:

However, the header/navigation whites out itself once I scrolled down. The navigation items are supposed to be black with the white background.

What I already tried:
I tried to change the rgba codes to dark black, but it still did not turn out. Could anyone hint anything I could try on?? I just left my javascript, HTML and css for this problem navigation part for your reference.

header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 40px 100px;
    z-index: 10000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.5s;
}
.sticky{
    background: #fff;
    padding: 10px 100px;
    box-shadow: 0 5px 20px rgba(103, 103, 167, 0.05);
}
header .logo{
    color: #fff;
    font-weight: 700;
    font-size: 2em;
    text-decoration: none;
}
header .sticky .logo{
    color: #111;
}
header .logo span{
    color: #ff0157;
}
header .navigation{
    position: relative;
    display: flex;
}
header .navigation li{
    list-style: none;
    margin-left: 30px;
}
header .navigation li a{
    text-decoration: none;
    color: #fff;
    font-weight: 300;
}
header .sticky .navigation li a{
    color: #111;
}
header .navigation li a:hover{
    color: #ff0157;
}
<script type="text/javascript">
            window.addEventListener('scroll',function(){
            const header = document.querySelector('header');
            header.classList.toggle('sticky',window.scrollY > 0);
            });
 
            function toggleMenu(){
            const menuToggle = document.querySelector('.menuToggle');
            const navigation = document.querySelector('.navigation');
  
            menuToggle.classList.toggle('active');
            navigation.classList.toggle('active');
            }
        </script>

<header>
            <a href="#" class="logo">Food <span>.</span></a>
            <ul class="navigation">
                <li><a href="#banner">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#expert">Expert</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </header>

Hi can you share the whole HTML file, so that I can see if anytging triggers on scroll, it would be easier to determine where is the issue exactly, in your css or js files.

Ok sure. I hope it’s not too much codes, here you go:

<!DOCTYPE html> 
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Food. Sample</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <a href="#" class="logo">Food <span>.</span></a>
            <ul class="navigation">
                <li><a href="#banner">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#menu">Menu</a></li>
                <li><a href="#expert">Expert</a></li>
                <li><a href="#testimonials">Testimonials</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </header>
        <section class="banner" id="banner">
            <div class="content">
                <h2>Always Choose Good</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
                <a href="#" class="btn">Our Menu</a>
            </div>
        </section>
        <section class="about" id="about">
            <div class="row">
                <div class="col50">
                    <h2 class="titleText"><span>A</span>bout Us</h2>
                    <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,</p>
                </div>
                <div class="col50">
                    <div class="imgBx">
                        <img src="imgs/img1.jpg" alt="">
                    </div>
                </div>
            </div>
        </section>

        <section class="menu" id="menu">
            <div class="title">
                <h2 class="titleText">Our <span>M</span>enu</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</p>
            </div>
            <div class="content">
                <div class="box">
                    <div class="imgBx">
                        <img src="imgs/menu1.jpg" alt="">
                    </div>
                    <div class="text">
                        <h3>Special Salads</h3>
                    </div>
                </div>
                <div class="box">
                    <div class="imgBx">
                        <img src="imgs/menu2.jpg" alt="">
                    </div>
                    <div class="text">
                        <h3>Special Salads</h3>
                    </div>
                </div>
                <div class="box">
                    <div class="imgBx">
                        <img src="imgs/menu3.jpg" alt="">
                    </div>
                    <div class="text">
                        <h3>Special Salads</h3>
                    </div>
                </div>
                <div class="box">
                    <div class="imgBx">
                        <img src="imgs/menu4.jpg" alt="">
                    </div>
                    <div class="text">
                        <h3>Special Salads</h3>
                    </div>
                </div>
                <div class="box">
                    <div class="imgBx">
                        <img src="imgs/menu5.jpg" alt="">
                    </div>
                    <div class="text">
                        <h3>Special Soup</h3>
                    </div>
                </div>
                <div class="box">
                    <div class="imgBx">
                        <img src="imgs/menu6.jpg" alt="">
                    </div>
                    <div class="text">
                        <h3>Special Pasta</h3>
                    </div>
                </div>
                <div class="title">
                    <a href="#" class="btn">View All</a>
                </div>
            </div>
        </section>

        <section class="expert" id="expert">
            <div class="title">
                <h2 class="titleText">Our Kitchen <span>E</span>xpert</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </div>
            <div class="content">
                <div class="box">
                    <div class="imgBx">
                        <img src="imgs/expert1.jpg">
                    </div>
                    <div class="text">
                        <h3>Someone Famous</h3>
                    </div>
                </div>
                <div class="box">
                    <div class="imgBx">
                        <img src="imgs/expert2.jpg">
                    </div>
                    <div class="text">
                        <h3>Someone Famous</h3>
                    </div>
                </div>
                <div class="box">
                    <div class="imgBx">
                        <img src="imgs/expert3.jpg">
                    </div>
                    <div class="text">
                        <h3>Someone Famous</h3>
                    </div>
                </div>
                <div class="box">
                    <div class="imgBx">
                        <img src="imgs/expert4.jpg">
                    </div>
                    <div class="text">
                        <h3>Someone Famous</h3>
                    </div>
                </div>
            </div>
        </section>

        <section class="testimonials" id="testimonials">
            <div class="title white">
                <h2 class="titleText">They <span>S</span>aid About Us</h2>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            </div>
            <div class="content">
              <div class="box">
                <div class="imgBx">
                    <img src="imgs/testi1.jpg">
                </div>
                <div class="text">
                    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
                    <h3>Someone Famous</h3>
                </div>
               </div>
               <div class="box">
                <div class="imgBx">
                    <img src="imgs/testi2.jpg">
                </div>
                <div class="text">
                    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
                    <h3>Someone Famous</h3>
                </div>
               </div>
               <div class="box">
                <div class="imgBx">
                    <img src="imgs/testi3.jpg">
                </div>
                <div class="text">
                    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
                    <h3>Someone Famous</h3>
                </div>
               </div>
            </div>
        </section> 
        
        <section class="contact" id="contact">
          <div class="title">
              <h2 class="titleText"><span>C</span>ontact us</h2>
              <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</p>
          </div>
          <div class="contactForm">
              <h3>Send Message</h3>
              <div class="inputBox">
                  <input type="text" placeholder="Email">
              </div>
              <div class="inputBox">
                <input type="text" placeholder="Name">
              </div>
              <div class="inputBox">
                <textarea placeholder="Name"></textarea>
              </div>
              <div class="inputBox">
                <input type="submit" placeholder="Send">
              </div>
          </div>
        </section>

        <div class="copyrightText">
            <p>Copyright 2020 <a href="#" class="">Online Tutorials</a></p>
        </div>
            
        <script type="text/javascript">
           window.addEventListener('scroll', function(){
                const header = document.querySelector('header');
                header.classList.toggle("sticky", window.scrollY > 0);
            });
        </script>
    </body>
</html>
1 Like

Hey @awkwineh183,

I just spun up a copy of your page. I think I was able to find your problem. If I understand what you’re looking to do correctly, the issue is with your css. Right now this line:

is targeting an anchor(or link element) within list item, within an element with class “navigation” that is within an element with class “sticky”, that is within a header element. Which isn’t what you’re hoping to target.

A possible fix for your problem would be to replace that line with this:

header.sticky .navigation li a{
    color: #111;
}

However, that only affects the links in your list element and not your logo. If you wanted to do that you could:

header.sticky a, //this targets your logo link
header.sticky .navigation li a //this targets your navigation list links{
  color: #111;
}

Hi again, so the issue is probably with you js code. I just tried adding classes to your links and target them with some new js code. I didn’t change anything with your code but just added a few more lines.

This is the nav section :

  <ul class="navigation">
    <li><a class="nav-scroll" href="#banner">Home</a></li>
    <li><a class="nav-scroll" href="#about">About</a></li>
    <li><a class="nav-scroll" href="#menu">Menu</a></li>
    <li><a class="nav-scroll" href="#expert">Expert</a></li>
    <li><a class="nav-scroll" href="#testimonials">Testimonials</a></li>
    <li><a class="nav-scroll" href="#contact">Contact</a></li>
  </ul>

As you can see I’ve added the .nav-scroll to your links.
And here this my js code, after adding this it worked perfectly fine without breaking your design.

$(document).ready(function(){       
        var scroll_pos = 0;
        $(document).scroll(function() { 
            scroll_pos = $(this).scrollTop();
            if(scroll_pos > 210) {
                $('.nav-scroll').css('color', '#333');
            } else {
                $('.nav-scroll').css('color', '#fff');
            }
        });
    });

This is targeting the links and changing the color whenever the scroll position is greater than 210. You can change it to fit your needs. Just try it out and let me know if this works for you.

Thank you so much for all your solutions!! The problem solved :slight_smile:

1 Like

Thank you so much for this fix, I truly appreciate it. It perfectly works for me :slight_smile:

2 Likes