CSS how to style so that I can toggle another menu ABOVE the bootstrap navbar-fixed-top?

0
votes

My app uses a bootstrap navbar-fixed-top. However, we now need to show another menu that will toggle open/close ABOVE the navbar-fixed-top.

My issue is with the CSS.

In order to open this menu (which does look similar to a 100% width navbar, its about 40px height), should I be pushing the body down? If I do that, the navbar-fixed-top still stays fixed to the top.

Or, is there another way to achieve this because I need to open this menu ABOVE the rest of the content.

2
htmlcss
Please share your code - APAD1
my code is literally onToggleOffersMenu() { this.showOffersMenu = !this.showOffersMenu }, and based on the state of showOffersMenu, I use ngClass to apply .showOffersMenu { margin-top: 40px }. I am using angular 2. - user1354934
My question is more about how to go about addressing this new requirement. Because of the component design, I don't think I should be manipulating the body styling from my component. However, if I was to open a menu above the navbar-fixed-top, would it be better to push the body down? I just don't understand the requirement to be honest, it is kind of silly, but it is what it is :/ - user1354934

2 Answers

0
votes

One possible approach is to let the fixed navbar overlay the content you want to display. And make it move a fixed amount of pixels when an event is fired.

You can simply create a class containing the desired amount of pixels for the navbar to move and display the content above it. And, for example, when you click a button you add such class to your bootstrap navbar.

Like this: https://jsfiddle.net/ozvk5rrh/1/

The CSS: 

// styles the content above the navbar
.above {
  display: block;
  position: fixed;
  width: 100%;
  height: 40px;
  background-color: steelblue;
  color: #fff;
}

.margin-top {
  top: 25px !important;
}

jQuery: 

$("#showContent").click(function(){
    $("#myNavbar").toggleClass("margin-top")
;})
0
votes

I think its a easy task to apply just u have to have some bootstrap knowledge to implement the same.

Bootstrap uses this code for hamburger button:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

Bootstrap uses this code for show/hide element and menu:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

If you want multiple navs just you have to change the data-target of button and same data-target as the id of the div which you want to show/hide. You can also adjust the area of collapse by providing some padding or height to the collapse content.

You can also refer to this link for more information:

http://getbootstrap.com/components/#navbar

Thank You..