David Stockdale's Scrapcode

Creating A Header Centred Between A Menu And A Widget

Shown above is the header I created within the Beans theme for the website of Tees Valley Arts.

The goal here was to mimic the old layout created for the Tees Valley Arts website using the Genesis theme using the Beans theme instead.

This required a widget area to the right of the site title for the use of the plugin “Simple social icons” (although I may later make an improved version that doesn’t require the plugin at all).

Functions

The code for setting everything to it’s proper place:


add_action( 'widgets_init', 'widget_areas' );
/**
 * Add widget area.
 */
function widget_areas() {

    beans_register_widget_area( array(
        'name' => 'Right',
        'id' => 'right',
		'description' => 'Widgets in this area will be shown on the right side
 of the site title (put simple social icons here).',
        'beans_type' => 'grid'
    ) );
}




/**
 * Display the header widget area at the end of the header.
 */
add_action( 'beans_site_branding_after_markup', 'header_widget_area' );
/**
 * Header widget area layout/style.
 */
function header_widget_area() {

 ?>
<?php echo beans_widget_area( 'right' ); ?>
<?php

}


/**
 * Moves Beans "Primary Menu" to the left side of the site title.
 */
beans_modify_action_hook( 'beans_primary_menu', 'beans_header_prepend_markup' );


Style

The code for centring the site title between a stylised menu and a set of spaced out social icons:

/**
 * Sets up the layout of the header
 */

//social media icons
body > div.tm-site > header > div > div.uk-grid > div > div > div > ul.alignright {
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
}

body > div.tm-site > header > div > div.uk-grid > div > div > div > ul.alignright li { 
	display: inline;
	float:right;
	width:25px;
	height:25px;
	
	padding-left:30px!important;
} 


body > div.tm-site > header > div > div.uk-grid > div > div > div > ul.alignright li a svg { 
	width:25px;
	height:25px;
} 

//site title
body > div.tm-site > header > div > div.tm-site-branding {
	display: inline;
}

body > div.tm-site > header.tm-header .uk-grid {
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;
	
	float:right;
}

body > div.tm-site > header.tm-header .uk-grid .uk-width-medium-1-1 {
	width:232.188px;
	margin-left:0px;
	margin-right:0px;
	padding-left:0px;
	padding-right:0px;
}

//primary menu
body > div.tm-site > header.tm-header .tm-primary-menu {
	margin-right:0px;
	margin-left:0px;
	
	float:left;
}


body > div.tm-site > header.tm-header .uk-container-center {
	padding-left:0px;
	padding-right:0px;
	
	margin-left:0px;
	margin-right:0px;
	
	max-width:100%;
}

body > div.tm-site > header.tm-header {
	margin-left:0px;
	margin-right:0px;
	
	text-align:center;
	
	padding-left:8%;
	padding-right:8%;
}

Widget

Then simply place the simple social icons plugin within the widget area.

Bear in mind that the plugins style settings will not function outside of a post/page but the style handles that.

Of course this solution doesn’t look good on mobile yet, so I’ll probably do another post on that when I’ve fixed it.

Leave a Reply