How to avoid that a fixed bootstrap nav obscures the DNN control bar?

Question

I am using bootstrap 3.0 nav in DNN with the navbar-fixed-top CSS class (I would not have this problem with navbar-static-top, but then the navbar disappears when one scrolls the page). When I log into DNN (as admin) then DNN will also produce a fixed navbar with admin specific menus. But now my bootstrap nav obscures the DNN control bar.

How can I adjust this, e.g. by applying a different style to either the nav bar or the DNN menu in admin mode?

If I put the Navbar into an .ascx, can I detect if I am in admin mode inside the .ascx?

Answer 1

Try using this CSS

#ControlBar {
        height: 53px !important;
}

.navbar-fixed-top.admin {
        top: 53px;
        z-index: 9;
}

and this JavaScript

$(function() {
    if ($('form').hasClass('showControlBar')) $('.navbar-fixed-top').addClass('admin');  
});

Answer 2

Can you show a screenshot or a fiddle?

maybe just adding this rule to your css file will fix it

body {
  padding-top: 50px;
  padding-bottom: 20px;
}

Answer 3

another way is to toggle the dnn #ControlBar or the #dnnCPWrap if you´re using the RibbonBar. Should work with every fixed navbar.

Create a small button in the top left corner. Style the anchor to fit your needs.

    $(document).ready(function () {

     var moTtoggleButton;
            if(('#ControlEditPageMenu').length > 0 ) {  //  FOR CONTROLBAR DNN7 and up
                    moTtoggleButton = '<ul class="dnnActions dnnClear">';
                    moTtoggleButton += '<li class="moTtoggleButton"><a href="javascript:void(0)" onclick="$(\'#ControlBar\').toggle();">toggle menu</a></li>';
                    moTtoggleButton += '</ul>';

                $('#ControlBar_ControlPanel').before(moTtoggleButton)
            }
            if(('#dnnCPWrap').length > 0) { //  FOR RIBBONBAR
                    moTtoggleButton = '<ul class="dnnActions dnnClear">';
                    moTtoggleButton += '<li class="moTtoggleButton"><a href="javascript:void(0)" onclick="$(\'#dnnCPWrap\').toggle();">toggle menu</a></li>';
                    moTtoggleButton += '</ul>';

                $('#dnnCPWrap').before(moTtoggleButton)
            }

    });

some button styling

.moTtoggleButton{
    z-index: 10001 !important;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    left:0;
}
.moTtoggleButton > a {
    display: inline-block;
    font-weight: 700;
    padding: 10px 15px;
}

update: changed position: absolute; to position: fixed; added href="javascript:void(0)" to anchor tag

Answer 4

Try to add this CSS. It works fine on DNN7+

#ControlBar, #ControlBar div,  #ControlBar li,  #ControlBar a {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}