0

I'm trying to get a Bootstrap 4 Navbar to only collapse partially.

Basically I want some items aligned to the right to remain visible at all times, while most of the Navbar items to the left will collapse into a menu if you try to open the website on mobile.

The problem is that, when you expand that menu, the collapsed elements are showing before the fixed menu, as you'd expect them to, but I want them to show below, for obvious aesthetic reasons.

Working example: http://jsfiddle.net/sfm70xLe/

Desired outcome while expanded:

enter image description here

Desired outcome while acessing the collapsed items:

enter image description here

I've been playing around with the disposition of the elements aswell as trying float-right and float-right but it's proven ineffective, I'm not sure how to proceed with this without making drastic changes to the foundation Bootstrap laid for me. Any ideas?

Improve this question

1 Answer 1

Reset to default
1

If you move the navbar-header div up before the navbar-collapse div in the HTML it will work. Then you will just need to use order to move the navbar-header to the right for sizes larger than medium.

Improve this answer
2
  • I wasn't aware of that CSS property, this worked great. Also it seems Bootstrap has a class specific to apply order: 1 only when the menu is not collapsed called order-md-1. jsfiddle.net/sfm70xLe/14
    – Havenard
    Commented Aug 10, 2018 at 23:34
  • Ah right, Bootstrap has that helper class. Keep in mind that the "order" property is for flexbox child items.
    – slacle
    Commented Aug 11, 2018 at 6:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.