Thesis 2.0 Guide – Part 6 – CSS Editor – Menu Package Options

Part 6 of the Thesis 2.0 guide will continue to cover all the options available to you in the default theme classic. In the previous guide Part 5, we covered all the options found in the Links Package. This guide will cover the options found in the Menu Package.

If you haven’t read them already you can find the previous guide below.

Thesis 2.0 Part 5 – CSS Editor – Links Package Options

You ready?

Let’s begin!

Horizontal Dropdown Menu (WP)

The WordPress Nav menu is arguably one of the most complex HTML structures found in the WordPress or any website for that matter. In turn this also makes it one of the most difficult structures to apply CSS to in the manner in which you would like.

Let me give you an example of a menu’s HTML & CSS markup.

The HTML

<ul id="top-nav" class="menu">
    <li id="menu-item-#" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-#">
        <a href="http://sitename.com">Resources</a>
           <ul class="sub-menu">
               <li id="menu-item-#" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-#">
			       <a href="http://sitename.com">Archives</a>
				     <ul class="sub-menu">
					      <li id="menu-item-#" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-#">
                               <a href="http://sitename.com">sub menu child</a>
                         </li>
				    </ul>
			  </li>	  
		  </ul>		  
   </li>
</ul>

The CSS

.menu { position: relative; list-style: none; z-index: 50; }
.menu li { position: relative; float: left; }
.menu ul { position: absolute; visibility: hidden; list-style: none; z-index: 110; }
.menu ul li { clear: both; }
.menu a { display: block; }
.menu ul ul { position: absolute; top: 0; }
.menu li:hover ul, .menu a:hover ul, .menu :hover ul :hover ul, .menu :hover ul :hover ul :hover ul { visibility: visible; }
.menu :hover ul ul, .menu :hover ul :hover ul ul { visibility: hidden; }
.menu ul, .menu ul li { width: 200px; }
.menu ul ul, .menu :hover ul :hover ul { left: 200px; }
.menu a { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 18px; font-weight: bold; text-transform: uppercase; text-align: left;letter-spacing: 1px; padding-top: 9px; padding-right: 11px; padding-bottom: 9px; padding-left: 11px; }
.menu ul a { width: auto; }
.menu a, .menu .current ul a, .menu .current-cat ul a, .menu .current-menu-item ul a { color: #fff; background-color: #333; }
.menu a:hover, .menu .current ul a:hover, .menu .current-cat ul a:hover, .menu .current-parent a:hover, .menu .current-menu-item ul a:hover, .menu .current-menu-ancestor a:hover { color: #cc0000; background-color: #333; }
.menu .current a, .menu .current a:hover, .menu .current-cat a, .menu .current-cat a:hover, .menu .current-menu-item a, .menu .current-menu-item a:hover { color: #cc0000; background: #333; }
.menu .current-parent > a, .menu .current-cat-parent > a, .menu .current-menu-ancestor > a { color: #fff; background: #333333; }
.menu ul a {background:white;color:#333;box-shadow: 0 0 12px rgba(0, 0, 0, 1);}

Now don’t be put off by this, it is just an example. This will produce a menu like this.

Now the end result looks a lot simpler than the HTML & CSS above, but you see, we can go even further than this. We could add a series of child menu items, from there more Child menus branching out to the right and from there more child menu’s and so on.

Think of a family tree, and that’s pretty much how a menu is structured starting with the parents at the top.

The default Horizontal Dropdown Menu (WP) CSS package comes with all the styling options to style the parent menu and the child menu’s to a reasonable level, i.e. the background, text color will be the same and this is for good reason and not by accident.

You see the overall majority of people style there menus with one set of color schemes. Like mine, red, light-ish black and white.

That means they don’t want the most colossal set of options, because for every level of the menu, you would have to create the same set of options for each and that could be a little overwhelming for most people.

I am sure that more options will be added in time, CSS packages will come that extend the options available to you. But for now, the default CSS package is as simple as it needs to be to achieve what the majority require.

As you read further down this post, bare this thought. Almost all of the following Options could be applied to each level and depth of the menu depending on it’s complexity.

Horizontal Dropdown Menu (WP) HTML

As always we start with the HTML container, after all were can built our CSS packages all day long, but if it doesn’t have any HTML to be applied to then there would be no point.

Here you can select the menu to display, the drop down menu will display a list of menu’s that you have created in the wp admin panel.

appearance > menus

HTML id – if you want to create a second menu and style it seperately from another menu then the best way to do that is to add an ID to it. You will see how that fits in tothe CSS package shortly.

HTML class – this is the class that the menu will use, by default it is menu, and I would leave it at that.

As this is a drag and drop box, you can place this wherever you want the menu to display.

Note that when creating a new menu, you must use the menu box from the add box menu.

Horizontal Dropdown Menu (WP) CSS Package Options

So we quickly looked at the HTML Box that we are going to style we can now take a look at the options.

Once you have created or selected your menus CSS package you can specify the following.

Name – If you just have one menu then you can just call it Menu, but if you have two or more, then you might want to give them a more appropriate name. Example, Top Nav, Bottom Nav.

Reference - this is what you will add to the reference sheet with the &name, for easiness I would just make this the same as the name.

CSS Selector – this is what links the HTML box to the CSS defined in the style sheet.

Note – remember I said above that if you wanted to create a second menu then the easiest way would be to add an ID. you would enter that ID here instead of the class. So if you gave the menu an ID of top-nav you would enter #top-nav in the CSS Selector input box.

That would then style only the top-nav and not all menus.

Font settings

As we have already covered the font settings in Part 3 there is no need to repeat them here.

Link Settings

The link settings come with five different options for styling your menu depending on which part of the menu the user is currently at, clicked on or hovered over.

All of these options have the same set of options available to you, but they differ in terms of which part, and the state of the menu structure they affect.

Links

  • Text Color – This will affect the whole menu, so when you change the color here, it will change the color for all the child menu-items too when in an idle state.
  • Text Decoration – This will affect all the text decorations when the menu is in an idle state.
  • Background Color – The background color selected here will affect the menus background again in the idle state.

Hovered Links

Remember in Part 5 we talked a little about Pseudo Classes. Again the menu also has Pseudo Classes which help users know that they are hovering over the right menu. If we didn’t use Pseudo classes our menu would look lifeless and may confuse users as to whether they are on the right menu.

In this case the Pseudo Class is ( a:hover )

  • Text Color – The color you set here will display only when a user hovers on a menu-item, including child-menu-items. It will not change color unless the users cursor is on a menu-item.
  • Text Decoration – Again this only takes a effect when the user hovers over a menuitem.
  • Background Color – Here you can select the color of the background if you wish to make a clear distinction between the idle state and hover state.

In my case I only have the text change color when the user hovers over the menu. It changes from White text to Red.

Active Links

This is another Pseudo Class. The active state comes in to effect when the user has click on a menu-item which in turn activates something, this will be useful for dropdown menus that open and close via clicking on it to open up the menu.

In this case the Pseudo Class is ( a:active )

This option could be useful if you display categories in your sidebar as a drop down menu whereby it open when someone clicks on it.

Available Options

  • Text Color
  • Text Decoration
  • Background Color

Current Links

The current state comes in to effect when the user has click on a menu item. Notice when you click on one of my menu-items the text changes from Red to White. This let’s the user know which menu-item they are currently on. Again I chose not to change the background color so it remains the same.

In this case, a class is automatically assigned to the menu when it is active.

.menu .current-menu-item a

.menu – is the main class.

.current-menu-item - is the class assigned to all menu-items that are currently in use.

a – without this, then the menu would not be a link and therefor you wouldn’t be able to click on it.

It gets more complex than this and I will explain that in another Post for menus in general.

Available Options

  • Text Color
  • Text Decoration
  • Background Color

Current Parent Links

In principal this is the same as Current links but with one key difference.

Current links affects only the current menu that is currently in use.

Current Parent links affects the Parent menu-item when a child menu-item is currently in use.

In this case the CSS would look like this.

.menu .current-parent > a

.menu – the main class for the menu

.current-parent – the current parent menu-item of the child menu-item

> – is a child selector.

Example

if A = parent menu-item

and

B is = Child menu-item

the child selector ( > )

is saying when the child (B) is selected change color of the parent (A)

This lets the user know which branch of the menu tree there currently in.

I will explain in more detail on a separate Post about menu tree’s for those interested.

Available Options

  • Text Color
  • Text Decoration
  • Background Color

Menu Padding

If you have been reading this series you should know by now that Padding adds space between the inside edge of the container and the content inside it.

In this case the content is the text you see on your menu.

Because the text and container are the same size, the effect of the padding is a little different than if the container was much larger.

As the text cannot go anywhere, the menus container simply becomes bigger.

Examples below

The color represents Padding.

You can see clearly here that the text remains the same, but the container gets larger depending on how much padding you add.

Border Settings

Here you can set the following.

  • None – which means that no border will display at all.
  • Tabbed- if you select this option then the following options will display.
      • Border width – Simply put, the thickness of the border, by default it uses (px).
      • Border Style – we covered this in the previous post with a complete example of all the different styles available here.
      • Color – Select a color for the border.

Sub Menu Width

The final option available to you is the Sub Menu width.

Sub Menus are child menu-items.

By default the width is 150px, but if you need them to be wider then this is where you can set that.

As always if you would like to add some custom CSS you can just head over to the additional CSS tab. This works in a similar way to the old custom.css file but for this particular packages CSS.

In this case, the css above is targetting the Child menu-items. Giving them a white background, black-ish text and a shadow effect around the edges.

This concludes Part 6, the main point I would like you to take away from this, is that the menu structure is complex and this is why the options available to you are limited to what is available at this time.

I will be writing a post all about Menus which will be a standalone post. It will show you the more complex side of menus and explain in greater detail how you would edit different levels of the menu structure.

Proceed to – Thesis 2.0 Part 7 – CSS Editor – Comment Package Options
Don’t have Thesis check it out here

Thesis 2 Tutorials

About the Author

Matthew Horne

Matthew Horne is an Optimization Specialist whose passion lies in making the web a faster and more efficient place. He has been fighting an uphill battle to change the minds of the masses.

15 comments… add one

  • KiwiBrian October 16, 2012, 9:48 pm

    Thankyou yet again for your superb series.

  • Sybille October 20, 2012, 4:18 am

    thank you Matthew – that’s extremely useful.

    I have compiled it all into one big PDF file. Please email me if you would like me to send it to you. It’s 52 pages, and maybe you can offer it as an ebook?

    • Matthew Horne October 20, 2012, 11:53 am

      Sure thing, I would be happy to take a look at it :-)

  • Primoz Borovnik October 28, 2012, 10:53 am

    Hello Matthew, I was trying to change the color of .header and wont work. I literally tried everything but still wont budge. Do you have any suggestion? The skin I use is Thesis Legendary for Thesis 2.0.
    Thanks

    • Matthew Horne October 28, 2012, 12:03 pm

      Hi, the CSS for ther header is using an id called #header

      I would looking for the CSS package for the Header and then check additional CSS as well as the CSS options for that package.

  • Candice Michelle November 5, 2012, 9:48 am

    Thank you for your informative article, that you went to a lot of time and trouble to write so as to provide people with free information. It explained everything I needed to know and I appreciate your time.

  • JasonOssenmacher December 3, 2012, 5:31 am

    Thanks for the informative article. Question any idea on how to add a search formm directly into the nav menu?

    • Matthew Horne December 4, 2012, 12:17 pm

      There are a few ways to do this, I would have to have a look at the options and see which is best.

  • Imran Shariff December 29, 2012, 4:08 am

    Hi Matthew is there a way I can add horizontal sub menu with a defined with.

    • Matthew Horne December 29, 2012, 5:14 am

      Can you provide an example so I know exactly what you mean. I have an idea, but to save time, if you have an example I can show you.

  • MargieAnalise January 7, 2013, 9:02 am

    Thank you so much for this great article! I find all your thesis 2.0 articles helpful as I navigate this new territory! One question maybe you can help me with? When looking at my page on a mobile device, the menu is stacked and to the left of the page. Is there anything I can do to resolve that? Many thanks!

    • Matthew Horne January 7, 2013, 9:07 am

      You would have to use media queries to alter the CSS for certain devices. If you look at my style sheet and scroll right down to the bottom, you will see media queries.

      http://diywpblog.com/wp-content/thesis/skins/classic/css.css

      @media only screen and (min-width : 320px) and (max-width : 480px) {

      // custom css

      }

      This would target an ipod touch

  • Dave Voelker January 28, 2013, 7:50 am

    Hi Matthew, great stuff you have here thanks so much for pulling this together.

    I have a client that is asking for a tabbed menu structure and each tab will have a different background color. Child menu items should inherit the background color of their parent.

    Can you recommend the best approach to this with Thesis 2?

    Thanks!

    • Matthew Horne January 28, 2013, 7:53 am

      I have a box that can turn things in to tabs, but it takes some setting up. Once I get some time I will be able to release it and write the docs for that.

  • Ilya Morozov November 3, 2013, 7:23 pm

    Thanks a lot!

Leave a Comment

Current day month ye@r *