Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme

by Ashwin

thesis-full-height-sidebar

Thesis Theme gives you complete freedom in customizing the looks and the behavior of your WordPress Blog.

In this post, I will show you how to make the Sidebar of your Thesis Theme “Full-Height” and the Navigation Menu “Full-width”.  As with the other Thesis Theme tutorials – you will be editing the custom.css and custom_functions.php files.  If you are not sure about these files – please read on and I will give you the step-by-step procedure for getting things done.


What are we trying to create?

Before we start, let’s try to see what are we trying to create at the end of this tutorial.  Here is a snapshot of my Blog (yes, this Blog which you are reading) and I have used exactly these techniques for the customization.

thesis-full-height-sidebar-1

  • The Navigation Menu is full length and extends across the entire page.  Also it is at the extreme top of the page
  • Header and the Sidebar are the same level.  In other words – the Sidebar is full-height

This is exactly what we will create at the end of this tutorial.  However, I will not get too much into the styling aspect of it and you are free to use the styles as required.

Please note that this tutorial works best with 1 Sidebar.  With 2 or more Sidebars – the appearance may not be too pleasing.  Also this tutorial works only with Thesis Theme Version 1.6 and above

Enable Full Width HTML Framework

To start with this tutorial – you will enable the Full-width HTML Framework for your Thesis Theme. 

This can be done by navigating to WP Admin Dashboard => Thesis Options (on left) => Design Options => Framework Options => HTML Framework

Under this choose the Full-width framework option.

Bring Header and Sidebar to the Same level (Full-Height Sidebar)

Next we will work on bringing the Header and Sidebar to the Same level – as shown in the screenshot above.  To do this – we will proceed as follows:

  • Remove the original Header
  • Add the Header back into the Content Column – in line with the Sidebar

If you are using a FTP Editor to connect to your Blog – custom_functions.php and custom.css can be found in /wp-content/themes//custom.  Instead, you can also edit the file by navigating to WP Admin Dashboard => Thesis Options (on left) => Custom File Editor

As a first step – let us remove the Original Header.  For this, add the following code into the custom_functions.php file.

// Remove the Thesis header from its default location
remove_action('thesis_hook_header', 'thesis_default_header');

This code will just remove the Header contents – by leaving the area blank, still occupying whitespace below the Menu Bar.  So, to get rid of the blank area – add the following code the custom.css file.

/* Remove the Header */
.custom #header_area #header {
  display:none;
}

Now we got rid of the Header from it original location.  Now let us add it back to the Content column – at the same level as the Sidebar.  This is easily done by placing the following code into the custom_functions.php file.

// Place header at the top of the content column instead
add_action('thesis_hook_before_content', 'move_header');
function move_header() {
  echo '';
}

That’s it!  Now your Header and Sidebar will appear at the same level and surprisingly you have a Full-Height Sidebar.

Caution:  You might lose your Header Customizations if they are done in an unusual way – without the usage of .custom #header in the custom.css file.  So please exercise caution before creating this customization

Full-Width Navigation Bar

Moving on to the next part of this tutorial – we will create a full width Navigation Menu that extends across the page and sticks to the top of your Blog (close to the browser Bookmarks bar).

Here are the steps to achieve this:

  • Remove the padding space between the Navigation Menu, Top of the Blog (close to the browser Bookmarks bar) and Sideways
  • Give a color to the entire Navigation Bar
  • Adjust the Site Background color to match the Navigation Menu color

Before you start – choose the color for your Navigation Menu.  This color will also be used for the Site Background.  For the purpose of this tutorial – I will use #333333.

To remove the padding space around the Navigation Menu, copy the following code into the custom.css file.

/* Remove padding around the Navigation Bar */
.custom #header_area .page {
  padding:0em;
}

Once you add this code and refresh the page to see the changes – you will notice a small indent on both the sides of the Navigation Menu.  We will soon take care of this!

Use the following code to add a Background color to the Navigation Menu. Don’t forget to change the color code with the one suitable for your Blog.

/* Give a Background to the Navigation Bar */
.custom .menu {
  background-color:#333333;
  border-bottom:none;
  margin-left:-2.2em;
  margin-right:-2.2em;
}

Adding this code will only change the color of the Navigation Menu Background – and not the colors of the Menu items.  These are best controlled using the WP Admin Dashboard => Thesis Options (on left) => Design Options => Font, Colors and More! => Nav Menu

Now give the same Color to the Site Background – to give the effect of a Full-width Navigation Menu.  You can do this by going to WP Admin Dashboard => Thesis Options (on left) => Design Options => Font, Colors and More! => Body (and Content Area) and giving the color value under Site Background Color.

Now you will notice that the indent on the sides of the Navigation Bar is gone.

Here you have the Full-Height Sidebar and a Full-Width Navigation Bar.

Complete Code

Add the following code to the custom.css file.

/* Remove the Header */
.custom #header_area #header {
  display:none;
}

/* Remove padding around the Navigation Bar */
.custom #header_area .page {
  padding:0em;
}

/* Give a Background to the Navigation Bar */
.custom .menu {
  background-color:#333333;
  border-bottom:none;
  margin-left:-2.2em;
  margin-right:-2.2em;
}

Add the following code to the custom_functions.php file.

// Remove the Thesis header from its default location
remove_action('thesis_hook_header', 'thesis_default_header');

// Place header at the top of the content column instead
add_action('thesis_hook_before_content', 'move_header');
function move_header() {
  echo '';
}

Hope you found this tutorial useful.  I am available for professional Thesis Theme Customization projects!  Use the Contact form of my Blog to get in touch with me!

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  • http://twitter.com/thotsunlimited/status/7165411765 Ashwin

    Create a Full-Height Sidebar and Full-Width Navigation Menu in #Thesiswp Theme for #Wordpress http://bit.ly/6dTUZe

  • http://twitter.com/richer_image/status/7179455865 Richard Barratt

    RT @thotsunlimited: Create a Full-Height Sidebar and Full-Width Navigation Menu in #Thesiswp Theme for #Wordpress http://bit.ly/6dTUZe

  • http://twitter.com/nickreese/status/7179969773 Nicholas Reese

    RT @thotsunlimited: Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme http://bit.ly/6dTUZe

  • http://twitter.com/tublogger/status/7165360226 Ashwin

    Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme http://bit.ly/5em3Xr

  • http://topsy.com/tb/bit.ly/5em3Xr Tweets that mention Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme — Topsy.com

    [...] This post was mentioned on Twitter by Ashwin, Ashwin. Ashwin said: Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme http://bit.ly/5em3Xr [...]

  • http://twitter.com/twitanium/status/7289354006 Patrick – HFConcepts

    RT @thotsunlimited2010Create a Full-Height Sidebar and Full-Width Navigation Menu in #Thesiswp Theme http://bit.ly/6dTUZe #wordpress

  • http://twitter.com/web2feed/status/7289382629 Michael Davis

    RT @twitanium: RT @thotsunlimited2010Create a Full-Height Sidebar and Full-Width Navigation Menu in #Thesiswp Theme http://bit.ly/6dTUZe …

  • http://twitter.com/chopin_slut/status/7301268055 chopin_slut

    Create a Full-Height Sidebar and Full-Width Navigation Menu in #Thesiswp Theme http://bit.ly/6dTUZe #wordpress (via @thotsunlimited)

  • http://twitter.com/aenaz/status/7559774357 Naz

    create fullwidth nav menu & full height sidebar http://bit.ly/6hVOT8 #thesiswp (via @thotsunlimited)

  • http://twitter.com/thotsunlimited/status/7623866890 Ashwin

    Create a Full-Width Navigation Menu in #Thesiswp Theme http://bit.ly/6dTUZe #wordpress

  • http://twitter.com/thotsunlimited/status/8407961299 Ashwin

    Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme http://bit.ly/6dTUZe #thesiswp

  • http://twitter.com/thotsunlimited/status/8585489338 Ashwin

    Create a Full-Height Sidebar and Full-Width Navigation Menu in #Thesiswp Theme http://bit.ly/6dTUZe #wordpress

  • http://aa-chan.net/ AA-CHAN

    I had this working last time I was designing my site, but for some reason, I can't get the bar to be full width this time around. It will not expand past the width of my content. I have tried removing all other functions from the custom file and all CSS from the custom file, but to no avail.

    Don't suppose you've ever come across any conflicts?

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Sorry for a late response. Is you Nav Bar above or below the header?

  • http://twitter.com/richer_image/status/10486525323 Richard Barratt

    Create a Full-Height Sidebar & Full-Width Nav Menu in Thesis http://ow.ly/1kqsq #thesiswp #wordpress

  • http://twitter.com/kwbridge/status/10527211920 Kim Woodbridge

    Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme http://bit.ly/caK4T5 by @thotsunlimited

  • http://www.kimwoodbridge.com Kim Woodbridge

    Thank you! I needed to do this today and your post was perfect! Lucky day :-)

  • http://www.kimwoodbridge.com Kim Woodbridge

    Thank you! I needed to do this today and your post was perfect! Lucky day :-)

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Excellent! Happy to help people with WordPress and Thesis Theme :)

  • danamk

    Thank you for this tutorial! Could you give me a pointer? Why do I have a white box to the right of the nav menu? http://www.lowerbloodpressuredrugfree.com

    Thx,
    Dana

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Just replace this code in place of the .custom .menu code in the post above.

    /* Give a Background to the Navigation Bar */
    .custom .menu {
    background-color:#333333;
    border-bottom:none;
    margin-left:-2.2em;
    margin-right:-2.2em;
    width:100%;
    }

    The only difference is the usage of width:100%;

    I hope this should solve the problem. Let me know if it works.

    Thanks.

  • http://www.pentestit.com Black

    Hey Ashwin,

    I have been a thesis-blogging enthusiast for some time now. I run a tech blog here – http://www.pentestit.com.
    I try and customize it as and when possible. Just today I added the pagination from your site.
    I like my blog to be plain and simple.
    I am not completely happy with the way my blog looks right now.
    What I want your help with is that the page should detect a browsers dimensions and display likewise. Can we do something like that in Thesis?
    Your response is awaited.

  • http://www.powerwebbusiness.com/ Ashwin

    Hi Black,

    I think what you want is the “Fluid width” – to dynamically adjust based on the browser dimensions. I think already Thesis does that.

    Do you have a specific example with your Blog and a Browser dimension, to explain me what really the problem is?

    Thanks,
    Ashwin

  • http://www.bizchickblogs.com Tia Peterson, BizChickBlogs

    Hi, when I used this code, the menu items are spaced off the page to the left. How can I center the menu items? Thanks!

  • http://www.pentestit.com Max

    Yep. I now understood. I was just trying to work without the “Full width framework” with an image on the background.

  • http://www.powerwebbusiness.com/ Ashwin

    Great that you managed to solve it by yourself :)

  • http://www.powerwebbusiness.com/ Ashwin

    Tia,

    There is no direct way to center the Menu Items. Only way is to have a left padding to the
    .custom .menu element that will push the entire menu set to the middle.

    Let me know if this works. Thanks.

  • http://www.girliegeek.com/2010/05/20/links-for-2010-05-20/ links for 2010-05-20 — girliegeek

    [...] Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme (tags: thesis sidebar full navmenu fullwidth) [...]

  • http://twitter.com/thotsunlimited/status/16758503100 Ashwin

    Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme – http://bit.ly/br65BT #thesiswp

  • Gazhealey

    Thanks for the great tutorial. Can you help me get the header back into its default location just for one specific page. Your help would be appreciated

  • venueinsider

    is this still good with 1.8?

  • venueinsider

    THIS IS NOT GOOD WITH THESIS 1.8 – DOUBLE HEADER IMAGE

  • http://www.powerwebbusiness.com/ Ashwin

    Thanks for letting me know. I will update it for 1.8.

  • Anonymous

    has this been updated? thanks for all your help

  • lorenwade

    Works fine in Full Width, but is there a way to do this in Page Framework?

  • https://thoughtsunlimited.net Ashwin

    Unfortunately the “Full width” doesn’t working without the HTML Full width Framework. Page width framework doesn’t help!

blog comments powered by Disqus

Previous post:

Next post: