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.
One question, how to make the links "Open to New Tab"?
Also just for additional note, this is done added to Function.php file right?
Hey Vincent, you'd change this line:
To:
And yes, you can it the functions.php file of a child theme. You can technically add it into Divi's own functions.php file, but that gets overwritten on updates, so isn't recommended. You can also add it using a plugin such as this one:
https://wordpress.org/plugins/code-snippets/