Question 137034 in Html Question posted in
Some basic documentation can be found here.

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

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/[email protected]/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>
Tags:

2

Answers


  1. 0

    I just added position:absolute to .nav-links.
    I think you are trying to achieve this:

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

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

.nav-links {
  display: flex;
  position: absolute;
  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>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

    If I am wrong, please let me know in comment section.

    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search