Add Links Beside Mobile Menu Button

|

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.

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

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

2 Comments

  1. 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?

    Reply
    • Hey Vincent, you'd change this line:

      '<a href="%1$s" class="db_mobile_nav_link">%2$s</a>',
      

      To:

      '<a href="%1$s" target="_blank" class="db_mobile_nav_link">%2$s</a>',
      

      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/

      Reply

Submit a Comment

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