Flatsome主题设置粘性移动页脚菜单

Flatsome主题设置粘性移动页脚菜单

　　通过为您的 Flatsome 主题定制的粘性菜单导航提升您的访问者移动体验。无需插件，只需导入预制的 UX Builder 简码和 CSS 并修改图标和链接。为移动设备创建一个漂亮的粘性菜单，就像本地智能手机应用程序一样，并改善您的商店客户体验。

　　推荐：如何使用Elementor编辑WordPress页眉和页脚

Flatsome主题如何创建粘性移动菜单

　　1、创建新的 UX 块

　　创建一个新的 UX 块，将下面的代码复制粘贴到新建的UX块里面。

[row label="*Sticky Mobile Menu" style="collapse" width="full-width" class="sticky-mobile-menu" visibility="show-for-small"]
[col span__sm="12" padding="0px 0px 0px 0px" padding__sm="10px 0px 5px 0px" bg_color="rgb(255, 255, 255)" depth="5"]
[ux_stack distribute="around"]
[featured_box img="https://www.pythonthree.com/wp-content/uploads/2023/02/1677295539-shopping-bag-line.png" img_width="32" pos="center" title_small="Shop" margin="0 0px 0px 0px" link="#"]
[gap height="0px"]
[/featured_box]
[featured_box img="https://www.pythonthree.com/wp-content/uploads/2023/02/1677295538-percent-line.png" img_width="32" pos="center" title_small="Deals" margin="0 0px 0px 0px" link="#"]
[gap height="0px"]
[/featured_box]
[featured_box img="https://www.pythonthree.com/wp-content/uploads/2023/02/1677295535-account-circle-line.png" img_width="32" pos="center" title_small="Account" margin="0 0px 0px 0px" link="#"]
[gap height="0px"]
[/featured_box]
[featured_box img="https://www.pythonthree.com/wp-content/uploads/2023/02/1677295536-list-unordered.png" img_width="32" pos="center" title_small="Cart" margin="0 0px 0px 0px" link="#"]
[gap height="0px"]
[/featured_box]
[/ux_stack]
[/col]
[/row]

　　2、添加自定义 CSS 添加到您的 WordPress 项目

　　点击“ 外观 ”->” 自定义 “->” 额外CSS “，添加自定义 CSS 添加到 WordPress 网站，

.sticky-mobile-menu {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 999;
    -webkit-box-shadow: 0px -8px 29px -12px rgba(0,0,0,0.2);
    box-shadow: 0px -8px 29px -12px rgba(0,0,0,0.2);
}
.sticky-mobile-menu .icon-box-center .icon-box-img {
    margin: 0 auto 4px;
}
@media (max-width: 549px) {
#footer {
    margin-bottom: 90px;
}
}

　　推荐：如何从WordPress中删除Additional CSS额外CSS

　　3、在 Flatsome 页脚脚本中添加 UX Block 简码

　　在添加 UX Block 块的时候，右侧有个Shortcode简码框，然后复制，粘贴到Flatsome页脚菜单的“ Footer HTML ”中。

　　推荐：如何向WordPress网站添加自定义简码

　　4、Flatsome主题粘性移动菜单效果

　　Flatsome主题粘性移动菜单效果图如下：

　　推荐：如何将Google Analytics添加到Flatsome主题

总结

　　以上是晓得博客为你介绍的Flatsome主题设置粘性移动页脚菜单的全部内容，希望对你的WordPress建站有所帮助，如有问题，可联系我们。

　　推荐：Flatsome主题安装

　　推荐：Flatsome主题建站教程