Why doesnt the navigation bar object respect the CSS?

Admin 1
Viewed 37

Here is my MVP:

.navbar{
  flex-direction: row; 
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="master.css">
  </head>
  <body>
    <nav class="navbar navbar-light bg-light" id="bootstrap-overrides">

    <div class="container">
      <ul class="nav navbar-nav">
        <li><a class="navbar-brand" href="#"></a>Patients Page</li>
        <li><a class="navbar-brand" href="#">Admin</a></li>
        <li><a class="navbar-brand" href="#">Register Patients</a></li>
      </ul>

    </div>
</nav>

  </body>
</html>

Why doesn't the navbar respect the CSS and show up row-wise? Navigation bar is column-wise rather than row-wise. When I inspect the object I can actually see the attribute as flex-direction: row;, but it still doesn't work.

Note: I tried !important; and there was no change.

bootstrap-4 css html
2 Answers

Because the navbar-nav class has flex-direction: column. So your css should override it instead of .navbar.

.navbar-nav {
  flex-direction: row !important;
}

Edit: there is also a bootstrap class you can use. Change the ul to:

<ul class="nav navbar-nav flex-row">

Secondary note: the first text of your list is not inside the a element.

.navbar-nav {
  flex-direction: row !important;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="master.css">
  </head>
  <body>
    <nav class="navbar navbar-light bg-light" id="bootstrap-overrides">

    <div class="container">
      <ul class="nav navbar-nav">
        <li><a class="navbar-brand" href="#">Patients Page</a></li>
        <li><a class="navbar-brand" href="#">Admin</a></li>
        <li><a class="navbar-brand" href="#">Register Patients</a></li>
      </ul>

    </div>
</nav>

  </body>
</html>

user_112714320

I’m not familiar with bootstrap, but make sure that you set display: flex; on the navbar, and make sure that the element directly containing the parts of the nav bar is correctly identified with a class of navbar. Ex.

<div class=‘navbar’>
<p>element1</p>
<p>element2</p>
</div>

Css:

.navbar {
display: flex;
flex-direction: row;
}

Notice that if navbar element is not directly containing the individual parts of the nav bar, this will not work, e.g.

<div class=‘navbar’>
<div>
<p>a</p>
<p>a</p>
</div>
</div>
user_130296050
Related