aligning two navigation bars in Bootstrap

My website has two navigation bars, one with a red background and the other with a blue background along with multiple anchor tags.

Recently, I noticed that when I reduce the screen size, the second navigation bar doesn't display correctly as it did before. Can anyone provide me with a solution for this issue?

For reference, here is an image of the problem: https://i.sstatic.net/0i19u.png

Below is the code snippet that includes the navigation bars:

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" type="text/css" href="CSS/Header.css">
      <link rel="stylesheet" type="text/css" href="CSS/styles.css">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>
   <body>
      <header>
         <nav class="navbar navbar-expand-sm  navbar-dark navbar-custom" style="background-color: red"></nav>

         <nav class="navbar navbar-expand-sm container-fluid" style="background-color: #01adcd;">
            <button class="navbar-toggler toggler-example" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1"><span class="dark-blue-text"><i class="fas fa-bars fa-1x"></i>&;</span></button>

            <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent1">
               <ul class="navbar-nav mx-auto order-0" style="background-color: #01adcd;">
                  <!-- Navigation items here -->
               </ul>
            </div>
         </nav>
      </header>
   </body>
</html>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

When I ran this code without including header.css and styles.css, everything worked fine. Now, I am going to share the snippet here but please make sure that you include Header.css and Styles.css.

<!DOCTYPE html>
<html lang="en>
<head>
   <title>Example</title>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
   </head>
   <body>
    <header>
    ...
      <!-- Your header content -->
    ...
    </header>
</body>
</html>

Answer №2

Edit - All Previous Answer Removed

The issue you are experiencing is due to having too many items in your navigation, causing the width to be too large.

To address this, consider updating the navbar-expand-sm class to 

navbar-expand-md</code) to adjust the breakpoint at which the menu collapses into a "burger menu".</p>
<p>Alternatively, you can hide menu texts on small screens and instead add them to the <code>title
properties of your icons or their wrappers for a hover-over "menu description".

Additionally, the mt-auto mb-auto col classes for each <li></li> element are unnecessary. Margin/padding should only be applied to the wrapper, as the navbar classes automatically arrange the items. Including col directly on your items disrupts the responsiveness of your nav wrapper.

Retain col but switch to navbar-expanded-md:

... (your HTML code snippet here)

Remove col and keep nav as navbar-expanded-sm:

... (your revised HTML code snippet here)...

In the second snippet, I have added the text-center class to your icon wrappers.

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

Determining the decimal width of an element using jQuery

I've been searching everywhere for a method to accurately determine the width of an element without rounding. The reason behind this is that I have multiple elements floated to the left with display inline-block and I am attempting to automatically ad ...

jqueryhtmlcss

How to align a child element in the center when the parent is not centered or taking up the full width

I am currently working on building a layout with Bootstrap 4.6, and I am facing an issue with centering the header, columns/cards, and buttons on the page width while the parent container is left-aligned and not full width. Additionally, I need help with ...

htmlcssbootstrap-4

Guide on showcasing MYSQL table columns in an arranged CSS block layout!

I am trying to format table columns using a CSS display:block style. I want the final result to resemble the table displayed in the image below: https://example.com/table_image.png Currently, I am utilizing MYSQL and PHP to showcase the columns of the ta ...

phphtml

Position a button at the bottom of a b-col component in Vue Bootstrap

A grid layout is set up with the following structure: <b-container> <b-row class="vh-100 text-center" align-v="center"> <b-col><b-button class="main-navigation-button" variant="primary"> ...

twitter-bootstrapbootstrap-4bootstrap-vue

Tips for customizing the CSS styling of the validation ng-class error

Seeking advice: Is there a way to customize the CSS style of the 'error' validation error for ng-class in Bootstrap v3? This is my current code: ng-class="(form.datos.$invalid) && ( form.datos.$touched || submitted) ? 'error&apos ...

cssangularjs

Maintain the alignment of content in the center while expanding background images

I am looking to create a website with a split background effect, similar to the design on this site . I want to maintain a content container width of 980px while achieving this look. I attempted to accomplish this by adding height and background color pro ...

htmlcssbackground-color

Guide on how to turn off a checkbox "toggle switch" using JavaScript

Being relatively new to CSS and HTML, I recently experimented with creating a checkbox toggle switch using this resource. I now have a specific requirement to disable this toggle switch upon clicking a different button labeled 'Reset', making it ...

javascripthtmlcss

Python Webscraping using Selenium

I'm experiencing difficulties webscraping the list of DAOs from masari.io due to some errors that I encountered: DeprecationWarning: executable_path has been deprecated, please pass in a Service object driver = webdriver.Chrome(options=options, exec ...

pythonhtmlseleniumweb-scrapingdynamic

Issues with Mouse Hover/Image Replacement

In this particular example, I am attempting to achieve a simple functionality where an image changes when the mouse hovers over it, and reverts back to the original image when the mouse is no longer hovering. However, despite my efforts, there seems to be ...

jqueryhtmlcss

Filter and transfer data from one Angular array to another

As a newcomer to Angular, I am working with an array of events containing multiple arguments. My goal is to filter these events and separate them into two new arrays: upcoming events and past events. Below is a snippet of the TypeScript code I am using: a ...

htmlarraysangulartypescript

What is the best way to limit the number of visitors allowed on a webpage?

I'm in the process of working on an application that includes an edit button: Here's my edit button: <th title="Edit task" class="edit" style="float: right; $color;"> <?php echo "<a href=edit.php?id=" . $row["id"] . "> ...

phphtmlmax

Tips for creating a disabled appearance for a font awesome icon button:

I'm currently using a font awesome icon button and I'm looking to create a disabled state for the icon. Although I can achieve a disabled button appearance using the Bootstrap disabled class, the button remains clickable. Is there a way to make i ...

htmlcssbootstrap-4font-awesome

The background color of the active tab is updated upon loading the page

I have attempted to modify this code to change the background color of li tag on click. It successfully changes the background color when hovering or clicking, but unfortunately reverts back to the default color upon page refresh. I am looking for a soluti ...

javascriptjqueryhtmlcss

Incorporate Multiple Choice Queries into your PHP Online Form

My PHP web form consists of text fields, dropdowns, and radio buttons. When submitted, the information is sent to me via email. I am trying to implement a multiple choice question with checkboxes. Although I can create the form field, I'm struggling t ...

phphtmlforms

Use flex-grow and flex-wrap to split elements onto separate lines

My parent div, ".tags", contains both links and a title. The parent div is styled with "display: flex;" and "flex-wrap: wrap;". I want the link elements to move onto a new line when they wrap, without being pushed to the right of the screen by the title. ...

htmlcssflexbox

Guide for adding a button in HTML table with event creation using ASP.NET and C# language

I am trying to dynamically add a button in each row of an HTML table column using C#. The button is being created for each row, but the click event is not being triggered. Here is the code snippet from the code behind and ASP.NET: public string ge ...

c#htmlasp.net.net

The HTML autofill pop-up box shifts its position

This autofill function for a text box that I found on is causing some display issues. When typing in a letter, the popup with suggestions shifts the rest of the content below it. How can I resolve this issue? I have attempted to use z-index without succes ...

jqueryhtmlcss

Using jQuery to style Ajax content with CSS

Using jQuery ajax to retrieve data is a great choice. It results in clean and sleek coding. I have successfully implemented the code below, but I am uncertain if applying CSS in that manner is the correct approach. Any thoughts? While there are similar q ...

jquerycssajax

Incorporate Videos into HTML Dynamically

Is there a way to dynamically embed videos from a source into an HTML page? My goal is to make it easy to add new videos to the page by simply placing them in a folder and having them automatically embedded. I am wondering if this can be achieved using J ...

javascriptjqueryhtml

Click to enlarge the text on button press

Recently, I've been working on a project involving a table that has a button at the end. My goal is to double the text size of the rows in the table when the button is clicked. As someone who is new to JQuery, this question may sound basic but any hel ...

jquerycss