Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 26: Dressing Up Thesis 2 Nav Menu

Thesis 2 Header Color Using CSS Variable

Warning!

Thesis Packages have been deprecated.  Please read this for details.

Feeling strong, my friend?  Good!  Let’s tackle dressing up the Thesis 2 Nav Menu.  We’ll use our color scheme to make the Nav Menu match our target build.  There are several items that we’ll change with the way the nav menu behaves.  You may have noticed that as you move your cursor over a menu item it will change color.  When you move off the nav item it changes back to its original color.  You’ll also notice that when you click on a menu option that will will change color, and remain that color.  Read on to see how we can change these colors using our color palette.

Navigate to the Thesis 2 CSS page.  Before moving forward, make note of the color variables for secondary color A and B.  Now, under the CSS Packages section look for the “Menu” item.  Click on “Menu”.

Thesis 2 Menu CSS Option

Click “Options” at the top then click the “Link Settings” arrow and it will expand to show the different link settings.

Thesis 2 Nav Menu CSS

We’ll change the “Links” first.  This will change the background color for the nav menu links when a visitor first enters the site.

Thesis 2 Nav Menu Links CSS

Next we’ll change the color of the nav menu when someone moves their cursor over the selection.  This is called “hover” in CSS speak.  This helps to make it clear that this is a menu item that can be clicked.

Thesis 2 Nav Menu Hover Color CSS

Now look at your nav menu (be sure to save the CSS using the green button then refreshing your browser).  Notice when you move your cursor over the menu that the items change color.

Thesis 2 Nav Menu Hover CSS

The dark text against the dark background is hard to read.  So let’s change the color of the text on a hover over.  We’ll make it white for good contrast.  We can do this by changing the Text Color for Hovered Links.  We’ll use hex code “ffffff” which is white.

Thesis 2 Nav Menu Hover Text Color

You can see the difference it makes.  It also adds to the contrast between the hovered link and the rest of the nav menu items.

Thesis 2 Nav Menu Hover Text CSS

I like to change the buttons so that once a visitor clicks a menu item, it changes color until the visitor clicks to go home or clicks another nav menu option.  These are called “Current Links”.  By making the current or clicked nav menu change it gives a visual clue that the visitor has changed menu selections.  I typically make the the current link the same as the hover.  You can experiment and see what combination of Links, Hovered Links, and Current Links styles you like.

Thesis 2 Nav Menu Currentl Links CSS

You will notice in the images above that our colors are only on the navigation menu items,they do not carry all the way across the nav bar.  Open the CSS Menu Package again.  Go to the “Additional CSS” tab.  Another awesome thing about Thesis 2 is when a CSS control doesn’t have any direct formatting, you can add your own CSS from scratch using the Additional CSS tab.  The statement shown below will color the entire nav menu bar with our default color.  Click the green “Save” button then click the green “Save CSS” button.

Thesis 2 Nav Menu Background Color

You will now see the entire menu nav bar is the same color as the buttons.  While I was in there, I also changed the font size to 16px.

Thesis 2 Nav Menu Color

See now, the Thesis 2 Nav Menu wasn’t that hard.

 

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 11 comments… add one }

  • Rachel March 9, 2013, 4:17 PM

    Thanks for the tutorials, Doug. Found your site through Thesis. Just wanted to pass on the suggestion that you turn these posts into an e-book, and let that be a download for your site in exchange for e-mail. That way you could build a list and start making some money from that list sometime down the line.
    When I clicked on your Hello bar, I actually thought that’s what it was, since that is usually what it’s used for.

  • Doug Macklem March 9, 2013, 5:04 PM

    Rachel: Thanks for the suggestion. That would be a great post to add to my tutorial. It seems I’ll never run out of material as there are so many things that can be done for a site.

    I’ve copied your suggestion to my note in Evernote so I don’t forget.

  • Tom Barney March 12, 2013, 7:29 PM

    Doug,
    I think I going to GIVE UP with Thesis 2.0 Now, I finally got the tabs to the colors I wanted some what( I have colors inside color on the header….Don’t know how that happened.) And when I click on the about tab and the short biblical tab it gets weird again, color changes to white and the menu box are now going to the top of the header. I am so F#@&ing frustrated I think I am about to ‘”throw in the towel”

  • Doug Macklem March 14, 2013, 3:51 PM

    Nothing more frustrating than software. The menu box is going to the top of the header due to the templates. This guide through step 43 only works on the “Home” template. In step 43 we copy the changes to other templates so the rest of your site looks the same.
    http://thriftyzizel.com/step-43-how-to-use-thesis-2-templates/

  • Matt from Saverocity April 11, 2013, 6:38 PM

    Hi Doug,

    I just upgraded to Thesis 2 today,I have to say its surprising how different it is for a not so technical person. I can recognize the customization potential, but its not the most friendly.

    I have a menu question, for some reason my menu (and header image) are indented from the content body. Is there a way to edit this and either align or change the start point (from the left most pixel) ?

    Thanks,

    Matt

  • Doug Macklem April 11, 2013, 9:15 PM

    Matt: your content and nav menu appear lined up to me. What appears off is the header. You have a #header property ,”padding-right: 13px;”, that when removed, lines up the header with the nav menu and content.

  • Connor June 22, 2013, 5:06 PM

    I was extremely pleased to uncover this site. I want to to thank
    you for your time just for this wonderful read!
    ! I definitely loved every bit of it and I have you book marked to check out new things in your blog.

  • wajahat September 22, 2013, 4:26 PM

    2 problems :
    the dividers (or borders) in the nav menu wont disappear or atleast change color no matter what i do. i’ve also tried it through “single elements style package” when the “nav menu package” didn’t give many options. the package for the WP menu only shows “Choose a Menu Border Style” so left with no option.
    What do I want ? I want my menu to have a white background with no hover effects (no backgrounds/font change) aligned to the right of the framework in the header. somebody help !

  • Doug Macklem September 23, 2013, 10:22 AM

    Can you send me your link to check out? What version of Thesis are you running? 2.1 changed the way some of the 2.0 things worked.

  • Mark October 15, 2013, 4:29 AM

    These guides are really useful but since packages have been depreciated there doesn’t seem to be an easy way to achieve this (like above) anymore? Is this right or am I missing something?
    Packages seemed like a good idea rather than having to write custom.css – especially for people like me with limited coding knowledge.

  • Doug Macklem October 17, 2013, 7:06 PM

    I still have packages available until the 2.2 upgrade. At that time I’ll have to (re)figure this out. For now, I am still using packages. I think Thesis 2.x is moving towards requiring more knowledge of CSS and less menu driven. We’ll see. I am waiting for the Pearsonified Theme to be released and would like to try it out.

Leave a Comment