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
Step 1: Go to WordPress Admin Panel -> Thesis -> Skin Editor
Step 2: Choose “HTML Container” box
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”
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
Step 7: Add new container box inside the “Full Width Menu”. Give class as “container”
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
Step 9: Go to WordPress Admin Panel -> Thesis -> Custom CSS
then add the following css code
[code type=css]
.full-width-header
{
background: #D83434;
}
[/code]
Step 10: Go to WordPress Admin Panel -> Thesis -> Skin Editor
Add the following css code to .menu a
[code type=css]
.menu a
{
background: #D83434;
color: #FFF;
}
[/code]
Final Result
Final look Full width navigation menu bar thesis