Bootstrap navbar partially collapsed with inner items concealed not at the edges

Many discussions have come up regarding partially collapsing Bootstrap navbars, such as:

Item1  Item2  Item3  Item4  Item5

Is it possible to achieve the following collapsed format:

Item1  Item2  Item3  =menu=

Or:

=menu=  Item3  Item4  Item5

This method typically involves using two navbars where one collapses and the other remains visible.

However, I am interested in collapsing a single navbar, specifically when certain items are not located at the edges:

Item1  Item3  Item5  =menu=

Can this customization be achieved with Bootstrap 5?

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

Unfortunately, Bootstrap doesn't offer a built-in solution for this specific issue. However, you can implement a clever workaround by utilizing two identical navbars.

First navbar:

  • Includes the d-none d-md-block classes to hide certain navigation items on smaller screens
  • Displays all navigation items on larger screens
  • Doesn't feature a toggle button, or if it does, the "external content" acts as the second navbar

Second navbar:

  • Contains the same navigation items and a toggle button
  • Is always collapsed
  • Shows the toggle button on small screens; when clicked, it reveals a dropdown with all navigation items

For example, on a large screen:

Item1  Item2  Item3  Item4  Item5

And on a small screen:

Item1  Item3  Item5  =menu=
                     Item1
                     Item2
                     Item3
                     Item4
                     Item5

Alternatively, on a small screen:

=menu=  Item1  Item3  Item5
Item1
Item2
Item3
Item4
Item5

Answer №2

Without viewing the code directly, pinpointing an exact solution may prove challenging. If there are only a few menu options, utilizing media queries could be effective (applying styles to all navigation bar items except the first two and last one). Alternatively, JavaScript can be utilized to create a condition based on screen size in order to trigger an event. Sharing the specific section of code you are struggling with would greatly simplify the troubleshooting process.

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

Activate a click event on an element using Simple HTML DOM

I need assistance in triggering a click on the element below and then retrieving its innertext. <a class="btn btn-sm btn-default" href="javascript:;" onClick="score(238953,this)">Show result</a> Once the "onClick" event is triggered, the elem ...

javascriptphpjqueryhtmlsimple-html-dom

Modifying the CSS will not be reflected in the appearance

Currently, I am facing an issue on a website where I cannot make any changes to the CSS stylesheet. Whenever I attempt to modify a style, it appears to work temporarily but then reverts back to its original state once I release the mouse. It seems like the ...

cssdreamweaver

Accordion Box glitch detected in Firefox browser

I have been working on a JavaScript function that controls a slide up/down box. However, I've encountered some issues with Firefox as the box only opens and closes once before failing to work properly again. Upon further investigation, it seems that F ...

javascriptjqueryhtmlcss

Looking for advice on using media queries to resize my background image - any tips?

I'm struggling to resize my background image using media queries. Can anyone offer suggestions or solutions? I've tried applying the media query for my background image like I do with other elements, and it's not working properly. The issue ...

htmlcssresponsive-designmedia-queriesbackground-image

Strategies for managing multiple timeouts in alert notifications

Dealing with multiple timeouts for displaying alert messages has been a challenge in my application. Alerts are triggered when creating, playing, pausing, or deleting a task. I have set the timeout for all alerts to 5000 using $timeout(). Here is the code ...

angularjstwitter-bootstrap

Remove the initial DIV element from the HTML code

I have created a unique chat interface by combining JScript, php, and jquery. The chat messages are saved in an HTML document that gets displayed in the text area. Each user input message is contained within its individual div tag: <div>Message</ ...

javascriptjqueryhtml

How can I send form data using libcurl in C++ for a particular form?

How can I post and submit form data using libcurl and C++ for the form below? <form id="loginContainer" class="controllerContainer" action="/j_spring_security_check" method="post"> <h2>Login</h2> <hr> <fieldset> <div ...

htmlc++formslibcurlfieldset

Tips for displaying lower quality images while initially downloading higher quality versions

I need to download and display a large image in an img tag. Since the image is not Progressive JPEG, it will render as it downloads. Is there a way to show a low-resolution version of the image while it fetches from the server using only CSS or an HTML p ...

javascripthtmlcss

Respond to adjustments in iframe height

I am currently working on a page with an embedded iframe. The height of the iframe may change dynamically while on the page. I am wondering if there is a way to adjust the height of the iframe based on its content. Even after trying to set the height at ...

javascripthtmlcssiframe

Is there a way to modify the CSS or add custom styling within an iframe form?

Currently I am working on the following page: , where an embedded javascript form called infusionsoft (iframe form) needs to be made responsive at the request of my client. I'm wondering if there is a way to override the css or inject custom styles i ...

javascripthtmlcsswordpressiframe

Flex: 1 does not completely fill the Angular layout div in vertical dimensions

I am currently developing a sidebar using Angular and Flex. The app-sidebar is nested within the Angular component layout shown below: <div fxlayout="row" fxFill> <app-sidebar fxLayout="column" fxFlex="10%"></app-sidebar> <div ...

htmlcssangularflexbox

How to center an item in a Bootstrap navbar without affecting the alignment of other right-aligned items

Currently, I am in the process of designing a website and have implemented a Bootstrap navbar. The navbar consists of three icons aligned to the right, and I am looking to center another element. However, when I use mx-auto, the element does not center per ...

htmlcssbootstrap-5

CSS for Positioning Elements Side by Side Using Absolute Positioning

I'm having trouble figuring out how to position balloons like the ones shown in this image: <div class="red_frame"> <img src="https://i.sstatic.net/54SMF.png" class="r_over"/> <img src="https://i.sstatic.net/54SMF.png" ...

htmlcss

Lists within lists and the use of percentages

There is a common belief that separating design and functionality is beneficial. Let's focus on the separation between HTML and CSS, specifically when organizing a menu hierarchy. The issue with nested <ol>, <ul>, and <li> elements ...

htmlcsscss-position

Creating a CSS dropdown menu with absolute positioning and setting the left position to auto

Just laying out my usual HTML menu structure: <div id="page"> <h1>Home</h1> <ul id="nav"> <li><a href="http://example.com/">Home</a> <ul> <li><a href="http://examp ...

htmlcssdrop-down-menu

The fundamental principle of starting with mobile design in Bootstrap

I'm struggling to understand the concept of "mobile first default behavior" in Bootstrap 3. If there is no breakpoint at 480px, how can Extra small devices be the default? I get that it applies to font sizes, but what about the grid system? How can I ...

csstwitter-bootstrap

Tips for choosing a drop-down menu option without an identifier using Selenium in Python

I am trying to choose an element/item from a drop-down menu in Python and Selenium without using an id element. Here is the HTML code snippet: <mbo-transaction-mode-select mode="filters.mode" class="ng-isolate-scope"> <select class="form-con ...

pythonhtmlselenium

What causes the lack of upward movement for a div element when the div above it is floated to the left?

Recently, I've been delving into the world of float property in CSS. This is the HTML code snippet I'm working with: .left { float: left; text-align: center; width: 25%; } .normal { text-align: center; width: 25%; } <div class="lef ...

htmlcsswebcss-float

Interactive Bootstrap 4 button embedded within a sleek card component, complete with a dynamic click event

I am trying to create a basic card using bootstrap 4 with the following HTML code. My goal is to change the style of the card when it is clicked, but not when the buttons inside the card are clicked. Currently, clicking on the test1 button triggers both ...

htmltwitter-bootstrapangulartypescript

index.html: using jquery for selecting colors

I attempted to integrate a jQuery plugin into my application, but it doesn't seem to be working. In the head section of my code, I have included: <link rel="stylesheet" media="screen" type="text/css" href="./style/colorpicker.css" /> <script ...

jquerycss