On mobile devices the Divi theme collapses the header menu items into a dropdown menu, accessible via the mobile menu button. Sometimes though, it's useful to be able to add a link or two next to the mobile menu button, separate from the mobile menu, as shown:
This effect can be achieved using the following PHP code:
if (!class_exists('DBMobileNavLink')) {
class DBMobileNavLink {
private $text;
private $url;
static function create($text, $url) {
return new self($text, $url);
}
private function __construct($text, $url) {
$this->text = $text;
$this->url = $url;
}
function registerHooks() {
add_action('et_header_top', array($this, 'outputLinkHtml'), 11);
add_action('wp_head', array($this, 'outputCss'));
}
function outputLinkHtml(){
if ($this->visible()) {
printf(
'<a href="%1$s" class="db_mobile_nav_link">%2$s</a>',
esc_attr($this->url),
esc_html($this->text)
);
}
}
private function visible() {
if (is_customize_preview()) return true;
if (!in_array($this->headerStyle(), array('slide', 'fullscreen'))) return true;
return false;
}
private function headerStyle() {
return function_exists('et_get_option')?et_get_option('header_style', 'left'):'left';
}
function outputCss() { ?>
<style>
@media only screen and (max-width: 980px) {
.db_mobile_nav_link {
position: relative !important;
display: inline-block;
float: right;
margin-right: 1em;
margin-top: 0.2em;
}
.et_pb_menu_hidden .db_mobile_nav_link {
opacity: 0;
-webkit-animation: fadeOutBottom 1s cubic-bezier(.77,0,.175,1) 1;
animation: fadeOutBottom 1s cubic-bezier(.77,0,.175,1) 1
}
.et_pb_menu_visible .db_mobile_nav_link {
z-index: 99;
opacity: 1;
-webkit-animation: fadeInBottom 1s cubic-bezier(.77,0,.175,1) 1;
animation: fadeInBottom 1s cubic-bezier(.77,0,.175,1) 1
}
}
@media only screen and (min-width: 981px) {
.db_mobile_nav_link {
display: none;
}
}
</style>
<?php
}
}
}
DBMobileNavLink::create('Link 2', 'https://divibooster.com')->registerHooks();
DBMobileNavLink::create('Link 1', 'https://divibooster.com')->registerHooks();Related Post: Adding PHP to the Divi Theme
The last two lines are the ones that actually add the links to the page, and can be modified to change the text / URL. They can be repeated to add more links. Note that the links will show in the reverse order from which they are added.
0 Comments