Button in Header

Hi,

We are happy to help you :) Please let us know what are the steps you have tried so far and if you faced any issue following the steps mentioned in the below link
http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

Best regards,
Vinay

Hi,

Firstly, as @rikard suggested please install a child theme before you perform the below modifications. By editing the main theme you risk losing all the modifications when you update the theme.

Steps to perform:

1. Since you are using the “menu below the header” layout please copy the appropriate code from http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/ to your themes functions.php file. Do not add a function in Quick CSS area.

2. Create a new widget area and call it “header” from Appearance > Widget

3. Add the below CSS code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:

/* CSS - Align header widgets to left and right */

#header .widget {
	max-width: 100px;
	height: auto;
	position: absolute;
	top:5px;
}

#header .widget:nth-child(1) {
	left:20px;		
}

#header .widget:nth-child(2) {
	right:20px;	
}

@media only screen and (max-width: 767px) {
#top #header .widget:nth-child(1) {
	position: relative;	
}
}

/* End CSS */

And the result will look like:

I have performed the steps for you to make it easy but install the child theme and move the modifications from main theme functions.php file to child theme functions.php file.

Please replace the “Deutsch” image with your own image it is only used only for testing purpose. You can change the image from Appearance > Widget > Header

You can remove the phone info which is overlapping the widget image.

I also made the header background repeat horizontally so it covers the whole header and not leave any black space :)

Hope you like this modifications :)

Do let us know if you have any questions.

Best regards,
Vinay