Question 264869 in Html Question posted in
Some basic documentation can be found here.

Html – Trying to highlight current page in Navigation Bar

I’m trying to hightlight the section of the navbar i’m on, and the articles I found didn’t work for me.

I searched articles, and the ones I found didn’t work for me.

Here’s my html code:

    <nav>
            </div>
        </label>
        <script src="nav.js"></script>
        <label class="logo"><a href="index.html">JR-Koders</a></label>
        <ul>
            <li><a href="index.html" class="active text">Home</a></li>
            <li><a href="nav.html" class="text">News</a></li>
            <li><a href="j-koders.html" class="text">J-Koder</a></li>
            <li><a href="r-koder.html" class="text">R-Koder</a></li>
            <li><a href="koders.html" class="text">Koders</a></li>
            <li><a href="search.html"><i class="fa fa-search text"></i></a></li>
        </ul>
    </nav>



    <script type="text/javascript">

        // Hamburger
        var menu = document.getElementById("hamburger");
    
    
        menu.onclick = function(){
            menu.classList.toggle("openhamburger");
        }

        // End of this section

    </script>

Here’s my css code:

*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

body{
    font-family: arial;
}

nav{

    background: black;
    color: #20C20E;
    height: 80px;
    width: 100%;
}

.text{
    color: #20C20E;
}
label.logo{
    color: white;
    font-size: 35px;
    line-height: 80px;
    padding: 0 100px;
    font-weight: bold;
}

nav ul{
    float: right;
    margin-right: 20px;
}


.our-logo{
    width: 70px;
}


a { color: inherit; } 

nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}

nav ul li a{
    color: white;
    font-size: 17px;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 3px;
}

a.active,a:hover{
    background: #1b9bff;
    transition: .5s;
}

label.a:hover {
    background: #1b9bff;
    transition: 3s;
}

I also have code for my nav bar to be responsive, but I didn’t included it in here, but I hope it will work the same

Tags:

2

Answers


  1. 0

    I couldn’t see any html element with Id "hamburger" and css class "openhamburger" in your code.

    The part which you want to highlight should be given an Id name "hamburger" or provide an our element with the ID "hamburger". (As you have mentioned menu = document.getElementById("hamburger") in your javascript portion of code)

    And how you want to highlight should be written in css with the classname "openhamburger" (Since you have mentioned menu.classList.toggle("openhamburger") in your javascript code).
    I assume as if you want to highlight navbar while clicking hamburger icon

    For instance:
    HTML:

    <div onclick = "highlightNavbar()">☰</div>

<nav id= "hamburger" >
<!--some html code-->
</nav>

    CSS:

    /* Style in such a way you want to highlight navbar */
.openhamburger{
position:relative;
top: 30px;
color: deeppink
background-color:grey;
}

    Javascript:

    <script>
function highlightNavbar(){
var menu = document.getElementById("hamburger")
menu.classList.toggle("openhamburger");
    }
</script>

    The above code is as per the Id name and class name given in your javascript.

    Login or Signup to reply.
  2. 0

    Try this:

    let els = document.querySelectorAll('li > a');
els.forEach(el => {
  el.addEventListener('click', e => {
    els.forEach(a => a.closest('li a').classList.remove('active'));
    e.target.closest('li a').classList.add('active');
  })
})
    *{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}

body{
    font-family: arial;
}

nav{

    background: black;
    color: #20C20E;
    height: 80px;
    width: 100%;
}

.text{
    color: #20C20E;
}
label.logo{
    color: white;
    font-size: 35px;
    line-height: 80px;
    padding: 0 100px;
    font-weight: bold;
}

nav ul{
    float: right;
    margin-right: 20px;
}


.our-logo{
    width: 70px;
}


a { color: inherit; } 

nav ul li{
    display: inline-block;
    line-height: 80px;
    margin: 0 5px;
}

nav ul li a{
    color: white;
    font-size: 17px;
    text-transform: uppercase;
    padding: 7px 13px;
    border-radius: 3px;
}

a.active,a:hover{
    background: #1b9bff;
    transition: .5s;
}

label.a:hover {
    background: #1b9bff;
    transition: 3s;
}
        <nav>
        <script src="nav.js"></script>
        <label class="logo"><a href="index.html">JR-Koders</a></label>
        <ul>
            <li><a href="#" class="text active">Home</a></li>
            <li><a href="#" class="text">News</a></li>
            <li><a href="#" class="text">J-Koder</a></li>
            <li><a href="#" class="text">R-Koder</a></li>
            <li><a href="#" class="text">Koders</a></li>
            <li><a href="#"><i class="fa fa-search text"></i></a></li>
        </ul>
    </nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search