Add Links Beside Mobile Menu Button

This post may contain referral links which may earn a commission for this site

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();

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.

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *