Anchor tag link to other webpages in same directory is not working

Greetings everyone !
I have edited a single page website by separating it into multiple pages but the anchor tag is not working .It shows that its linked to other page but doesn’t switch to other page on clicking . If I right click and say open link on new tab that time it shows the page on other tab . But when i click it to display on same page its doent.

Thanks though !!

Here is how.php which is edited
Files are arranged like homeservices/how.php
homeservices/index.html
homeservices/about.html

<!DOCTYPE html>
<html>
   <head>

      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>URBAN AMENITIES</title>
      <link rel="stylesheet" href="cssmain/bootstrap.min.css">
      <link rel="stylesheet" href="cssmain/style.css">
      <link rel="stylesheet" href="cssmain/fontawesome.min.css">
      <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
   </head>
   <body>
      <div id="header" class="header">
         <nav class="navbar navbar-expand-lg navbar-light text-capitalize">
            <div class="container">
               <a class="navbar-brand" href="#"><img src="imgs/logo.png" alt="#" /></a>
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#show-menu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse" id="show-menu">
                  <ul class="navbar-nav ml-auto">
                     <li class="nav-item">
                         <a class="nav-link" href="index.html">Home</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="about.html">About</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="services.html">Services</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="how.html">How it Works</a>
                     </li>
                    <li class="nav-item">
                        <a class="nav-link" href="review.html">What Clients Say</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="contact.html">Contact</a>
                     </li>
                    <li class="nav-item">
                        <a class="nav-link" href="register.php">Register</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="login.php">Login</a>
                     </li>
                  </ul>
               </div>
            </div>
        </nav>
      </div>
      <div id="hiw" class="hiw_section layout_padding" style="background: #0000000">
         <div class="container">
            <div class="row">
               <div class="col-md-7">
                  <h3 class="white_font">How it's Works</h3>
                  <p class="white_font">adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>
               </div>
               <div class="col-md-5">
               </div>
            </div>
            <div class="row">
               <div class="col-md-4">
                  <img class="margin_top_30 img-responsive" src="imgs/blog1.jpg" alt="#" />
                  <h3 class="blog_head">Book Online</h3>
               </div>
               <div class="col-md-4">
                  <img class="margin_top_30 img-responsive" src="imgs/blog2.jpg" alt="#" />
                  <h3 class="blog_head">Confirmation</h3>
               </div>
               <div class="col-md-4">
                  <img class="margin_top_30 img-responsive" src="imgs/blog3.jpg" alt="#" />
                  <h3 class="blog_head">Work Status</h3>
               </div>
            </div>
         </div>
      </div>
      <footer >
         <div class="container">
            <div class="row">
               <div class="col-lg-3 col-md-6 col-12">
                  <div class="footer_blog_section">
                     <img src="imgs/logo.png" alt="#" />
                     <p style="margin-top: 3px; font-size: 15px">URBAN AMENITIES platform helps customers book reliable home services like beauty services, massage therapy, cleaning, plumbing, carpentry, appliance repair, painting etc. We offer home maintenance, repair services, home beauty and wellness services. Thereby empowering service providers to showcase their work .</p>
                  </div>
               </div>
               <div class="col-lg-2 col-md-6 col-12">
                  <div class="item">
                     <h4 class="text-uppercase">Navigation</h4>
                     <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Location</a></li>
                        <li><a href="#">Service</a></li>
                        <li><a href="#">Features</a></li>
                     </ul>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6 col-12">
                  <div class="item">
                     <h4 class="text-uppercase">Contact Info</h4>
                     <p><strong>Corporate Office Address:</strong></p>
                     <p><img src="imgs/phone_icon.png" alt="#" />+91 7210110121</p>
                     <p><strong>Customer Service:</strong></p>
                     <p><img src="imgs/location.png" alt="#" /> NIBM Road , Pune 411048 .</p>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-12">
                     <div class="item">
                     <h4 class="text-uppercase">Follow </h4>
                     <ul>
                        <li><a href="http://localhost/homeservices/index.html">Website</a></li>
                        <li><a href="sarassk21@gmail.com">Gmail</a></li>
                        <li><a href="https://www.instagram.com/sara.shaikh.21/">Instagrm</a></li>
                        <li><a href="https://www.facebook.com/sara.shaikh.21/">Facebook</a></li>
                        <li><a href="www.youtube.in">Youtube</a></li>
                        <li><a href="https://www.linkedin.com/in/sara-shaikh/">LinkedIn</a></li>
                     </ul>
                  </div>

               </div>


            </div>

         </div>
         <div class="copyright text-center">
            <p> URBAN AMENTIES &copy; <?= date("Y") ?>All Rights Reserved.</p>
         </div>
      </footer>
      <script src="jsmain/jquery-3.3.1.min.js"></script>
      <script src="jsmain/bootstrap.min.js"></script>
      <script>
         $(function () {
             
             'use strict';
             
             var winH = $(window).height();
             
             $('header').height(winH);  
             
             $('header .container > div').css('top', (winH / 2) - ( $('header .container > div').height() / 2));
             
             $('.navbar ul li a.search').on('click', function (e) {
                 e.preventDefault();
             });
             $('.navbar a.search').on('click', function () {
                 $('.navbar form').fadeToggle();
             });
             
             $('.navbar ul.navbar-nav li a').on('click', function (e) {
                 
                 var getAttr = $(this).attr('href');
                 
                 e.preventDefault();
                 $('html').animate({scrollTop: $(getAttr).offset().top}, 1000);
             });
         })
      </script>

   </body>
   
</html>

try adding a target to the end of the anchor element.

<a href="https://www.linkedin.com/in/sara-shaikh/" target="_blank">LinkedIn</a>

_blank will open a new page while [target=“self”] will open in the same window
w3schools has a lot of great help

No it didnt work

is this for the class="nav-link" ? If so you may need to edit you file paths. Like: ../folder-name/file.ext

which file paths ? and where exactly ?

Is it the links in you navbar that aren’t working of the links later down the page?

These links appear down the page but they are not opening nor using _blank neither _self.

Hey @sara_shaikh!
Which link is not visible ?

The link is not working . <a class="nav-link" href="index.html">Home</a>
All those href

As u can see when i press services tab it just shows down in pane but doesnt open that page , so i want that page to open

@sara_shaikh
Your all HTML and CSS files are in one file ?

Yes all html in same file and css in cssmain folder

Which is your homepage file ?

index.html

But i just changed links of how.php to check if it works

Did it work @sara_shaikh ?

No its not working …

Give your updated homepage full code.

<!DOCTYPE html>
<html>
   <head>

      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>URBAN AMENITIES</title>
      <link rel="stylesheet" href="cssmain/bootstrap.min.css">
      <link rel="stylesheet" href="cssmain/style.css">
      <link rel="stylesheet" href="cssmain/fontawesome.min.css">
      <link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto" rel="stylesheet">
   </head>
   <body>
      <div id="header" class="header">
         <nav class="navbar navbar-expand-lg navbar-light text-capitalize">
            <div class="container">
               <a class="navbar-brand" href="#"><img src="imgs/logo.png" alt="#" /></a>
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#show-menu" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse" id="show-menu">
                  <ul class="navbar-nav ml-auto">
                     <li class="nav-item">
                         <a class="nav-link" href="index.html">Home</a>
                     </li>
                     <li class="nav-item">
                         <a class="nav-link" href="about.html">About</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="services.html">Services</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link active" href="how.html">How it Works</a>
                     </li>
                    <li class="nav-item">
                        <a class="nav-link" href="review.html">What Clients Say</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="contact.html">Contact</a>
                     </li>
                    <li class="nav-item">
                        <a class="nav-link" href="register.php">Register</a>
                     </li>
                     <li class="nav-item">
                        <a class="nav-link" href="login.php">Login</a>
                     </li>
                  </ul>
               </div>
            </div>
         </nav>
      </div>
      <div id="home" class="slider">
         <div id="main_slider" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
               <li data-target="#main_slider" data-slide-to="0" class="active"></li>
               <li data-target="#main_slider" data-slide-to="1"></li>
               <li data-target="#main_slider" data-slide-to="2"></li>
               <li data-target="#main_slider" data-slide-to="3"></li>
               <li data-target="#main_slider" data-slide-to="4"></li>
               <li data-target="#main_slider" data-slide-to="5"></li>
               <li data-target="#main_slider" data-slide-to="6"></li>
            </ol>
            <div class="carousel-inner">
               <div class="carousel-item active">
                  <img class="d-block w-100" src="imgs/slide1.jpg" alt="slider_img">
                  <div class="ovarlay_slide_cont">
                     <h2>We love working</h2>
                     <h4>Homely service provider</h4>
                     <p>Providing homely service at your doorstep!!</p>
                     <a class="blue_bt" href="#">See Our Services</a>
                  </div>
               </div>

               <div class="carousel-item">
                  <img class="d-block w-100" src="imgs/slide2.jpg" alt="slider_img">
                  <div class="ovarlay_slide_cont">
                     <h2>We love working</h2>
                     <h4>Homely service provider</h4>
                     <p></p>
                     <a class="blue_bt" href="#">See Our Service</a>
                  </div>
               </div>

               <div class="carousel-item">
                  <img class="d-block w-100" src="imgs/slide3.jpg" alt="slider_img">
                  <div class="ovarlay_slide_cont">
                     <h2>We love working</h2>
                     <h4>Homely service provider</h4>
                     <p></p>
                     <a class="blue_bt" href="#">See Our Service</a>
                  </div>
               </div>

               <div class="carousel-item">
                  <img class="d-block w-100" src="imgs/slide4.jpg" alt="slider_img">
                  <div class="ovarlay_slide_cont">
                     <h2>We love working</h2>
                     <h4>Homely service provider</h4>
                     <p></p>
                     <a class="blue_bt" href="#">See Our Service</a>
                  </div>
               </div>

               <div class="carousel-item">
                  <img class="d-block w-100" src="imgs/slide5.jpg" alt="slider_img">
                  <div class="ovarlay_slide_cont">
                     <h2>We love working</h2>
                     <h4>Homely service provider</h4>
                     <p></p>
                     <a class="blue_bt" href="#">See Our Service</a>
                  </div>
               </div>

               <div class="carousel-item">
                  <img class="d-block w-100" src="imgs/slide6.jpg" alt="slider_img">
                  <div class="ovarlay_slide_cont">
                     <h2>We love working</h2>
                     <h4>Homely service provider</h4>
                     <p></p>
                     <a class="blue_bt" href="#">See Our Service</a>
                  </div>
               </div>

            </div>
            <a class="carousel-control-prev" href="#main_slider" role="button" data-slide="prev">
            <img src="imgs/left.png" alt="#" />
            </a>
            <a class="carousel-control-next" href="#main_slider" role="button" data-slide="next">
            <img src="imgs/right.png" alt="#" />
            </a>
         </div>
      </div>
     
     
      
         
      <footer >
         <div class="container">
            <div class="row">
               <div class="col-lg-3 col-md-6 col-12">
                  <div class="footer_blog_section">
                     <img src="imgs/logo.png" alt="#" />
                     <p style="margin-top: 3px; font-size: 15px">URBAN AMENITIES platform helps customers book reliable home services like beauty services, massage therapy, cleaning, plumbing, carpentry, appliance repair, painting etc. We offer home maintenance, repair services, home beauty and wellness services. Thereby empowering service providers to showcase their work .</p>
                  </div>
               </div>
               <div class="col-lg-2 col-md-6 col-12">
                  <div class="item">
                     <h4 class="text-uppercase">Navigation</h4>
                     <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Location</a></li>
                        <li><a href="#">Service</a></li>
                        <li><a href="#">Features</a></li>
                     </ul>
                  </div>
               </div>
               <div class="col-lg-4 col-md-6 col-12">
                  <div class="item">
                     <h4 class="text-uppercase">Contact Info</h4>
                     <p><strong>Corporate Office Address:</strong></p>
                     <p><img src="imgs/phone_icon.png" alt="#" />+91 7210110121</p>
                     <p><strong>Customer Service:</strong></p>
                     <p><img src="imgs/location.png" alt="#" /> NIBM Road , Pune 411048 .</p>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-12">
                     <div class="item">
                     <h4 class="text-uppercase">Follow </h4>
                     <ul>
                        <li><a href="http://localhost/homeservices/index.html">Website</a></li>
                        <li><a href="sarassk21@gmail.com">Gmail</a></li>
                        <li><a href="https://www.instagram.com/sara.shaikh.21/">Instagrm</a></li>
                        <li><a href="https://www.facebook.com/sara.shaikh.21/">Facebook</a></li>
                        <li><a href="www.youtube.in">Youtube</a></li>
                        <li><a href="https://www.linkedin.com/in/sara-shaikh/">LinkedIn</a></li>
                     </ul>
                  </div>

               </div>


            </div>

         </div>
         <div class="copyright text-center">
            <p> URBAN AMENTIES &copy; <?= date("Y") ?>All Rights Reserved.</p>
         </div>
      </footer>
      <script src="jsmain/jquery-3.3.1.min.js"></script>
      <script src="jsmain/bootstrap.min.js"></script>
      <script>
         $(function () {
             
             'use strict';
             
             var winH = $(window).height();
             
             $('header').height(winH);  
             
             $('header .container > div').css('top', (winH / 2) - ( $('header .container > div').height() / 2));
             
             $('.navbar ul li a.search').on('click', function (e) {
                 e.preventDefault();
             });
             $('.navbar a.search').on('click', function () {
                 $('.navbar form').fadeToggle();
             });
             
             $('.navbar ul.navbar-nav li a').on('click', function (e) {
                 
                 var getAttr = $(this).attr('href');
                 
                 e.preventDefault();
                 $('html').animate({scrollTop: $(getAttr).offset().top}, 1000);
             });
         })
      </script>

   </body>
   
</html>

Hey there two index one with php and html

That was another file .
I have deleted that

Do you have your code in codepen or github ?