0

I am using Bootstrap v3.3.7 with Apostrophe CMS. My navbar is a fixed navbar using the navbar-fixed-top style which has the following css

.navbar-fixed-top {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  top: 0;
  border-width: 0 0 1px;
}

How can I make all of the Apostrophe admin widgets always display above my fixed navbar? Is there a way I can just increase the z-index globally or something with some css override? It looks like this

enter image description here

Which is obviously ugly and intrusive.

Carson
  • 1,169
  • 13
  • 36
  • Is the widget's HTML+CSS created and inserted by the CMS itself? It just seems like it has absolute positioning and since your navbar is fixed it does not get affected by the widget element. Anyway, if the widget element has a fixed height, simply offset the navbar from the [top](http://www.w3schools.com/cssref/pr_pos_top.asp). – Cooleronie Jan 16 '17 at 00:13
  • Yes, the widgets are inserted by the CMS as a sort of menu system for manipulating live pages. However, I do not understand what you mean by "offset the navbar from the top" as the navbar is fixed at `top: 0`. I'm wondering if there is some CSS I can override or maybe a JavaScript hook I can use to know when the widgets are present. – Carson Jan 16 '17 at 00:18
  • Yes, overriding bootstrap with css is fine here. Load your custom css after Bootstrap in the header and in your own css add `.navbar { top: $px }` where `$` is the height of the widget. For a full solution, create a js listener that changes the css `top` property for the `navbar` if the widget is rendered in the DOM. – Cooleronie Jan 16 '17 at 00:46

1 Answers1

1

I changed the z-index of my navbar to be z-index: 300; since the apos-modal-blackout (which is the darkened screen to denote a modal config window is open) has a z-index: 350; I do not know if this will have any negative side-effects in the rest of the site, though.

One could also write a js script to watch for the apos-modal-blackout class and if it exists, alter the z-index of their navbar to be less than 350.

Carson
  • 1,169
  • 13
  • 36