dotnetnuke - 如何避免固定引导导航遮挡 DNN 控制栏？

Question

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

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

如果我将导航栏放入 .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;
}