【问题标题】:Change the main menu Alignment in Avada Theme Wordpress更改 Avada 主题 Wordpress 中的主菜单对齐方式
【发布时间】:2021-09-17 14:11:55
【问题描述】:

我想将标题中 Avada Wordpress 主题的主菜单更改为左对齐而不是右对齐,

是这样的:

我希望它是这样的:

如何在 CSS 中做到这一点?

注意事项:

我使用 CSS 做到了这一点,但是当我测试它时它不能在所有屏幕尺寸下工作的问题,我用这个代码做到了:

 .fusion-main-menu {
    position:static; 
    text-align:left;
    margin-left: 0px;
    margin-right: 30%; 
    margin-top:4px; 
} 

但它并没有使它在所有屏幕尺寸中以相同的空间固定在左侧对齐:(

【问题讨论】:

    标签: php css wordpress wordpress-theming


    【解决方案1】:

    Avada 有创建“布局生成器”的选项。 使用此选项,您可以根据需要使用 avada 页面编辑器创建全局标题。并将按钮保持在导航之外以保持左右位置。

    仅使用 CSS: 使用.fusion-main-menu { float: left; padding-left: 50px; } 并使用 JS 将最后一个按钮移出导航标签。并将 float:right 应用于该按钮。

    jQuery( ".fusion-main-menu li:last-child" ).wrap("<div class='cst_btn'></div>"); jQuery(".cst_btn").insertAfter(".fusion-main-menu"); 确保在页面上只有一次带有“.fusion-main-menu”类的菜单,否则使用 diff 类或 ID。

    【讨论】:

    • 我这样做了,但这不适用于服务部分中使用的超级菜单,这是隐藏了超级菜单,我也在使用 Max Mega 菜单插件,如果我使用自定义标头它将启用它,所以我想通过使用 CSS 来做到这一点
    • 另外,我使用 CSS 做到了这一点,但是当我测试它时它无法在所有屏幕尺寸下工作,我这样做了:.fusion-main-menu { position:static;文本对齐:左;左边距:0px;保证金权利:30%;边距顶部:4px; } 但它并没有使它在所有屏幕尺寸中都以相同的空间向左对齐 :( 我该如何修复它?
    • 使用 .fusion-main-menu { float: left;左边距:50px;并使用 JS 将最后一个按钮移出导航标签。并将 float:right 应用于该按钮。需要 JS 吗?
    • 谢谢!它适用于 CSS,如果你能帮助我处理 JS,我不知道该怎么做
    • jQuery(".fusion-main-menu li:last-child").wrap("
      "); jQuery(".cst_btn").insertAfter(".fusion-main-menu");确保您在页面上只有一次带有“.fusion-main-menu”类的菜单,否则使用差异类或 ID。
    猜你喜欢
    • 2016-12-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-08-25
    • 1970-01-01
    • 1970-01-01
    • 2015-05-30
    相关资源
    最近更新 更多