Avoiding the collapse of the Bootstrap 4 navbar

Having trouble with the navbar collapsing on itself? The issue seems to occur around 1280px window size, but works fine when the window is wider or narrower.

https://www.bootply.com/AcsaaqReAL

.navbar-custom {
    background-color: #333333;
    border-radius: 5px;
}

/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: #999999;
}

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}
a.nav-link:hover {
color:#ffffff !important;
 text-decoration:none;
} 
.active{
  background-color:#000000;  
}
.navbar {
   margin-top: 10px;
   margin-bottom: 10px;
    padding-top: 0;
    padding-bottom: 0;
}
.nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
 }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

        <div class="row">

            <div class="col-md-4"></div>
            <div class="col-md-4">
                <!-- bootstrap nav -->
                <nav class="navbar navbar-expand navbar-light navbar-custom">
                    <div class="container-fluid">
                        <ul class="nav navbar-nav mx-auto">
                            
                            <li class="nav-item active"><a class="nav-item nav-link">Home 1</a></li>
                          <li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 
                          <li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 
                          <li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 
                          <li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 

                        </ul>
                    </div>
                </nav>
                <!-- /bootstrap nav -->
            </div>
            <div class="col-md-4"></div></div>


            <div id="push"></div>

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Efficient and Clean Code:

Please take a moment to review the detailed explanations provided in the section below.

.navbar-custom {
    background-color: #333333;
    border-radius: 5px;
}

/* Adjusting link color */
.navbar-custom .navbar-nav .nav-link {
    color: #999999;
}

/* Changing active or hovered links color */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

a.nav-link:hover {
color:#ffffff !important;
 text-decoration: none;
}

.active{
  background-color:#000000;  
}

.navbar {
   margin-top: 10px;
   margin-bottom: 10px;
    padding-top: 0;
    padding-bottom: 0;
}

.nav-link {
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 0;
 }

.center{
  margin: 0 auto;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
        <div class="row">

           
            <div class="center">
                <!-- bootstrap nav -->
                <nav class="navbar navbar-expand navbar-light navbar-custom">
                    <div class="container-fluid">
                        <ul class="nav navbar-nav mx-auto">
                            
                            <li class="nav-item active"><a class="nav-item nav-link">Home 1</a></li>
                          <li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 
                          <li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 
                          <li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 
                          <li class="nav-item"><a class="nav-item nav-link">Home 1</a></li> 

                        </ul>
                    </div>
                </nav>
                <!-- /bootstrap nav -->
            </div>
            </div>


            <div id="push"></div>

For a live demonstration, check out this CodePen snippet.

Detailed Explanations:

The code has been optimized, but what changes were made?
The unnecessary col-md-4 class in the HTML was removed. These classes utilized the Bootstrap Grid system, which is not ideal for centering a navbar.

How can I center it effectively?
A better approach is to introduce a designated class, like center, in your HTML as shown here: <div class="center"> Subsequently, apply CSS styles to center it horizontally with the following rule:

.center{
  margin: 0 auto;
}

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

Finding the xPath for a particular line within a node that contains more than one line of text

My HTML code resembles the following structure: <div class='textContainer'> <div class='textLabel'> </div> <div class='text'> "First Line of text" "Second Line of text" "Thir ...

htmlcssxpath

The operation of inserting values into the database encountered an issue due to an invalid cursor state, resulting in a java.sql.SQLException error with the

I am encountering an issue with invalid cursor state error while running this code snippet in my application. The technology stack I am using includes SQL Server 2005 along with JSP and HTML. <% Class.forName("sun.jdbc.odbc.JdbcOdbcDriver"); Conn ...

htmljsptomcatsql-server-2005

Choose the camera when utilizing the navigate.getUserMedia() function

I am currently utilizing the navigate.getUserMedia() method to record video on my mobile device and perform additional processing on it. However, at the moment, it is only capturing video using the front camera. How can I make it switch to the rear facing ...

javascripthtmlhtml5-videovideo-processingnavigator

Prevent Border Around Images within a Child DIV

Currently, I am in the process of designing a Tumblr theme and facing the challenge of making my pages visually appealing. One particular issue that is causing me trouble is my desire to have images on individual pages bordered in green with a maximum wid ...

htmlcss

Adjust the flexslider to transition to a new slide when hovering over the thumbnails

I have a flexslider with thumbnails like this ; https://i.stack.imgur.com/9bfC2.jpg I am looking to change the slide when the user hovers over the thumbnails. How can I achieve this functionality? Here is the jQuery code I am currently using to set up th ...

javascriptjqueryhtml

Slider UI handle in jQuery sliding out of the div container

Could you assist me with a technical issue I am facing? I need to know how and where to prevent the .ui-slider-handle from exceeding the div when it reaches 100%. Feel free to check out the live preview at https://codepen.io/Melwee/pen/Exjwoyo I have inc ...

jquerycssjquery-ui

Navigating to the most recent item within ng-repeat (AngularJS or JavaScript)

I am working on a feature where posts are displayed using ng-repeat in a div, and users can enter new posts in an input box. The posts are sorted so that the latest one appears at the bottom. After adding a new post, I want to automatically scroll down t ...

javascriptjqueryhtmlcssangularjs

Tips for eliminating repetitive code in JavaScript

I have a jQuery function that deals with elements containing a prefix 'receive' in their class or ID names. Now, I need to duplicate this function for elements with the prefix 'send'. Currently, it looks like this: function onSelectAddr ...

javascripthtmljquery

Tips for adjusting the position of overflowing text on a website using CSS in real-time

I'm currently working on an Angular application and I'd like to customize the styling so that any text exceeding 128 characters is not displayed. Ideally, if the text exceeds 128 characters, it should move to the left; otherwise, it should remain ...

cssangulartypescript

Having trouble with HTML code displaying correctly in R leaflet for labels instead of popups

While working with leaflet in R Studio, I encountered an issue when trying to add HTML code to the labels of the icons. Strangely enough, it works for the popups but not for the labels. Below is the code snippet causing the problem: library(leaflet) libr ...

htmlrleaflet

What is the best way to position the logo in the center of the navigation bar, considering there are an unequal number of menu items on each side

As I work on coding a design I found for practice, I am facing the challenge of getting the logo to be centered in the navbar, similar to the layout in the Dribble link below. View Design on Dribble The navigation bar has 4 items aligned on the left and ...

htmlcssfrontend

Would you like to learn how to set an auto-play video as the background in a webpage section, similar to the one found on http://www8.hp.com/in/en/home.html?

I was browsing the HP-India website and noticed they have a cool autoplay video in the background of a section below the header. I would love to recreate something similar on my own website. Any tips on how to achieve this? ...

javascriptcsshtmlweb-deployment

What is the best way to create rounded edges for a spinning spinner using CSS?

Check out my fiddle link here! I managed to create a spinning spinner using CSS, however, I am struggling to round the edges of the black part that is spinning/moving. Can someone help me achieve this effect? .loader { position: relative; border: ...

jqueryhtmlcsscss-transitionsloader

Assistance required with extracting information from JSON format on a website

Seeking assistance in displaying the last 10 songs played on a web page using JSON data. The current code is not fetching and showing the requested information from the json file. https://jsfiddle.net/Heropiggy95/6qkv7z3b/ Any help in identifying errors ...

htmljson

What is the best way to arrange two images next to each other using HTML and CSS in order to effectively utilize a specified width?

I am trying to display two different images side by side within a DIV element that is exactly 800px wide. The images may have varying widths and heights, with some being wider than tall and others taller than wide. I have attempted to place both images i ...

htmlcssimage

Learn the art of animating "basic jQuery filtering" exclusively with CSS

Does anyone have suggestions on how to animate elements when filtered by JavaScript? The code I've tried so far doesn't seem to be working. Here's what I currently have: http://jsfiddle.net/ejkim2000/J7TF4/ $("#ourHolder").css("animation", ...

javascriptcsssortinganimationfiltering

What is the best way to stack text boxes vertically in CSS/HTML?

How can I arrange these textboxes so that .textbox appears at the top, followed by textbox1 below? CSS .textbox { border: 1px solid #848484; -moz-border-radius-topleft: 30px; -webkit-border-top-left-radius: 30px; border-top-left-radius: ...

csshtml

Extract words with specified tags from HTML using Python and return them as a list

Is there a simple way to parse HTML, extract the text, and generate a list of tags associated with each word or snippet of text? For instance, in the given HTML code: <em>Blah blah blah</em> blah again <i>and then again</i> The de ...

pythonhtml

Setting !important to every property's value at once

One interesting approach I am using is applying !important to all of the css properties' values like this: .someclass{ color: #f00 !important; background-color: #ff0 !important; margin: 0 !important; padding: 0 !important; width: 100% ! ...

htmlcss

Simple method for displaying or hiding divs depending on the status of a selected radio button using CSS only

I am currently working on showing or hiding div elements based on the status of a radio button. These divs are located after the input buttons in a different section of the page, and I am facing challenges in referencing them accurately. This code is for ...

cssradio-buttonshow-hidechecked