0

I have created a separate header file in php so that I can re-use it in every page by including it through php include function but in header page when I wrote the code of simple navbar it's showing in list items and not as inline.

(This question is not exactly same with any other question as marked duplicate by someone, I have gone through different questions to find my issue but I didn't find any so I asked this question by myself)

Here is my code:

index.php (the main index page)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/favicon.ico">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/fontawesome-all.min.css">
</head>
<body>
   <?php include 'header.php'; ?>
   
   <div>
       
   </div>
   
   <?php include 'footer.php'; ?>
   
   <script src="js/jquery-3.3.1.min.js"></script>
   <script src="js/bootstrap.bundle.min.js"></script>
   <script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
</body>
</html>

header.php (header page in which I am creating bootstrap navbar)

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.php">O.S.P</a>
        </div>
        <ul class="nav navbar-nav">
            <li class="active"><a href="index.php">Home</a></li>
            <li><a href="services.php">Services</a></li>
            <li><a href="about-us.php">About Us</a></li>
            <li><a href="sign-in.php">Sign In</a></li>
            <li><a href="sign-up.php">Sign Up</a></li>
        </ul>
    </div>
</nav>

and here's the index.css (the secondary CSS file)

.nav li{
    display: inline;
}

after all, this when I am running my page it's displaying like:

Browser's output image of my page:

enter image description here

Adnan Memon
  • 7
  • 9
  • 1
    Are you using Bootstrap 3 or 4? That navbar is for Bootstrap 3. [Read the docs](http://getbootstrap.com/docs/4.0/components/navbar/). – Carol Skelly Mar 24 '18 at 11:27
  • Yeah actually I am using Bootstrap 4 and I think navbar also work in version 4 as well but I will read its documentation to confirm it. – Adnan Memon Mar 27 '18 at 08:06

1 Answers1

-2

Update Bootstrap3 URL It is working

see this Fiddle

https://jsfiddle.net/xv6mkfo8/3/

Shaik
  • 380
  • 2
  • 15
  • why down vote ? – Shaik Mar 24 '18 at 11:32
  • yes its working but you have put the link of bootstrap 3 and I am using bootstrap 4 that's why this problem is occurring, I want it to be fixed in bootstrap 4. – Adnan Memon Mar 27 '18 at 08:08
  • ok, i updated my fiddle with bootstrap4. se this fiddle https://jsfiddle.net/xv6mkfo8/8/ if it is helpful to you accept it as a answer – Shaik Mar 27 '18 at 11:20
  • @shaikh it's not working bro navbar is made inline but the collapsed button is not working – Adnan Memon Mar 28 '18 at 08:30
  • sorry, I forgot to check it, now i edited my fiddle check it https://jsfiddle.net/xv6mkfo8/11/ – Shaik Mar 29 '18 at 13:34