如何更改《十七大主题》的导航栏位置?

时间:2017-12-29 作者:Walid Mujahid وليد مجاهد

我正在制作一个217个孩子的主题,我将导航栏放在顶部并固定。起初,我在这里遇到了一些问题absolute 然后变成fixed 因为它正在添加site-navigation-fixed 经过导航栏最初所在的位置后。

解决这个问题-主要是因为我可以找到site-navigation-fixed 已定义-,我只是将大多数规则复制并粘贴到.navigation-top 班这基本上使这种奇怪的“跳跃”看起来不存在。

我将导航栏转换为黑色。问题是,当网站在注销时被查看时,导航栏上方有一个空白区域,管理栏原来所在的位置。事实并非如此absolute 而且跳得很奇怪。

我使用的css:

@media (min-width: 1200px) {
    .navigation-top {
        background-color: transparent;
        border: none;
        width: 100%;
        height: 120px;
        top: 32px;
        font-size: 130%;
        bottom: auto;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 7;
    }
    .navigation-top .wrap {
        max-width: 100%;
    }

    .navbar-transition {
        background-color: black !important;
        transition: background-color 1s ease-in-out;
        -moz-transition: background-color 1s ease-in-out;
        -webkit-transition: background-color 1s ease-in-out;
        -o-transition: background-color 1s ease-in-out;
    }
我该如何正确地更改导航栏的位置(第217个主题),使其位于标题图像的顶部并得到修复?

1 个回复
最合适的回答,由SO网友:Andrew 整理而成

更新您的.navigation-top 要使用的类top: 0; 因此,匿名用户之间没有差距。

.navigation-top {
    background-color: transparent;
    border: none;
    width: 100%;
    height: 120px;
    top: 0;
    font-size: 130%;
    bottom: auto;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 7;
}
然后为经过身份验证的用户添加一个额外的样式,该样式用于管理栏。

.admin-bar .navigation-top{
  top: 32px;
}
WordPress core添加了admin-bar 当管理栏可见时,对body标记进行分类,这样您就不必自己添加此类。

结束

相关推荐

Css-更改Storefront/WooCommerce产品类别的高度,但不更改产品

我的主页显示了产品和类别。我的店铺页面仅显示类别。如果我更改了店铺页面类别的高度,它也会更改整个产品的高度。我可以自己在主页上设置类别高度,因为我已经将它们放在一个div中,并从CSS中调用它。然而,我无法为WooCommerce商店做到这一点,因为它们会自动弹出到商店页面。以下是我试图仅为商店页面更改的CSS:.page-id-6602 .storefront ul.products li.product, .post-6602 .storefront ul.products li.produc

如何更改《十七大主题》的导航栏位置? - 小码农CODE - 行之有效找到问题解决它

如何更改《十七大主题》的导航栏位置?

时间:2017-12-29 作者:Walid Mujahid وليد مجاهد

我正在制作一个217个孩子的主题,我将导航栏放在顶部并固定。起初,我在这里遇到了一些问题absolute 然后变成fixed 因为它正在添加site-navigation-fixed 经过导航栏最初所在的位置后。

解决这个问题-主要是因为我可以找到site-navigation-fixed 已定义-,我只是将大多数规则复制并粘贴到.navigation-top 班这基本上使这种奇怪的“跳跃”看起来不存在。

我将导航栏转换为黑色。问题是,当网站在注销时被查看时,导航栏上方有一个空白区域,管理栏原来所在的位置。事实并非如此absolute 而且跳得很奇怪。

我使用的css:

@media (min-width: 1200px) {
    .navigation-top {
        background-color: transparent;
        border: none;
        width: 100%;
        height: 120px;
        top: 32px;
        font-size: 130%;
        bottom: auto;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 7;
    }
    .navigation-top .wrap {
        max-width: 100%;
    }

    .navbar-transition {
        background-color: black !important;
        transition: background-color 1s ease-in-out;
        -moz-transition: background-color 1s ease-in-out;
        -webkit-transition: background-color 1s ease-in-out;
        -o-transition: background-color 1s ease-in-out;
    }
我该如何正确地更改导航栏的位置(第217个主题),使其位于标题图像的顶部并得到修复?

1 个回复
最合适的回答,由SO网友:Andrew 整理而成

更新您的.navigation-top 要使用的类top: 0; 因此,匿名用户之间没有差距。

.navigation-top {
    background-color: transparent;
    border: none;
    width: 100%;
    height: 120px;
    top: 0;
    font-size: 130%;
    bottom: auto;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 7;
}
然后为经过身份验证的用户添加一个额外的样式,该样式用于管理栏。

.admin-bar .navigation-top{
  top: 32px;
}
WordPress core添加了admin-bar 当管理栏可见时,对body标记进行分类,这样您就不必自己添加此类。

相关推荐

通过主题定制器编辑style.css

直到现在,在我的Wordpress主题中,我在主题定制器中实现了一些必要的样式选项,这些选项将编辑CSS并通过将CSS输出到头部内部来覆盖它<style> 标记,例如,这里我实现了颜色选择器,如果默认状态发生更改,我会输出样式:function dc_get_gradient_colors() { $first_color = get_theme_mod( \'primary_color_1\' ); if ( $link_color != \'#0