Click here to Skip to main content
15,868,164 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have created a website in which in home page, the links in navigation bar is not working but is working in the other 2 pages, even when I have linked css with all the pages. In the home page,the links are not getting selected In my code, I have used background color as yellow to show that link is selected.

What I have tried:

CSS
#container{
  width:100%;
  height:130vh;
  }
nav{
  max-width: 130%;
  height: 55px;
  
  
  display: flex;
}
nav ul{
  float: center;
  margin-left: 30px;
}
nav ul li{
  
  display: inline;
  
  font-size: 26px;
  font-family: "Gill Sans", sans-serif;
}

nav ul li a{
  
  color: #FF7F50;
  padding: 30px;
}
nav ul li a:hover{
  background-color: yellow;
}
HTML
   <div class="container">
    
        <ul>
            <li><a href="index.html">Home</a></li>            <li><a href="abhigallery.html">Gallery</a></li>            <li><a href="feelings.html">My feelings</a></li>            <li><a href="sweetsurprise.html">A surprise</a></li>            
        </ul>
    
</div>
    


    <div class="wish">
       <br> Happy Birthday<br>
    </div>
    <div class="cake">
        <div class="plate"></div>
        <div class="layer"></div>
        <div class="icing">
            <div class="name">
                <p>Happy Birthday <br> <span id="name">Dear Medha</span></p>
            </div>
        </div>
        <div class="candle1">
            <div class="flame1"></div>
        </div>
        <div class="candle2">
            <div class="flame2"></div>
        </div>
        <div class="candle3">
            <div class="flame3"></div>
        </div>
        <div class="candle4">
            <div class="flame4"></div>
        </div>
        <div class="candle5">
            <div class="flame5"></div>
        </div>
    </div>
    <div class="text"><br>Hope all your birthday wishes come true.<br>
    <br> Baar baar yeh din aaye, baar baar yeh dil gaaye<br>
    <br> HAPPY BIRTHDAY TO YOU!!!<br>
    </div>
Posted
Updated 19-Aug-22 2:17am
v2

1 solution

you don't have an enclosing element with the class of nav.
try enclosing the <ul> ... </ul> tag with a <div class="nav"> tag.
 
Share this answer
 
Comments
Abhinav Kishore M 20-Aug-22 3:35am    
Done this just now. Same issue even now
Abhinav Kishore M 22-Aug-22 2:15am    
I have done the following now:
<title>Home
this time they were getting selected when I hover at a position around them and not when I exactly place my cursor on them
Abhinav Kishore M 22-Aug-22 2:15am    
<title>Home

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900