Fixed top Bootstrap navbar - featuring a logo on the left and navigation links on the right

Having trouble creating a responsive fixed navbar with logo and navlinks on both sides. I removed all Bootstrap elements from the code I'm sharing here, can someone help me out?

I need a solution using Bootstrap to ensure everything is 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c6e6363787f787e6d7c4c39223e223f">[email protected]</a>/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>
htmlcssbootstrap-5

Answer №1

To achieve a full-width navbar, all you had to do was set the width of the flex container to 100%. By default, when an element is turned into a flex container, it collapses 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>

Answer №2

It seems like the desired outcome you are aiming for is as follows:

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

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

.header-navigation-button {
  margin-left: 5vw;
  margin-right: 5vw;
  display: flex;
  flex-direction: row;
}
<header>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abcdef">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <div class="top-header">
    <nav class="navigation-bar">
      <img src="assets/img/logo-oc.png" alt="logo oc" />
      <ul class="nav-links">
        <li class="header-navigation-blocks">
          <a href="#A" class="navlinks">A</a>
        </li>
        <li class="header-navigation-blocks">
          <a href="#B" class="navlinks">B</a>
        </li>
        <li class="header-navigation-blocks">
          <a href="#C" class="navlinks">C</a>
        </li>
        <li class="header-navigation-blocks">
          <a href="#D" class="navlinks">D</a>
        </li>
        <li class="header-navigation-button">
          <a href="" class="button-link">Blog</a
                >
              </li>
            </ul>
          </nav>
        </div>
      </header>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on disregarding events within an html table

I have a see-through table with a width set to 100% that houses various HTML content. I am utilizing the table to properly center a particular element on the screen. However, the table is intercepting mouse events and preventing users from clicking on lin ...

javascripthtmlcssbrowserdom-events

The functionality of Foundation's 12 grid system is not functioning correctly

Check out the code snippet below: <link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="style ...

htmlcssresponsive-designzurb-foundation

Sharing HTML code from R to your Wordpress posts

I have successfully created an RMarkdown file that generates a visually appealing HTML page. You can view the output here: Now, my goal is to embed this HTML code onto our Wordpress site at: The challenge I'm facing is getting the content onto the p ...

htmlrwordpressbashr-markdown

Tips for verifying if two passwords match during registration and displaying an error message if they do not match

How can I ensure that the passwords entered in a registration form match and how do I validate the entire form to be correct? <form id="registerForm" method="POST" action="/register" class="form2"> ...

javascripthtmlcss

Is it possible to use bootstrap to hide specific components depending on the size of the media screen?

Struggling with styling responsiveness and hoping to find a Bootstrap class that can easily hide components on medium and small screens. I'm looking for a way to hide headings, paragraphs, buttons, and more without any extra hassle. ...

htmlcssbootstrap-5

Can fputs() or fwrite() encode HTML special characters at times?

I have encountered an issue where I am outputting HTML content as a string to an HTML file, but some servers are encoding special characters (for example " becomes \&quot;). Even after using the htmlspecialcharacters_decode function, the problem p ...

phphtmlstringcharacter-encodinghtmlspecialchars

What is the strategy to load a div exclusively when triggered by a click event, instead of loading it

Can anyone assist me with a problem I am facing on my scripting page? I am currently working on a website that showcases properties. I would like to know how to prevent a specific div from loading when the page initially loads, and instead have its content ...

javascriptjqueryhtml

Calculating "Time passed" utilizing a predefined timestamp. ("2012-03-27 16:01:48 CEST")

Is there a way to automatically convert the timestamp "2012-03-27 16:01:48 CEST" into "1 hour and 22 minutes since" with time zone management? I'm unable to modify the original timestamp format, which will remain as "2012-03-27 16:01:48 CEST" or simil ...

phpjavascripthtmltime

Using HTML5 chunks and web workers will not involve any uploading of files

I encountered an issue while working with html5 slice and webworker. It seems that when I try to upload a file using the uploadFile function, nothing is happening and the file is not being uploaded. <html> <head> <title>Uploa ...

phpjavascripthtmlfileweb-worker

Column taking up the entire width positioned on the left side

Is there a way to make a column expand to the full width on the right within a container? <div class="container"> <div class="row"> <div class="col-5"> Lorem ipsum </div> <div class="col-7 img-c ...

cssbootstrap-4

Why isn't the image adjusting its size to fit the container it's placed in? Am I missing something?

My issue involves getting an image to resize and stay within its designated div. However, the image continues to spill over onto the div below when I adjust the browser size or view it on my laptop. I have not set any fixed dimensions for the image. I am ...

cssimagetwitter-bootstrapresponsive-designbootstrap-5

Problem with Jquery show/hide feature only resolved after refreshing the page

I built a checkout page that consists of three fieldsets with unique IDs - 1, 2, and 3. I want the page to initially display only fieldset 1 while hiding fieldsets 2 and 3. Here is the jQuery code I used: $(document).ready(function(){ $("#1").show(); ...

phpjavascriptjquerycss

How can I make an image disappear after animation with CSS?

I experimented with this code snippet in an attempt to fade out an image, .splash-wrapper { animation: fadeIn 4s; -webkit-animation: fadeIn 4s; -moz-animation: fadeIn 4s; -o-animation: fadeIn 4s; -ms-animation: fadeIn 4s; animation-duration: ...

htmlcssfadeout

The expression `Object.prototype.toString.call(currentFruit) === "[object Date]"` checks if the object referenced by `current

Hi, I'm just starting to learn JavaScript and I have a question about an if condition that I came across in my code. Can someone please explain what this specific if condition does? Object.prototype.toString.call(currentFruit) === "[object Date]& ...

javascripthtmljquerycssjquery-events

Ensure that the following div remains positioned beneath the current one

After reading through this question on Stack Overflow, about creating a responsive table with both vertical and horizontal headers, I came across this particular issue, demonstrated in this codepen example: Currently, the second table appears directly bel ...

htmlcss

Update the form field with today's date in a JHipster application

In our current project in JHipster, we are facing a challenge with setting the default value of a form field as the current date. JHipster offers a moment format for dates, which is essentially an ngbdatepicker. However, when attempting to change the inpu ...

htmlangularjstypescriptjhipsterjhipster-registry

What is the best way to make my text stand out against a faded background?

After mastering the basics of web development on Codecademy, I was eager to start my own blog and create a unique website. One challenge I encountered was figuring out how to fade the background without affecting the text. Despite researching various solut ...

javascriptjqueryhtmlcss

What is the best way to create two fields side by side within a single row?

I'm struggling to merge the data array of two different identity types into one row as a field. Here's the code I've written: import React from 'react' import {Form,Field,ErrorMessage,Formik} from 'formik' import * as yup ...

javascripthtmlcssreactjstailwind-css

Tips for customizing bootstrap's fixed navbar-default to ensure that the list items align downwards:

Is it possible to customize the bootstrap fixed navbar-default so that the li elements align downward instead of at the top? If you have any corrections or custom solutions, I'd love to see them! Feel free to share your code on platforms like CodePen, ...

javascriptjqueryhtmlcsstwitter-bootstrap

When a div with a height of 100% exceeds its parent container, it spills over to the flexbox

I have a unique problem with my flexbox layout. Each element within the flexbox contains a card that varies in height. Attempting to make the cards occupy the remaining space of their parent container causes them to overflow into the row below. Even settin ...

htmlcssflexbox