Build Your Own Business Website header image

Lesson 10 – Creating the Floating Boxes Navigation Menu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Please note that this course has been replaced with the new “Sell Your Digital Products with WP eStore

In this video tutorial we will learn how to create the “floating boxes” style of the Thesis Navigation Menu. This is the fourth of the tutorials on styling your new ecommerce website as part of the Build Your Own Ecommerce Website course.

In this tenth lesson we will use both Thesis Design Options and some custom CSS to accomplish this styling of the navigation menu. We’ll start of by gaining an introductory understanding of the structure and elements of the Navigation Menu. These include the HTML Structure, there is the Link Behavior, there are General Styles and then there are the Specific Styles. Next we’ll configure the Design Options.  This includes styling structures we just covered in the previous section. Once we have gone as far as we can with Design Options we will finish styling by adding custom CSS styling to the text in the menu. Finally we will configure the width and spacing of the menu items resulting in equally sized and equally spaced tabs.  We will also make various minor adjustments to complete the “floating boxes” style of the menu.

In this lesson you will:

Understanding the Thesis Navigation Menu Structure – Watch the Video

  • HTML Structure – Review the navigation structure
  • Link Behavior – Standard, Hover, Current, and Parent
  • General Styles
  • Specific Styles

Configuring the Navigation Menu with Thesis Design Options – Watch the Video

  • Text Definitions – Style and Size
  • Link Definitions
  • Background Definitions
  • Border and Submenu

Adding Custom Styling to the Menu Text – Watch the Video

  • Identify the element in Firebug
  • Review the CSS styles
  • Test bold behavior – Adjust tab size
  • Add to custom.css
  • Test in all browsers

Set the Menu Item Width and Spacing – Watch the Video

  • Test the width
  • Add spacing
  • Fix text with CSS
  • Set submenu width
  • Raise the menu
  • Test in all browsers

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
2 Comments… add one
2 comments… add one
  • Toufiq October 26, 2012, 9:15 pm

    Pls give some sample and css code. i expect more from you coz i use one of your plugin for thesis and you are the best!

    • Rick Anderson October 27, 2012, 3:21 pm

      Toufiq, the code used in the videos are displayed below the video. You need to be logged in to see it though.