【问题标题】:Wordpress 5.7, Theme 2021. How to change the main menu submenu items to whiteWordpress 5.7,主题 2021。如何将主菜单子菜单项更改为白色
【发布时间】:2021-07-11 21:55:43
【问题描述】:

Wordpress 5.7,主题 2021。

1 如何更改主菜单中子菜单项的颜色? 我是 Wordpress 新手,具有 CSS 基础/中级知识。

2 如何更改主菜单和子菜单的背景颜色?

这个附加的 CSS 使主菜单项变为白色。我想对子菜单做同样的事情。

*start of menu */
/*menu background */
.menu-wrapper {
background: rgba(204,153,51,.75);
}

a#primary-menu-list {
color:white;
}

.primary-navigation .primary-menu-container > ul > .menu-item > a
{color:white;}

.svg-icon
{color:white;}

/*end of menu */

【问题讨论】:

    标签: css wordpress wordpress-theming


    【解决方案1】:

    因为这个主题现在支持 CSS 变量 - 我建议你不要覆盖选择器,而只覆盖变量。您需要将这些行添加到 CSS 中,替换为您真正想要使用的颜色,并确保它们覆盖默认样式

    :root {
        --primary-nav--color-link:  #ffffff;
        --primary-nav--color-link-hover: #cecece;
        --primary-nav--color-text: #000000;
    }
    

    这是主导航的可用变量列表

    --primary-nav--font-family: var(--global--font-secondary);
    --primary-nav--font-family-mobile: var(--global--font-primary);
    --primary-nav--font-size: var(--global--font-size-md);
    --primary-nav--font-size-sub-menu: var(--global--font-size-xs);
    --primary-nav--font-size-mobile: var(--global--font-size-sm);
    --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
    --primary-nav--font-size-button: var(--global--font-size-xs);
    --primary-nav--font-style: normal;
    --primary-nav--font-style-sub-menu-mobile: normal;
    --primary-nav--font-weight: normal;
    --primary-nav--font-weight-button: 500;
    --primary-nav--color-link: var(--global--color-primary);
    --primary-nav--color-link-hover: var(--global--color-primary-hover);
    --primary-nav--color-text: var(--global--color-primary);
    --primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
    --primary-nav--border-color: var(--global--color-primary);
    

    【讨论】:

    • 感谢您的快速响应。我忘记了 CSS 变量。我仍然无法让 Javascript 触发打开的子菜单使用相同的颜色。有什么建议吗?
    • 尝试设置.primary-navigation .sub-menu .menu-item>a { color: var(--primary-nav--color-link) } 的样式如果这没有帮助 - 至少发布您生成的 HTML 布局
    • 我遵循了您的想法并使其发挥作用。我忘了提到背景颜色的要求。当我单击子菜单标题(而不是 + 键)时,这 2 个屏幕截图显示了白色背景上的白色文本的剩余问题
    【解决方案2】:

    尝试 1: 我的 CSS 失败了,但后来仔细查看:

    插件:二十一二十一的选项(免费版) 自定义导航选项

    设置导航背景颜色:选择相关颜色

    尝试 2: 没有插件

    当我使用 + 键触发下拉菜单时效果很好 如果我单击子菜单标题,则标题很难阅读(白色背景上的白色文本)。

    附加 CSS

    :root {
    /*submenu color */
        --primary-nav--color-link:  white;
    /*main menu color */
        --primary-nav--color-link-hover: white;
        
    /* where does this take effect?
    --primary-nav--color-text: red;
    */
      --primary-nav--color-text: #000000;
          
            
    }
    /*this is the background of the main menu only, not submenu */
    .menu-wrapper {
    background: rgba(204,153,51,.75);
    }
    
    
    /*
     this is for the submenu (drop down menus)
    */
    
    .primary-navigation .sub-menu .menu-item>a { color: var(--primary-nav--color-link); 
    background:rgba(204,153,51,.75); */
    
    
    }
    
    .svg-icon
    {color:white;}
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多