What is the best way to incorporate these elements into my Bootstrap 5 navbar design?

This is the current layout of my navbar, with the logo in the center. I now want to enhance it by adding a search bar and some icons similar to this example: ideal navbar

Here is my current navbar for reference: My current navbar

<header>

    <nav class="navbar navbar-expand-md ">
        <div id="nav" class="container-fluid">
            <a class="navbar-brand d-md-none" href="index.html">
                <img src="relogo.png" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="produkte.html">PRODUKTE</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ANBIETER</a>
                    </li>
                    <a class="navbar-brand d-none d-md-block" href="index.html">
                        <img src="relogo.png" alt="">
                    </a>
                    <li class="nav-item">
                        <a class="nav-link" href="#">ÜBER UNS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="kontakt.html">KONTAKT</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>

I want to add a search bar at the end of the navbar, but after doing so, the logo is no longer centered and the icons appear below the navbar content. Here is how it looks currently: current 

<li> <form class="d-flex"> <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"> </form> </li>

htmlcssnavbarbootstrap-5

Answer №1

It is recommended to set the position of the search bar as absolute in relation to the navbar.

#nav-header {
  position: relative;
  display: flex;
  justify-content: center;
}

#nav-searchbar {
  position: absolute;
  right: 20px;
  width: 100px;
}

.navbar-brand img {
  width: 40px;
  height: 40px;
}

@media (max-width: 768px) {
  #nav-searchbar {
    top: 15px;
    left: 80px;
    right: 20px;
    width: 70%;
  }
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3d5f5252494e494f5c4d7d08130e130f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e88a87879c9b9c9a8998a8ddc6dbc6da">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
  <header>
    <nav id="nav-header" class="navbar navbar-expand-md d-flex items-center">
      <div id="nav" class="container-fluid">
        <a class="navbar-brand d-md-none" href="index.html">
          <img src="https://fastly.picsum.photos/id/18/200/200.jpg?hmac=naWL3P7tSw9NeN2OXqD0XhBgnBko_h5B-Z3UdUVLFcU" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav mx-auto">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="produkte.html">PRODUKTE</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">ANBIETER</a>
            </li>
            <a class="navbar-brand d-none d-md-block" href="index.html">
              <img src="https://fastly.picsum.photos/id/18/200/200.jpg?hmac=naWL3P7tSw9NeN2OXqD0XhBgnBko_h5B-Z3UdUVLFcU" alt="">
            </a>
            <li class="nav-item">
              <a class="nav-link" href="#">ÜBER UNS</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="kontakt.html">KONTAKT</a>
            </li>
          </ul>
        </div>
      </div>
      <div id="nav-searchbar">
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        </form>
      </div>
    </nav>
  </header>

</body>

</html>

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

HTML form submission with a grid of multiple choice options

I have created my own multiple choice grid: <div style="overflow-x:auto;"> <table class="w-100"> <tr> <td class="border"></td> <td class="border">Yes</td> <td class="border">No</ ...

javascripthtmljquery

Is it a good idea to relocate the pagination to the top of the DataGrid in MUI

Can someone suggest a solution for moving the default pagination of XGrid above the table? Or do I need to develop my own custom pagination instead of using the built-in feature with XGrid? ...

cssreactjsmaterial-ui

The hierarchy of CSS in Vue components

I've developed a customized CSS framework to streamline the design process across all my internal projects. The central file is structured as shown below: @import "~normalize.css/normalize.css"; @import "_variables.scss"; @import "_mixins.scss" ...

htmlcssvue.js

spaces between sections with no padding or borders

I came across the following layout on the web and noticed that the divs do not align perfectly. The top of a lower div does not touch the bottom of the div above it when borders are removed, although they do when borders are added. There seems to be an i ...

htmlcss

repeating the identical content in the same setting

I am encountering an issue with jquery as I have 2 different sets of icons, each of which I want to do the same thing: My primary codes are <ul> <li> <a href=""> <i class="fa fa-facebook"></i> ...

javascriptjqueryhtmlcss

Styling components in React using inline styles that are based on JSON values

I'm successfully pulling in JSON data and mapping it within a React component. However, one of the values in the JSON is a HEX code that I want to apply as an inline style for the background color of a div. I have experimented with various methods, b ...

cssjsonreactjs

unable to locate the nearest available table

This is my HTML code: <div id="dvUser"> <table id="tblUser" > <tbody> <tr> <td> <input class="sfCheckBox" type="checkbox" title="view" checked="checked"> </td> </tr> <tr> <td> <input class="sf ...

jqueryhtml

What's the best way to align several buttons in the center of the screen horizontally?

I'm struggling to properly align divs with images inside another div. My goal is to insert buttons into my HTML and use jQuery to center them automatically, but I can't seem to get it right. You can view the fiddle I've created here: http:/ ...

javascriptjquerycsshtml

Securing containers with CSS styling

I'm currently working on a website and I've encountered an issue with positioning. Within the content section, I have two main text boxes - one in the top left corner and one in the bottom right corner. However, when the browser window is resized ...

csspositioncss-position

Transforming a JSON string containing multiple arrays into a JavaScript object

My JSON file is structured as follows: { "items":[ { "username":"abc", "orderID":"1234", "commentHistory":[ { "comment":"Comment Date: 2016/12/09 13:44:23" }, { ...

javascripthtmlarraysjson

Floating a DIV causes it to shift down in a responsive layout at specific window sizes

My issue lies with a fluid layout that works well for the most part. However, at specific window widths, one of four floating div-elements unexpectedly shifts down. This inconsistency happens at nearly 20 different widths, differing by only one pixel. For ...

csshtml

What are the reasons to steer clear of setting y.innerHTML equal to x.innerHTML?

If we have a DIV x on the webpage and want to duplicate its contents into another DIV y, we might be tempted to use the following code: y.innerHTML = x.innerHTML; This can also be achieved using jQuery: $(y).html( $(x).html() ); However, it is recommen ...

javascriptjqueryhtmlbrowser

Looking to transform a PHP output value

I have a form with checkbox input, and a hidden 'sibling' input attached to it, in order to generate values of either '0' or '3' based on the checkbox status. When unchecked, the value is '0', and when checked, the ...

javascriptphphtmlforms

Issue with transitioning from Bootstrap 2 to Bootstrap 3 navbar

I am facing an issue with my navbar that collapses perfectly. However, when using the script below to automatically hide the menu upon clicking a menu item: $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { $('.navba ...

jqueryhtmlcsstwitter-bootstrap-3

The transparency feature is malfunctioning in IE9 when using a background

This is a demonstration of a lightbox feature. You can find the code here. When you click on the link "Show Panel," a form will pop out. It works correctly in Firefox but not in IE9. The HTML code is simple: <body> <a id="show-panel" href="#"&g ...

jqueryhtmlcssinternet-explorerlightbox

The condition is not being recognized after clicking the third button

When the button is clicked for the first time in the code snippet below, all divs except for the red one should fade out. With each subsequent click, the opacity of the next div with a higher stack order should be set to 1. Everything works fine until the ...

javascripthtmlcssif-statementopacity

Activating the Play button to start streaming a link

Recently delved into the world of Ionic 4 and Angular, so definitely a beginner :) Purchased a UI Template from code canyon but didn't realize I needed to code the music player part. Been trying to get a music stream playing but no luck. Came across ...

javascripthtmlangularionic4

Divide the page vertically. On the left side, feature an eye-catching image, while on the right side,

While I have a good understanding of bootstrap 5, I am currently working on a project that requires me to split the page down the center. However, I also need to incorporate a container in the middle that sets a boundary for the text so it doesn't exp ...

htmlcsstwitter-bootstrapbootstrap-5

What can you do with a 2D array and getElementsByTagName?

My current challenge involves trying to utilize JavaScript to access table cells by using the getElementsByTagName method. The end goal is to compare each cell in the array to a specific value and then change the background color of that cell based on the ...

javascripthtmlgetelementsbytagname

What is the best way to retrieve the current CSS width of a Vue component within a flexbox layout grid after it has been modified?

There's something about this Vue lifecycle that has me scratching my head. Let me simplify it as best I can. I've got a custom button component whose size is controlled by a flex grid container setup like this: <template> < ...

javascriptcssvuejs2flexboxvuetify.js