How to make Full Width Header in Thesis

By | December 20, 2013

Default thesis skin will comes with a fixed header. Here is the way how to make full width header in thesis framework. Full width header will gives the website pleasant look. Full width header can also be done with custom php code, here we are going to have a full width header with thesis editor.

This is the default header style

Default header in thesis theme - Full Width Header Thesis

Default header in thesis theme – Full Width Header Thesis

 

Step 1:   Go to WordPress Admin Panel -> Thesis -> Skin Editor

Step 2:  Choose “HTML Container” box

Add Container box -- Full Width Header Thesis

Add Container box — Full Width Header Thesis

 

 Step 3:  Add “Container” box just below the HTML Body.

Add Container box - Full Width Header Thesis

Add Container box – Full Width Header Thesis

 

Step 4: Click on the “Show box options” button on newly added “Container” box.

Click show box - Full Width Header Thesis

Click show box – Full Width Header Thesis

 

Step 5: Change name of  “Container” box as “Full Width Header” and give class name as “full-width-header”

Full Width Container box options - Full Width Header Thesis

Full Width Container box options – Full Width Header Thesis

 

Step 6:   Go to WordPress Admin Panel -> Thesis -> Custom CSS

then add the following css code

[code type=css]

.full-width-header

{

background: #F82A2A;

}

[/code]

 

Step 7:   Add new HTML Container box into “Full Width Header” box

Add Container - Full Width Header Thesis

Add Container – Full Width Header Thesis

 

Step 8  Click on “Show box options” button and give class name as “container”

Container Property

Container Property

 

Step 9  Just Drag and drop the “Header” box and “Nav Menu” box from below container into the Full Width Header box’s container

move header navmenu to full width header
move header navmenu to full width header

 

Step 10:  Here is the thesis header in full width

Thesis header in full width header

Thesis header in full width header

 

 

 

Leave a Reply

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