Active NavBar

Question

How do I make my navbar active

Answer 1

I think you want to demonstrate a website, but SoloLearn only allows a single static page (index.html). To create a multi-page website, you would need separate files like:

index.html
about.html
blogs.html
contacts.html

If you have a computer you can create the documents locally and try it out. 
There are various Web IDE that allow multiple page loading. A simple Google search will return results.
Or if mobile is your only device you can search for and download an HTML IDE app.

Answer 2

Like this

Answer 3

I meant how do I make it active

Answer 4

Sorry I meant for this one

Answer 5

Employ JavaScript to make them interactive if you are using HTML.

Answer 6

It means NavigationBar

Answer 7

https://sololearn.com/compiler-playground/W8Fpn35LXWT0/?ref=app

Answer 8

Edit the bug ( >) in the nav of line 10.

Answer 9

Could try something like this. Since you're using jQuery.
This code will remove the "active" class from all the links and add it to the link that was just clicked.
Also I set active on line 63 in CSS.

https://sololearn.com/compiler-playground/WfqfmU60UwpI/?ref=app

Answer 10

if you mean a visual indicator when it is clicked or hovered, maybe add a pseudo class :hover or :active to it.

nav:hover{
background-color: red;
}

https://www.w3schools.com/css/css_pseudo_classes.asp

also, you don't really need to be that verbose in your css specifiers.
you can simply use the class specifier

.items{
...
}

no need for :
nav ul li .items

unless you are running into issues.
Also put a space between the tag name and class specifier
li .items{...
not
li.items{...

Answer 11

I mean how do I make my navbar really work

Answer 12

Kevin
you need to add the show class to the li by default. Right now, they are invisible.

<li class="items show"><a href="#">Home</a></li>
<li class="items show"><a href="#">About</a></li>
<li class="items show"><a href="#">Blogs</a></li>
<li class="items show"><a href="#">Contact</a></li>
<li class="items show"><a href="#">Feedback</a></li>

Answer 13

👍

Answer 14

Oi

Answer 15

A responsive navbar

https://sololearn.com/compiler-playground/W5m74nkxE30w/?ref=app

Answer 16

Oii