Bootstrap fixed top the top navbar - with logo (lef) and navlinks (right)

Question

I'm struggling with a simple navbar. I can't make a responsive fixed to the top navbar with logo and navlinks in both sides.

I got rid of everthing Bootstrap related in the code I'm sharing here can you please have a look and save me?

I'm looking for a bootstrap solution, to make things responsive. thank you.

.nav-bar {
  display: flex;
  justify-content: space-between;
  position: fixed;
  align-items: center;
}

.header-top {
  height: 100px;
  display: flex;
  justify-content: space-between;
  padding: 15px 30px 0 10px;
}

.nav-links {
  display: flex;
  right: 20px;
}

.header-nav-blocks {
  height: 50px;
  margin-left: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-nav-button {
  display: flex;
  flex-direction: column;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<header>
  <div class="header-top">
    <nav class="nav-bar">
      <img src="https://via.placeholder.com/50" alt="logo oc" />
      <ul class="nav-links">
        <li class="header-nav-blocks">
          <a href="#A" class="navlinks">A</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#B" class="navlinks">B</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#C" class="navlinks">C</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#D" class="navlinks">D</a>
        </li>
        <li class="header-nav-button">
          <a href="" class="button-link">Blog</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

I've spent 3 hours for a navbar, I have other tasks to deal with that don't require bootstrap. it is frustrating. Even now, none of the answers includes bootstrap and my issue isn't solved — Fur and Claws, May 04 '23 at 13:12
I want boostrap solution ! I only said I don't show it here because I removed my bad one!!! — Fur and Claws, May 04 '23 at 13:15
Please, I'm new here, no need to be harsh. I didn't find my solution online, tried many stackoverflow cases before daring to ask, if my question wasn't clear enough what about asking me to clarify (edit) instead of deciding what I want or not ? — Fur and Claws, May 04 '23 at 13:23

ADasGH · Answer 1 · 2023-05-04T17:15:55.023

I think you are trying to achieve this:

.header-top {
  min-height: 100px;
  padding: 15px 30px 0 10px;
}
.nav-bar {
  display: flex;
  justify-content: space-between;
  position: fixed;
  align-items: center;
  flex: 100vw;
  width: 100vw;
  flex-direction: column;
}
.nav-bar img {
  height: 100px;
  width: 100vw;
}
.nav-links {
  display: flex;
  flex: 100vw;
  width: 100vw;
  justify-content: right;
}

.header-nav-blocks {
  height: 50px;
  margin-left: 40px;
  text-align: right;
}

.header-nav-button {
  margin-left: 5vw;
  margin-right: 5vw;
  display: flex;
  flex-direction: row;
}

<header>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <div class="header-top">
    <nav class="nav-bar">
      <img src="assets/img/logo-oc.png" alt="logo oc" />
      <ul class="nav-links">
        <li class="header-nav-blocks">
          <a href="#A" class="navlinks">A</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#B" class="navlinks">B</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#C" class="navlinks">C</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#D" class="navlinks">D</a>
        </li>
        <li class="header-nav-button">
          <a href="" class="button-link">Blog</a
                >
              </li>
            </ul>
          </nav>
        </div>
      </header>

thanks for your answer! sadly it is not responsive (the links cover the img) and there is no margin left — Fur and Claws, May 04 '23 at 13:10

isherwood · Answer 2 · 2023-05-04T13:14:35.917

All you needed to do was make your navbar full width. When you make an element a flex container it collapses by default to the width of its children.

.nav-bar {
  display: flex;
  justify-content: space-between;
  position: fixed;
  align-items: center;
  width: 100%;
}

.header-top {
  height: 100px;
  display: flex;
  justify-content: space-between;
  padding: 15px 30px 0 10px;
}

.nav-links {
  display: flex;
  right: 20px;
}

.header-nav-blocks {
  height: 50px;
  margin-left: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-nav-button {
  display: flex;
  flex-direction: column;
}

<header>
  <div class="header-top">
    <nav class="nav-bar">
      <img src="https://via.placeholder.com/50" alt="logo oc" />
      
      <ul class="nav-links">
        <li class="header-nav-blocks">
          <a href="#A" class="navlinks">A</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#B" class="navlinks">B</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#C" class="navlinks">C</a>
        </li>
        <li class="header-nav-blocks">
          <a href="#D" class="navlinks">D</a>
        </li>
        <li class="header-nav-button">
          <a href="" class="button-link">Blog</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

Bootstrap fixed top the top navbar - with logo (lef) and navlinks (right)

2 Answers2