Question

我试图将我的导航菜单向下移动。它目前由管理栏http://3v3rivals.tk

覆盖75％

我想移动管理栏下方的导航菜单，两者之间几乎没有空间。我可能还需要将标题向下移动一下......如何将我的导航菜单向下移动？

    /************************************************
    Main Navigation
************************************************/

#nav-logo {
    float: left;
    padding: 8px 10px;
    max-width: 100px;
    }

#nav-main-wrapper {
    border-bottom: 1px solid #444;
        -ms-box-shadow: 0 4px 10px -3px #000;
        -moz-box-shadow: 0 4px 10px -3px #000;
        -o-box-shadow: 0 4px 10px -3px #000;
        -webkit-box-shadow: 0 4px 15px -5px #000;
    box-shadow: 0 4px 10px -3px #000;
    float: left;
    margin-bottom: 1px solid #888;
    position: fixed;
        left: 0;
        top: 0;
    width: 100%;
    height: 50px;
    z-index: 2000;
    }

#nav-main {
    color: #fff;
    font: 700 14px/14px 'Open Sans Condensed', sans-serif;
    margin: 0 auto;
    text-transform: uppercase;
    width: 960px;
    height: 50px;
    }

ul.nav-main a {
    color: #fff;
    float: left;
    font: 700 14px/14px 'Open Sans Condensed', sans-serif;
    padding: 18px;
        -moz-text-shadow: 2px 2px 1px #000;
        -ms-text-shadow: 2px 2px 1px #000;
        -o-text-shadow: 2px 2px 1px #000;
        -webkit-text-shadow: 1px 1px 1px #000;
    text-shadow: 1px 1px 1px #000;
    }

ul.nav-main .menu-item-home {
    background: url(images/nav-sep.png) no-repeat right bottom !important;
    }

ul.nav-main .menu-item-home a {
    color: #fff !important;
    font: 700 14px/14px 'Open Sans Condensed', sans-serif;
    padding: 18px;
        -moz-text-shadow: 1px 1px 1px #000 !important;
        -ms-text-shadow: 1px 1px 1px #000 !important;
        -o-text-shadow: 1px 1px 1px #000 !important;
        -webkit-text-shadow: 1px 1px 1px #000 !important;
    text-shadow: 1px 1px 1px #000 !important;
    }

ul.nav-main a:hover {
    text-decoration: none;
    }

#nav-main-left {
    float: left;
    position: relative;
    width: 810px;
    }

ul.nav-main {
    display: inline;
    float: left;
    position: relative;
    max-width: 710px;
    }

ul.nav-main li {
    background: url(images/nav-sep.png) no-repeat right bottom;
    display: inline;
    float: left;
    position: relative;
    }

ul.nav-main .current-menu-item,
ul.nav-main .current-post-parent {
    background: #eee url(images/nav-bg.png) repeat-x bottom;
    }

ul.nav-main li:hover {
    background: #eee url(images/nav-bg.png) repeat-x bottom !important;
    }

ul.nav-main .current-menu-item a,
ul.nav-main .current-post-parent a {
    color: #000;
    float: left;
    font: 700 14px/14px 'Open Sans Condensed', sans-serif;
    padding: 18px;
        -moz-text-shadow: 1px 1px 1px #fff;
        -ms-text-shadow: 1px 1px 1px #fff;
        -o-text-shadow: 1px 1px 1px #fff;
        -webkit-text-shadow: 1px 1px 1px #fff;
    text-shadow: 1px 1px 1px #fff;
    }

ul.nav-main li:hover a {
    color: #000 !important;
    float: left;
    font: 700 14px/14px 'Open Sans Condensed', sans-serif;
    padding: 18px;
        -moz-text-shadow: 1px 1px 1px #fff !important;
        -ms-text-shadow: 1px 1px 1px #fff !important;
        -o-text-shadow: 1px 1px 1px #fff !important;
        -webkit-text-shadow: 1px 1px 1px #fff !important;
    text-shadow: 1px 1px 1px #fff !important;
    }

ul.nav-main li ul {
    display: none;
    }

ul.nav-main li:hover ul {
    background: #ddd url(images/striped-bg.png);
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
        -moz-box-shadow: 0 3px 7px -2px #333;
        -ms-box-shadow: 0 3px 7px -2px #333;
        -o-box-shadow: 0 3px 7px -2px #333;
        -webkit-box-shadow: 0 3px 7px -2px #333;
    box-shadow: 0 3px 7px -2px #333;
    display: block;
    padding: 5px;
    position: absolute;
        left: 0px;
        top: 50px;
    width: 150px;
    }

ul.nav-main li:hover ul li {
    background: #eee;
    position: relative;
    }

ul.nav-main li:hover ul li a {
    float: left;
    padding: 8px;
    width: 134px;
    }

ul.nav-main li:hover ul li:hover,
ul.nav-main li:hover ul li:hover.current-menu-item {
    background: #fff !important;
    }

ul.nav-main li:hover ul li ul {
    display: none;
    }

ul.nav-main li:hover ul li:hover ul {
    display: block;
    margin: 0;
    position: absolute;
        left: 150px;
        top: -5px;
    width: 150px;
    }

#nav-mobi {
    display: none;
    overflow: hidden;
    }

#nav-mobi select {
    border: 1px solid #2d2f31;
    border-radius: 3px;
    color: #fff;
    float: left;
    margin: 10px;
    padding: 0 30px 0 5px;
    width: 300px;
    height: 30px;
    -webkit-appearance: none !important;
    }

#nav-search {
    float: right;
    padding-top: 9px;
    position: relative;
    text-align: right;
    width: 150px;
    }

#searchform {
    float: left;
    position: relative;
    }

#searchform input {
    background: url(images/search-icon.png) no-repeat right;
    border: 0;
    border-bottom: 1px solid #666;
    border-radius: 2px;
        -moz-box-shadow: 0 2px 10px -2px #000 inset;
        -ms-box-shadow: 0 2px 10px -2px #000 inset;
        -o-box-shadow: 0 2px 10px -2px #000 inset;
        -webkit-box-shadow: 0 2px 10px -2px #000 inset;
    box-shadow: 0 2px 10px -2px #000 inset;
    color: #aaa;
    float: left;
    font: 12px/12px helvetica, arial, sans-serif;
    margin: 0 0 10px;
    padding: 9px 0 9px 10px;
    width: 140px;
    height: 12px;
    }

#searchform #search-button {
    border: none;
    float: left;
    }

#searchform #s:focus {
    outline: none;
    }

Answer 1

你在导航上使用固定位置，这意味着它无论如何都处于最顶端。我觉得令人困惑的是，当你看到网站时，它看起来都搞砸了但是当非管理员看到它时它很好。如果你有很多用户会看到管理栏，那么你将需要使用一些wp逻辑来查看用户是否以管理员身份登录，如果是这样，“top”属性需要像75px或者高管理栏是。此外，如果您想要快速修复，则会有一个隐藏管理栏的插件。

如何将wordpress主题导航菜单向下移动

1 个答案: