What's the best way to customize a partially collapsible Navbar in Bootstrap 4 to display items exactly where I need them to

Is there a way to make a Bootstrap 4 Navbar only partially collapse?

I want certain items on the Navbar aligned to the right to always be visible, while the rest of the Navbar items on the left will collapse into a menu when viewed on mobile devices.

The issue I'm facing is that when the menu expands, the collapsed elements appear before the fixed menu, but I prefer them to appear below for better aesthetics.

To see a working example, click here: http://jsfiddle.net/sfm70xLe/

Here is how I want it to look when expanded:

https://i.sstatic.net/rYXnC.png

This is the desired outcome when accessing the collapsed items:

https://i.sstatic.net/WsRV5.png

I have tried adjusting the element placement and experimenting with float-right and float-left, but these changes have not been effective so far. I am not sure how to proceed without making significant modifications to the Bootstrap framework. Any suggestions?

csstwitter-bootstrapbootstrap-4

Answer №1

To ensure the navbar-header div functions correctly, position it above the navbar-collapse div in the HTML code. You can then adjust its placement to the right for larger screen sizes using the CSS property order.

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

Prevent sticky div from overlapping with footer

I currently have a social link menu that is fixed to the left side of my page, structured like this: <footer id="colophon"></footer> <div> <nav> <ul id="social"> <li>Link1</li> ...

javascripthtmlcss

Adjust the starting color of a mat-input in Angular 9

I am encountering an issue with the styling of a standard matInput field within a mat-form-field, all contained within a [formGroup] div. The dark background of the parent element is causing visibility problems with the default dark text color of the input ...

cssangularcolorsmat-input

Troubleshooting: Scrollspy Bootstrap 4 functionality not functioning properly on Codepen

I’ve been experimenting with the Scrollspy feature in Bootstrap 4 for my Portfolio Page, but I’m facing some issues getting it to work properly on Codepen. After doing some research on StackOverflow, I came across a working example on Codeply, here’ ...

htmlbootstrap-4scrollspycodepen

The functionality of Angular.js route seems to be malfunctioning

Hello friends, I am fairly new to working with AngularJS and have been experimenting with angular Route. However, I encountered an issue where clicking on #/home resulted in a strange URL appearing here. Oddly enough, the default otherwise condition seems ...

javascripthtmlcssangularjsngroute

Divs that are 30% of their parent's width will not align vertically and will not fit in a parent div that is 100% width

I am attempting to vertically center the three child-divs <div class="section"> as 3 rows in one column within <div class="container_page_2">. When I refer to vertical alignment, I mean having an equal distance between the top of the page and ...

htmlcss

How to center align a fixed div position

I am looking for a way to center align a fixed position div on my page. In the past, I have been able to achieve this with absolutely positioned divs using a specific technique. left: 50%; width: 400px; margin-left: -200px; However, this method does no ...

htmlcssalignmentcss-positioncenter

Updating the CSS: Using jQuery to modify the display property to none

I am facing an issue with displaying an element that is defined as display:none in CSS. I tried to use the .show() function in jQuery, but it's not working as expected. Here's the code snippet: CSS .element { position: absolute; display: no ...

javascriptjqueryhtmlcsssettimeout

Tips for changing the appearance of an entire table by overriding the table tr:nth-child styling

In the CSS code below, I currently alternate background colors for table lines by default and can specify individual rows to not alternate. Is there a way to implement this at the table level instead of per row? Essentially, I want to define something at ...

htmlcss

Display PHP output within a styled CSS box

<html> <head> </head> <style type="text/css"> .yellow-box { position:absolute; top:100px; left:500px; width:300px; height:300px; background:yellow } </style> <div class = "yellow-box" > </div ...

phpcss

How can I retrieve the CSS style value within the C# code behind?

When working with ASP.NET code behind, I often find myself adding a css style to an element using the following command: elementID.Style.Add("padding", "20px"); However, once this css property is added to elementID, the question arises - how can I access ...

c#cssasp.net

Concealing Vimeo's controls and substituting them with a play/pause toggle button

I'm currently working on implementing the techniques demonstrated in this tutorial (), but unfortunately the code in the fiddle I put together doesn't appear to be functioning correctly. I'm at a loss as to what might be causing this issue. ...

javascriptjquerycss

Tips on eliminating the bottom border of the final div within a group using CSS

Is there a way to remove the bottom border of the last "footer_column" div? See below for the HTML: <div id="footer_wrapper"> <!-- footer_wrapper starts here --> <div id="footer"> <!-- footer starts here --> <div class=" ...

htmlcss

How to transform a hyperlink into a clickable element within an absolutely positioned container

I'm currently working on a photo gallery project and using magnific popup to create it. However, I ran into an issue with the hover event on the images that displays an icon when it's hovered over, indicating that it can be clicked to view more. ...

javascripthtmljquerycssmagnific-popup

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

Embarking on my journey of developing a React app, I made the decision to incorporate Material UI for its array of pre-built components. However, delving into the customization of these components and their styles has proven to be quite challenging for me ...

javascriptcssreactjsmaterial-ui

Is there a way to prevent a background video from automatically playing whenever the user navigates back to the home page?

Recently, I was given a design that requires a background video to load on the home page. Although I understand that this goes against best practices, the client has approved the design and now I need to come up with a solution. The video is already in pla ...

javascriptjqueryhtmlcssvideo

Why does the width of my image appear differently on an iPhone compared to other devices?

I recently encountered an issue with the responsiveness of an image on my website. While it displayed correctly on Android and desktop devices, the image appeared distorted on iPhones as if the CSS width attribute was not applied properly. This problem spe ...

javascriptcssreactjs

Android layout featuring Ionic2 navbar with icons aligned on both sides at the top

<ion-header> <ion-navbar align-title="center" color="primary" hideBackButton> <ion-buttons ion-button icon-only start class="card-buttons"> <button class="card-buttons" (t ...

androidcssangularionic2

Bootstrap design malfunctioning in Firefox browser

view image description hereMy responsive web design site (built with Bootstrap 3) is functioning perfectly on Chrome, Edge, and Opera browsers. However, on Firefox, the grid layout initially loads correctly but then breaks after a second? view image descr ...

bootstrap-4

Creating hyperlinks to files dynamically in Angular can be easily achieved by utilizing JSON $ref

My Angular website includes a Bootstrap card that utilizes *ngFor to display a title, document name, and extension. Here is an example: https://i.sstatic.net/wi2Zx.png I would like the "handbook_2017.pdf" to be a clickable hyperlink that opens or downloa ...

jsontwitter-bootstrapangularhrefngfor

Using React to dynamically set the width of a div element to match the width of an image

I am trying to ensure that my div is always the same width as the image it contains, even when the window is resized and the image adjusts automatically. I attempted to solve this using the useState hook, but it does not seem to respond to resize events. ...

javascripthtmlcssreactjsresponsive