Create a Cutting-edge Navbar in Bootstrap 5.1 Featuring Three Distinct Sections: Left, Center, and Right

I'm encountering challenges with formatting the navbar layout I am currently designing.

My goal is to create a navbar with three distinct sections as outlined in the title. In the first section on the left, there should be an image and a button-like element positioned in the same row regardless of screen width.

For the second section at the center, I simply want an h1 above an h2 with text centered.

Lastly, for the third section on the far right, I need it to be divided into a 2x3 grid setup. The first column should contain a button spanning two rows, the second column should house two buttons per row, and the third column needs to have a button with an image inside covering two rows while taking up more space horizontally compared to the others (ideally 25%, 25%, 50% distribution).

Below is my current code snippet:

INSERT YOUR CODE SNIPPET HERE

Desired Navbar Layout: View Here

I'm fairly new to seeking help on forums, so please forgive any oversight in terms of editing or formatting rules.

I've experimented with various examples from search results, including ones sourced from forums and Bootstrap documentation. Despite these efforts, I am struggling to achieve the precise layout I envision. At times, the navbar appears misaligned without me adjusting margins or padding settings.

I have also attempted solutions proposed on Stack Overflow, but incorporating elements within the navbar items to match my layout requirements seems to pose some challenges in cohesion and positioning.

UPDATE: You can find my CodePen project here: Visit CodePen

htmlcssbootstrap-5navbar

Answer №1

It appears that some of the classes you used, like navbar-toggleable and navbar-light, are not recognized as valid Bootstrap classes, so I have removed them for clarity.

In Bootstrap, a list of links is typically structured using a ul with a navbar-nav class, rather than being used for logos or center text. Additionally, in your case where the buttons seem to be actions rather than links, you may not need a ul structure at all.

The best practice for using Bootstrap columns is within a container div, not directly in a navbar. The navigation bar has its own set of styles that can complicate the row/column structure if applied incorrectly.

To organize your four buttons effectively, consider utilizing a CSS grid layout (refer to my example).

I noticed that your example did not account for a mobile version, so I included a `navbar-toggler` button given that you used the `navbar-expand-lg` class on the navbar; this allows you to visualize how your navigation bar might appear on smaller screens.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232475c415c41">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />

<style>
.navbar-brand {
  margin-right: 0;
  flex-basis: 480px;
  /* same as the button group so the center text is centered */
}

.grid-container {
  display: grid;
  grid-gap: 10px;
  grid-template-rows: 42px 42px;
  grid-template-columns: 92px 92px 276px;
}

.btn-storage {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  background: linear-gradient(0deg, rgba(255, 191, 2, 1) 0%, rgba(255, 228, 36, 1) 84%, rgba(255, 255, 60, 1) 100%);
  border-color: #fbe633;
}

.btn-table {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  background-color: #198754;
  border-color: #177a4c;
}

.btn-table svg {
  width: 18px;
  height: 28px;
  fill: white;
}

.btn-key {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  background-color: #212529;
  border-color: #171a1c;
}

.btn-key svg {
  width: 18px;
  height: 18px;
  fill: white;
}

.btn-logo {
  grid-row: 1 / 3;
  grid-column: 3 / 4;
  color: transparent;
  background-image: url('https://fakeimg.pl/300x80/d69f18/fff?text=Product+Engineering');
  background-size: contain;
  /*or cover */
  background-color: #d69f18;
  border-color: #c99517;
}

</style>

<nav class="navbar navbar-expand-lg bg-light border-bottom text-black">
    [...]
</nav>
<h1>Hello, world!</h1>

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0e0303181f181e0d1c2c59425f425f">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

Your example utilized Bootstrap 5.1.3, which was replaced by Bootstrap 5.2.0 in July 2022. For consistency, I have updated the example to use Bootstrap 5.3.3, the latest version available.

One additional suggestion – it's recommended to utilize Bootstrap’s code snippet feature instead of external platforms like CodePen, as external examples may become inaccessible over time.

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

Modify the hash URL in the browser address bar while implementing smooth scrolling and include the active class

I have implemented a smooth scroll technique found here: https://css-tricks.com/snippets/jquery/smooth-scrolling/#comment-197181 $(function() { $('a[href*=#]:not([href=#])').click(function() { if (location.pathname.replac ...

javascriptjquerycsssmooth-scrolling

Tips on how to perfectly position an element in the middle of an HTML

I am struggling to get the textarea element centered using margin: 0 auto. I even attempted to place the element inside a div with margin: 0 auto style. <div style="margin: 0 auto;"> <textarea rows="4" cols"100"></textare> </div& ...

htmlcss

What could be causing my CSS dropdown menu to not display properly?

I'm having trouble getting the dropdown to work when hovering over the li element with "portfolio" in the text. The code seems correct, but nothing happens when I try to hover over "Portfolio." Below is the code snippet: #navmenu ul { position: ...

htmlcssdrop-down-menuhover

Crashes within an HTML5 Canvas

Having recently started to explore Javascript and working with canvas elements, I've encountered a roadblock when trying to implement collision detection for the canvas walls. Typically, I have a small square drawn on the canvas that I can move aroun ...

javascripthtmlcanvascollision-detection

The z-index is not functioning properly in terms of layering correctly

Seeking advice on z-index... I'm experimenting with the code and trying to get my id="hidebar" to appear above the "content" and "content-inner" divs. Apologies if this is elementary, but I'm having some trouble =D CSS structure file: body { ...

cssz-indexlayer

What obstacles may hinder the loading of CSS with PHP variables?

Visit this website for agriculture updates: I have utilized PHP to generate specific color schemes and styles. It seems to function correctly on all tested desktop laptops, however, it fails to load the CSS files (only loads HTML) on a Galaxy Note runnin ...

phpandroidcss

Tips for aligning text and an image next to each other within a table column using HTML

I have a table where I am displaying an image and text in separate columns, with the image above the text. However, I want to showcase them side by side and ensure that the table fits perfectly on the screen without any scroll bars. Here is my HTML code s ...

htmlcss

Yii ReCaptcha for better mobile compatibility

Incorporating the extension from http://www.yiiframework.com/extension/recaptcha/ into my Yii project has been a successful endeavor thus far. However, in an effort to enhance the responsiveness of my website, I recently made some modifications to the cod ...

cssyiirecaptcha

Display the text and values of textareas/inputs located within a designated section of a form

I am looking to extract the labels and values of specific textareas and input tags on my website. I don't want to capture all of them, just those within a particular area. For example, I only want to retrieve the values that come after the textarea wi ...

jqueryhtml

developing a dropdown menu feature

I'm struggling with a small issue related to my drop-down menu function. My goal is to hide the visibility of a menu tab after it has been clicked for the second time. Below is the code snippet I've been working on: HTML:- <nav class="clea ...

javascriptjqueryhtmlcss

I am having trouble getting any value back from my POST request using HTML, Node.js, and Express

I've been attempting to make a simple post request from an HTML page, but when I check the console after the post, it doesn't return anything. I'm confident that I have correctly set up the body parser on the server side. Could there be some ...

htmlnode.jsexpress

DIV with Scrollbar

Is there a method to ensure that both scrollbars are displayed, regardless of whether vertical or horizontal scrolling is required? Currently, I am only seeing one scrollbar when needed. I want to achieve this without restricting the use of the Height or ...

css

Implementing tooltips using JavaScript within Bootstrap 5

Is there a way to add both a tooltip and popover to the same element in Bootstrap v5 via Javascript? I have attempted to enable both of them using JS as it seems like the best approach. The tooltip that was added through html is functioning correctly: ...

javascripttwitter-bootstrapbootstrap-5

There is excessive white space at the bottom of my Index page after the footer that needs to be removed

Recently began working on converting a PSD to HTML and I've reached a point where everything seems fine. However, I understand that my CSS programming may not be the best at the moment. With your help, I am confident that I can learn and improve gradu ...

htmlfooter

Adjust the message hues upon form submission with Ajax

Can anyone provide assistance? I am in need of a functional form for sending emails. <form enctype="multipart/form-data" role="form" id="form" method="post" action="handler.php"> <div class="form-row"> <div class="form-g ...

phpjquerycssajax

tips on customizing buttons within form groups

I have set up two separate form-groups: My goal is to click on each button within each group and toggle its style from grey to green, and vice versa. However, when I click on a button, all buttons within the group turn grey except for the one that was cli ...

javascriptjquerycssbootstrap-4

Update the input type on the fly

Hey there, I've got a bit of an unusual question. I'm looking to create a form with fields that vary for each user, like a text input or a checkbox. I attempted using Angular to achieve this: <div ng-controller="myCtrl" ng-repeat="x in prova" ...

javascripthtmlangularjs

The max-height property is not applied to a border-box div with padding

One technique we use is the percentage trick on paddings to maintain aspect ratio in a div as the user scales their window. Here's an example: .div { background: red; width: 80%; margin: 0 auto 10px; -webkit-box-sizing: border-box; ...

css

Instructions on how to toggle the visibility of a div when hovering over a different a tag

To keep things simple, I'm looking to create a visibility toggle effect on a div when someone hovers over an anchor tag. Similar to the behavior of the four buttons on this example link: The issue I'm facing is that I want the div to appear or b ...

javascriptjqueryhtmlcssjquery-ui

Designing Forms with Label Placement above Input Fields

I am working on creating a form with the following layout: <form name="message" method="post"> <section> <label for="name">Name</label> <input id="name" type="text" value="" name="name"> <label for="email"& ...

htmlcss