如何使用 Divi 为移动设备添加自定义固定标题

已发表: 2017-09-01

如果操作正确，在移动设备上使用固定标题（或导航）可以提高网站的可用性。一般而言，固定导航似乎比标准标题快 22%。在这个高速发展的科技世界里，即使只有一半，这也是一个相当可观的数据。

并且，使用 Divi，只需几行 CSS，即可为您的网站添加固定标题。 Divi 已经允许您使用 Theme Customizer 自定义移动标题，但目前没有用于为移动部署固定标题的内置设置。在本教程中，我将向您展示如何在移动设备上添加包含以下内容的自定义固定标头：

与桌面版本不同（更适合移动设备）的徽标。
较短的标题以允许更多可用的查看空间。
一个更大的可点击汉堡包导航图标，可以更轻松地部署移动导航。
半透明背景，使查看站点时的标题更具侵入性。

这是标题的外观的小先睹为快。

固定标题

设置

此设置类似于我之前关于在固定标题上切换徽标的帖子。在开始之前，请确保您完成以下操作：

确保您安装了最新版本的 Divi。
为您的站点创建一个活动的主菜单。
从 WordPress 网站的后端，转到主题定制器 > 标题和导航 > 标题格式，并确保您选择了默认的标题样式。
制作两个 200×131 的徽标版本，并将它们添加到您的 WordPress 媒体库中。一个标志将用于主标题，一个将用于您的固定标题。如果可以的话，使徽标的固定标题版本更加水平，这样它就不会在较小的固定标题上垂直模糊。这是我正在使用的主标题徽标的示例。这是我的固定标题徽标的示例。请注意，我裁剪了文本以制作一个更简单、更水平的徽标，该徽标非常适合高度较低的标题。无论如何，任何人都不可能阅读该文本，并且该品牌仍在代表中。
使用菜单项设置主菜单。
由于我们将添加自定义 CSS 来完成固定标题，因此我们不需要在主题定制器中自定义标准标题或固定标题选项。但是，如果您想在我的示例中复制菜单和徽标大小的设置，请完成以下操作（这完全是可选的）：

转到主题定制器中的标题和导航设置。选择主菜单栏并更新以下内容：
菜单高度：105
标志最大高度：80
文字大小：20
现在回到标题和导航。选择固定导航设置并更新以下内容：
固定菜单高度：60
文字大小：20

完成这些步骤后，您就可以开始了。

如何使用 Divi 为移动设备添加自定义固定标题

订阅我们的 YouTube 频道

入门

我们将在 Divi 主题定制器的附加 CSS 部分下输入自定义 CSS 来实现此设计。因为我们将仅针对移动设备，所以我们将所有 CSS 包装在媒体查询中，将样式限制为小于 980 像素的浏览器宽度。继续并开始在附加 CSS 框中输入以下内容：

@media (max-width: 980px) {



}

固定标题

使用 CSS 创建您的移动固定标题

由于当用户向下滚动页面时，Divi 已经添加了一个名为“et-fixed-header”的类，我们可以在自定义 CSS 中使用该选择器来创建和设置移动固定标题的样式。

下面的第一组 CSS 使页眉固定（或粘贴）在页面顶部，然后将固定页眉的高度调整为 55px。它还添加了半透明的白色背景色。在媒体查询括号内的主题定制器中将以下内容添加到您的附加 CSS 中。

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8); /*change header background color here*/
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

Apple 建议其应用程序的所有可点击 UI 元素至少为 44×44 像素，以便我们的拇指和手指可以轻松点击它们。这对于移动固定标题中的元素将是一个很好的指南。以下 CSS 使导航图标为 45px。

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}

最后，让我们在固定标题上为徽标添加更多高度，以便我们可以更好地看到它。输入以下 CSS：

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

就是这样！我们都完成了。
这是用于创建移动固定标题的最终 CSS 集合：

@media (max-width: 980px) {

/*********************************
style mobile fixed header
*********************************/

.et_fixed_nav #main-header.et-fixed-header  {
position: fixed;
background: rgba(255,255,255,0.8);
height: 55px;
}

.et-fixed-header .logo_container {
height: 55px;
}

.et-fixed-header .mobile_menu_bar {
padding-bottom: 5px;
}

/*********************************
make mobile fixed header navigation icon larger
*********************************/

.et-fixed-header .mobile_menu_bar:before {
font-size: 45px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 5px;
}

.et_fixed_nav #et-top-navigation {
-webkit-transition: none;
-moz-transition: none;
transition: none;
}

/**************************
Increase height of logo area on mobile and mobile fixed header
***************************/
#logo, .et-fixed-header #logo {
max-height: 80%;
}

}

保存您的设置。现在你有一个工作的移动固定标题。

固定标题

在移动固定标题上切换徽标

如果你想为你的移动固定标题使用不同的标志，你可以用一些 jQuery 很容易地做到这一点。您所需要的只是您将要使用的两个徽标的 URL。第一个徽标图像 URL 应该是您已用于站点的默认徽标。第二个徽标图像 URL 应该是您要用于移动固定标题的徽标。确保将两个徽标都上传到媒体库并检索 URL。

获得两个 URL 后，转到 WordPress 仪表板并导航到 Divi > 主题选项 > 集成。找到“Add code to the head of your blog”输入框，输入以下jQuery脚本：

<script>
    var imageUrl = [
  'ENTER DESKTOP LOGO IMAGE URL',
  'ENTER MOBILE LOGO IMAGE URL',
    ];

    jQuery(window).on('scroll', function() {
        var $header = jQuery('header');
        var $logo = jQuery('#logo');

        if ((jQuery(window).width() < 981) &&
        ($header.hasClass('et-fixed-header'))) {
            return $logo.attr('src', imageUrl[1]);
        };

        return $logo.attr('src', imageUrl[0])
    });
</script>

固定标题

现在将文本“ENTER DESKTOP LOGO IMAGE URL”替换为您当前用于站点的徽标的 URL。

然后将文本“ENTER MOBILE LOGO IMAGE URL”替换为您只想用于移动设备的徽标的 URL。

保存设置并查看结果。

固定标题

浏览器支持

在这篇文章中，我仅使用 CSS 创建了固定标题，严重依赖 CSS 属性“position:fixed”。此 CSS 属性可能与旧版本的移动浏览器不一致，尤其是在 iOS Safari 和 Android 上。但是现在“位置：固定”在较新版本的移动浏览器上得到了很好的支持（Opera Mini 除外）。

还有其他更强大的插件和 JavaScript 解决方案，但我认为最好为您提供简单的 CSS 版本。如果此解决方案不适合您，请考虑探索这些选项。

最后的想法

值得一提的是，移动固定标头可能不利于可用性。因为它们始终会继续阻止您浏览器的顶部，如果您不小心，您可能会无缘无故地浪费宝贵的空间。请记住，并非每个人都有这样的平板手机。

固定标题

这就是为什么为移动设备定制固定标题很重要的原因，它为移动设备提供更短的高度、不同的徽标和更大的导航按钮。通过向您的 Divi 网站添加几行 CSS，您可以在移动设备上拥有固定标题，而无需使用第三方插件。因此，如果将一个添加到您的下一个项目中是有意义的，那就去做吧。拥有这种功能可以改善您网站的用户界面。

我期待在评论中收到您的来信。

干杯!