Question

我在DNN中使用bootstrap 3.0 nav和navbar-fixed-top CSS类（我不会遇到navbar-static-top的问题，但是当滚动页面时导航栏就会消失）。当我登录DNN（作为管理员）时，DNN还将生成具有管理员特定菜单的固定导航栏。但是现在我的bootstrap导航模糊了DNN控制栏。

如何调整此项，例如通过在管理模式下对导航栏或DNN菜单应用不同的样式？

如果我将Navbar放入.ascx，我可以在.ascx中检测我是否处于管理模式吗？

Answer 1

你能展示截图或小提琴吗？

可能只是将此规则添加到您的css文件中将修复它

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

Answer 2

尝试使用此CSS

#ControlBar {
        height: 53px !important;
}

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

和这个JavaScript

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

Answer 3

另一种方法是在使用RibbonBar时切换dnn #ControlBar或#dnnCPWrap。应该适用于每个固定的导航栏。

在左上角创建一个小按钮。根据您的需求设计锚点样式。

    $(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)
            }

    });

一些按钮样式

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

更新：改变立场：绝对;定位：固定; 将href =“javascript：void（0）”添加到锚标记

Answer 4

尝试添加此CSS。它适用于DNN7 +

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

如何避免固定的bootstrap导航模糊DNN控制栏？

4 个答案: