Navigation spanning the browser

You might want your navigation to span the whole width of your browser screen, from one end to the other. A few steps are involved, but it goes really fast. You’ll need to remove Thesis default header, create a new one in a function that includes divs for styling in CSS. Like so:

Important! Choose the full-width framework. Do a backup of your good Custom Functions and Custom CSS files BEFORE entering the code. That way if anything goes awry (it shouldn’t), you can remove the altered file with your good copy.

The following code replaces the default navigation with your own custom navigation. This code goes in the Custom Functions file:

function full_width_nav() { ?>
    <div id="nav_area" class="full_width">
        <div class="page">
            <?php thesis_nav_menu(); ?>
        </div>
    </div>
<?php }
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_before_content_area', 'full_width_nav');

The two divs in the function allow you to style the navigation bar in CSS. The following code goes into the Custom CSS file:

.custom .menu a{padding-bottom: 8px; margin-right: 25px; background: transparent;}

.custom #nav_area{ width: 100%; background: #000000; }
.custom #nav_area .page{background: #000000;}

Note that I included CSS for .menu a. I found that it’s needed to change padding, margins, font colors etc., -AND/OR- you can also change your navigation tab backgrounds and font-size in Thesis Design.

TIP:
1) you can also style your new navigation bar with a graphic on the background.
2) if you only want the navigation bar to span your content, leave off .custom #nav_area.

Tagged as: challenges, Navigaton, Thesis Theme