1

I hate to press my luck asking for help, but here I go anyway --

I got this code from w3schools.com but cannot figure out how to make the word OPEN in the HTML code a different color. It is currently black, I want it white. The other colors I changed because my actual page has a black background. Sorry the code is so long, I figured better to have too much than not enough. Here is the code I currently have:

HTML

<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>

<p>Click on the element below to open the menu</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>

CSS

body {
font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #DD0;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #2707AB;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #818181;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Thanks for any help!

4 Answers 4

1

Try this

body {
font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #DD0;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #2707AB;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #818181;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.opencolor
{
  color:tan;
}
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>

<p>Click on the element below to open the menu</p>
<span style="font-size:30px;cursor:pointer;">&#9776; </span><span style="font-size:30px;cursor:pointer;" class="opencolor" onclick="openNav()">open</span>

<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>

0
0

Take one class inside and write css for that class .

<span class="foo" onclick="openNav()">&#9776; open</span>

css

.foo{
        font-size:30px;
        cursor:pointer;
        color:#fff;
    }

and if you want only that bar color to change use that css with this html

<div  onclick="openNav()"><span class="bar">&#9776;</span> open</div>
0

If you are looking for changin the colour of open try this.

    <p>Click on the element below to open the menu</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; <font color="red">open</font></span>

or

 <p>Click on the element below to open the menu</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; <span style="color:blue;">open</span></span>
0

Just wrap the word "open" in another span to apply inline styling to it.

...<span style="color:white;">open</span>...

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.