Add Social Icons to right side of Menu Button in Essence Pro Genesis theme

By default, the Essence Pro Genesis Theme displays a full-screen overlay menu on click of the menu button. Do you want to add social icons next to this menu button to give better visibility to your social profile links? Here is how to add Facebook, Twitter, and Instagram icons to the theme header area.

Before and After

PHP Snippet: Replace the menu function

In the WordPress Dashboard, go to Appearance -> Theme Editor page and open the header-functions.php file contained in the lib folder. Go to line no 66 and look for this function essence_header_right_menu() . Replace this code with the following code.

function essence_header_right_menu() {

	// Bail out if the off-screen theme is not set up.
	if ( ! has_nav_menu( 'off-screen' ) ) {
		return;
	}

	$menu_text = __( 'Menu', 'essence-pro' );
	$hide_text = __( 'Hide Off Screen Menu', 'essence-pro' );
	$menu_args = [
		'theme_location' => 'off-screen',
		'depth'          => 1,
		'fallback_cb'    => false,
	];

	if ( genesis_is_amp() ) {
		?>
		<amp-lightbox id="off-screen-lightbox" class="off-screen-menu off-screen-content" layout="nodisplay" scrollable>
			<div class="off-screen-container">
				<div class="off-screen-wrapper">
					<div class="wrap">
						<button class="lightbox toggle-off-screen-menu-area close" on="tap:off-screen-lightbox.close"><span class="screen-reader-text"><?php echo esc_html( $hide_text ); ?></span>X</button>
						<?php genesis_nav_menu( $menu_args ); ?>
					</div>
				</div>
			</div>
		</amp-lightbox>
		<div class="header-right">
			<button class="off-screen-item toggle-off-screen-menu-area" on="tap:off-screen-lightbox"><i class="icon ion-md-menu"></i> <?php echo esc_html( $menu_text ); ?></button>
			<div class="header-social-links">
				<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-facebook"></i></a>
				<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-twitter"></i></a>
				<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-instagram"></i></a>
			</div>
		</div>
		<?php
	} else {
		?>
		<div class="off-screen-menu off-screen-content">
			<div class="off-screen-container">
				<div class="off-screen-wrapper">
					<div class="wrap">
						<button class="toggle-off-screen-menu-area close"><span class="screen-reader-text"><?php echo esc_html( $menu_text ); ?></span>X</button>
						<?php genesis_nav_menu( $menu_args ); ?>
					</div>
				</div>
			</div>
		</div>
		<div class="header-right">
			<button class="off-screen-item toggle-off-screen-menu-area"><i
						class="icon ion-md-menu"></i> <?php echo esc_html( $menu_text ); ?>
			</button>
			<div class="header-social-links">
				<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-facebook"></i></a>
				<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-twitter"></i></a>
				<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-instagram"></i></a>
			</div>
		</div>
		<?php
	}

}

function essence_header_right_menu() {

// Bail out if the off-screen theme is not set up.

if ( ! has_nav_menu( 'off-screen' ) ) {

return;

}

$menu_text = __( 'Menu', 'essence-pro' );

$hide_text = __( 'Hide Off Screen Menu', 'essence-pro' );

$menu_args = [

'theme_location' => 'off-screen',

'depth' => 1,

'fallback_cb' => false,

];

if ( genesis_is_amp() ) {

<amp-lightbox id="off-screen-lightbox" class="off-screen-menu off-screen-content" layout="nodisplay" scrollable>

<?php genesis_nav_menu( $menu_args ); ?>

</div>

</amp-lightbox>

</div>

<?php

} else {

<?php genesis_nav_menu( $menu_args ); ?>

</div>

<button class="off-screen-item toggle-off-screen-menu-area"><i

class="icon ion-md-menu"></i> <?php echo esc_html( $menu_text ); ?>

</button>

</div>

<?php

}

Make sure you modify the above code for two things. First, add your social profile URLs by replacing # in the code. Second, add custom title in place of ENTER YOUR TITLE in the code.

<div class="header-social-links">
	<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-facebook"></i></a>
	<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-twitter"></i></a>
	<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-instagram"></i></a>
</div>

</div>

CSS Code: For better styling

To make social icons look good, add the following CSS code. In WordPress Dashboard, go to Appearance -> Customize and then paste this CSS code in the Additional CSS box.

.header-social-links {
    display: inline-block;
    padding: 10px 0 0;
    float: right;
    line-height: 1;
}

.header-social-links a {
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
	display: inline-block;
	margin: 0 8px 0 0;
	height: 35px;
	text-align: center;
	text-decoration: none;
	width: 35px;
}

.header-social-links a:last-child {
	margin-right: 0;
}

.header-social-links a:hover,
.header-social-links a:active {
	color: #bbb;
	border-color: #bbb;
}

.header-social-links i.icon {
	font-size: 14px;
	vertical-align: bottom;
	text-align: center;
	line-height: 34px;
}

@media only screen and (max-width: 580px) {
	.header-social-links {
		display: none;
	}
}

.header-social-links {

display: inline-block;

padding: 10px 0 0;

float: right;

line-height: 1;

}

.header-social-links a {

color: #fff;

border: 2px solid #fff;

border-radius: 50%;

display: inline-block;

margin: 0 8px 0 0;

height: 35px;

text-align: center;

text-decoration: none;

width: 35px;

}

.header-social-links a:last-child {

margin-right: 0;

}

.header-social-links a:hover,

.header-social-links a:active {

color: #bbb;

border-color: #bbb;

}

.header-social-links i.icon {

font-size: 14px;

vertical-align: bottom;

text-align: center;

line-height: 34px;

}

@media only screen and (max-width: 580px) {

.header-social-links {

display: none;

}

Before and After

PHP Snippet: Replace the menu function

CSS Code: For better styling

Reader Interactions

Leave a Reply Cancel reply

Search Tutorials