Why isn't my navbar text on the same line?

JavaScript
1

Why is my navbar text not on the same line for the “front end web developer” and my pages text. How can I make it appear on the same line?
As you can see in the screenshot, it currently looks like this https://ibb.co/jkd0LS. I want the text to be all on the same line.

jQuery(document).ready(function($) {
  $(document).on("scroll", function() {
    const features_top = $(".features-icons").position().top;
    const top_of_window = $(window).scrollTop();

    if (top_of_window >= features_top) {
      $(".navbar").show();
    } else {
      $(".navbar").hide();
    }
  });
});

.navbar {
  border-bottom: 0.04rem solid #111;
  background-color: ;
  display: none;
}

nav ul li a {
  color: rgb(65, 47, 47);
  font-family: Montserrat, Helvetica, Arial, sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
}

nav ul li a:hover {
  text-decoration: underline;
  color: #000;
}

.abs-center-x {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Navigation bar -->
<nav class="navbar scrolled-nav navbar-expand-md fixed-top navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Front End Web Developer</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar7">
                <span class="navbar-toggler-icon"></span>
            </button>
  <div class="navbar-collapse collapse justify-content-stretch" id="navbar7">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active"> <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="#features-icons">Expectations</a>
      </li>
      <li class="nav-item active"> <a class="nav-link" href="#testimonials">Testimonials</a>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#about">About</a>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#portfolio">Portfolio</a>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#about">Design</a>
      </li>
      <li class="nav-item"> <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

Here is all my website code, I uploaded it to GitHub

2

hi @ldocherty1,

javascript.js

// replace
$(".navbar").show(); // display: block
// with
$('.navbar').css('display', 'flex') // display: flex
1 Like