How to make Full Width Navigation/Menu Bar in Thesis

By | December 22, 2013

Default thesis skin will comes with a fixed header and menu/navigation bar. Here is the way how to make full width menu in thesis framework. Full width navigation bar can also be done with custom php code, here we are going to have a full width header with thesis editor in simple way.

This is the default navigation bar style

 

Navigation menu Thesis

Navigation menu Thesis

 

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

Step 2:  Choose ”HTML Container” box

add html container - full width navigation menu bar thesis

add html container

 

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

Step 4:  Click Box options of newly added container, give name as “Head Container” and class as “container”

Name&Class-- full width navigation menu bar thesis

full width navigation menu bar thesis

 

Step 5: Move Header box from container to “Head Container”

 

Step 6:  Add new container box, just below the “Head Container”. Give name as “Full Width Menu” and class as “full-width-menu”

Full width navigation menu bar thesis

Full width navigation menu bar thesis

 

Step 7:  Add new container box inside the “Full Width Menu”. Give class as “container”

Full width navigation menu bar thesis

Full width navigation menu bar thesis

 

Step 8:  Move “Nav Menu” from container to “Full width Menu” box

Nav Menu from container to Full width Menu

Nav Menu from container to Full width Menu

 

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

then add the following css code

1
2
3
4
5
6
7
.full-width-header
{
background: #D83434;
}

 

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

Add the following css code to .menu a

1
2
3
4
5
6
7
8
9
.menu a
{
background: #D83434;
color: #FFF;
}

 

Final Result

Final look Full width navigation menu bar thesis

Final look Full width navigation menu bar thesis

Leave a Reply

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