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?

ppollono · Answer 1 · 2013-12-11T16:17:15.307

1

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;
}

edited Dec 11 '13 at 16:17

answered Dec 11 '13 at 11:52

ppollono

3,421
1
19
29

This does not do the trick since both navbars use fixed layouts and therefore overlap. I think I have to somehow detect if in admin mode and use a static layout for one of the navbars in that case. – TvdH Dec 11 '13 at 16:57

rwisch45 · Accepted Answer · 2014-03-22T22:24:42.373

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');  
});

edited Mar 22 '14 at 22:24

answered Dec 15 '13 at 17:08

rwisch45

3,692
2
25
36

Good js check for the control bar. This works, I had to add some margin to the content to adjust. – TvdH Dec 15 '13 at 20:41
For ribbonbar change "ControlBar" to "dnnCPWrap", "if ($('form').hasClass('showControlBar'))" by "if (document.getElementById('dnnCPWrap'))" and replace 53px by 36px. – MiguelSlv Jul 26 '14 at 13:54

MattOpen · Answer 3 · 2014-09-27T16:02:57.993

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

score 0 · Answer 4 · answered Jun 04 '14 at 14:26

0

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;
}

answered Jun 04 '14 at 14:26

Alex

468
6
13

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

4 Answers4