Add item to navbar-header div


I need to add item to .navbar-header and keep it visible on mobile devices, not inside collapse navbar-collapse block. Dragging items from components bar seems to fail doing so, because components are either placed inside .navbar-brand link or .navbar-toggle button. There isn't a way, at least I can't see it, how to add items to parent of the two mentioned blocks (.navbar-header). Also, Navbar header does not appear in overview panel on the left side as an element.

The work around for something like this might be to.

  1. First, set your navbar so that it is hidden so you can work with the space it usually resides in.
  2. Create the same block with the item you want on the navbar, but make it outside of the navbar and in the location you want it to be when the navbar is collapsed.
  3. After you have it placed how you want it set it to only be visible at the size your navbar is collapsing.
  4. Make the navbar now visible again.

You now should have the new item show up when the navbar collapses.

Hope that helps :)

Not sure that I got your point, but then again, I might have not been quite clear. I don't need to position elements outside nav, I need them inside, into .navbar-header div, as Bootstrap does. I have a menu in which icons that are available on large screens should remain visible on mobile as well (some or all, doesn't matter). Here is a sample of large screen menu: enter image description here

And here is what I need for mobile menu:

enter image description here

Login and cart icons are visible in both. The only block that displays elements both in wide screen and mobile view is .navbar-header, which seems to be not accessible in Bootstrap studio. Hope I made it a bit clearer now. Thanks

This is a live sample

I have just opened up a fresh design and tried to drop a div in between nav-bar-brand and nav-bar. and can confirm this cannot be done using the out of the box nav-bar component which comes with BSS as its locked down by the devs.

I have thought of 2 ways to do this based on your jsfiddle example.

1 - Create your own component from scratch using drag and drop elements (will be time consuming but you can reuse this again and again as a saved component) 2 - insert the default navbar component into your design, then on navbar block in overview panel, right click and convert it to HTML thus becoming a custom component that you can then align the mark up to be the same as the jsfiddle mark up.

Thanks Chris, I did convert it to HTML. It then creates some other issues, but I will try to solve them one by one. I guess this can be reported as a bug, because Bootstrap actually allows adding to mentioned div, so there is no need to lock the item.

I think he issue he is that the component the devs have built has been created to work with all the functions of the app.

You could raise it as an idea as opposed to a bug as the workaround solution is to code it yourself.