Change color of navbar using javascript

Question

HTML

   <nav>
    <ul>
        <li><a class="notDrop" href="#home">HOME</a></li>
        <li><a class="notDrop" href="guides.html">GUIDES</a></li>
        <li class="dropdown">
            <a class="dropbtn">BRANDS</a>
                    <div class="dropdown-content">
                    <a href="gaming.html">NVIDIA</a>
                    <a href="#">INTEL</a>
                    <a href="#">CORSAIR</a>
                    <a href="#">SAMSUNG</a>
            <li class="dropdown">
                <a class="dropbtn">BUILDS</a>
                    <div class="dropdown-content">
                    <a href="gaming.html">GAMING</a>
                    <a href="#">OFFICE</a>
                    <a href="#">SERVER</a>
                    <a href="#">MEDIACENTER</a>
                    </div>
            </li>
    </ul>
</nav>

CSS

    nav {
    background-color: white;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

Javascript

    window.onload = function mobile(){
    if( isMobile.any() ) {
        document.getElementById('nav').style.backgroundColor = "blue";
       alert('Mobile'); 
    }
}

But I can't get it to change color, what am I doing wrong? I managed to change the color of the body but I cant of the nav.

Give the nav element an ID and change the getElement call to use that ID. Nav is the element type - not its ID. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented May 1, 2017 at 15:01

score 1 · Accepted Answer · 2017-05-01 15:17:13Z

1

You used the wrong javascript function. nav is a tag, not an id.

It should be getElementsByTagName("nav")[0] instead of getElementById("nav")

javascript will always return an array regardless of number of matching element using getElementsByTagName() method. So use [0] to return the first one.

edited May 1, 2017 at 15:17

answered May 1, 2017 at 15:00

user6360214

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

6 Comments

Reinstate Monica Cellio Over a year ago

Is it the first nav element on the page?

Rohith K P Over a year ago

Are you sure? He has not added any html

user6360214 Over a year ago

@Mendax Now he has posted his html code. Still I insist this ans will work

Reinstate Monica Cellio Over a year ago

This answer needs clarification for people that end up here looking for help. Please explain it, and specifically mention that if they ever add another nav element to the page it may stop this working.

Leyer Over a year ago

Just another question, if I had css like this: nav a { css in here } how would I put it in the element?

|

arkadiuszch · Accepted Answer · 2017-05-01 15:10:19Z

0

You used document.getElementById but you have only nav tag from HTML5. Add id = "nav" to your nav tag.

Best regards!

answered May 1, 2017 at 15:10

arkadiuszch

1

Comments

CalvT · Accepted Answer · 2017-05-01 15:20:41Z

0

Your problem here is that you are using getElementById, but have not given your nav an id.

The best way to solve this would be to add an id to your nav, as follows:

<nav id="top-nav">

And your js becomes:

document.getElementById('top-nav').style.backgroundColor = "blue";

The answer given by Super Cool Handsome Gel Boy, while it will work is impractical because it looks for any <nav> tag, so if you add more <nav> tags, or move them around, you will have to recode your javascript.

By using an id, the javascript will always target the right <nav>.

answered May 1, 2017 at 15:20

CalvT

3,2336 gold badges40 silver badges55 bronze badges

Collectives™ on Stack Overflow

Change color of navbar using javascript

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related