Build Your Own Business Website header image

Thesis Nav Menu

Lesson 5 – Part 7 – Style the Main Nav Menu

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

I'm going to do one other thing and that is to style this top navigation menu. We're going to start off with design options and we will be doing some of these in custom CSS but we'll start by just doing what we can in Thesis Design Options. The font family is going to be

How to remove the Thesis Header Image and Navigation Menu from a specific page

In this session we show how can you remove Thesis Header Image, Page Title, Thesis footer and Thesis Sidebars from a specific page using the BYOB Thesis Landing Pages plugin. We also show how to remove Thesis Nav from a specific page using BYOB Thesis WP Menus plugin.

How to Configure Thesis Navigation Menu as Buttons Using CSS3 Gradients

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - ,

In this session we show how to create individual buttons in the navigation menu using a CSS3 Gradients button generator and applying the code to a simple Thesis menu. We also show how to configure the size, hover, padding and spaces of the buttons. The next thing we’re going to do is make these individual

How to Add CSS3 Gradients to the Thesis Navigation Menu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - , ,

In this session, we show how to style and add CSS3 gradients to the Thesis navigation menu using a button generator and coping and pasting the code to custom CSS. We also show how to adjust and style the buttons by writing some additional CSS. The first thing we’re going to do is we’re going

Style Individual Menu Items on the Thesis Navigation Menu

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

This member wants to add a border radius to the upper left and right corners of his Thesis navigation menu. We demonstrate adding top margin to the menu, removing some unnecessary border, adding the border radius to the appropriate menu items and limiting the changes to the immediate children of the selector. So this member

Lesson 6 – Part 4 – The Structure of the Thesis Navigation Menu

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to Part 4 of Lesson 6 of the Customize Thesis Like a Pro tutorial series. In this part of the lesson, we’re going to discuss how inheritance and specificity apply to the Thesis Nav menu. Thesis Navigation Menu – How Inheritance and Specificity Affect It The Thesis Nav menu is really the ideal

Lesson 6 – Part 5 – Classes Thesis Applies to the Navigation Menu

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to Part 5 of Lesson 6 of the Customize Thesis Like a Pro tutorial series. In this part of the lesson, we’re going to look at how specificity and inheritance in CSS influence the structures of the Thesis Nav menu. Earlier we said that the Thesis theme navigation menu is built out of

Lesson 6 – Part 6 – Specificity in the Structure of the Navigation Menu

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

This lesson is a continuation from the previous part 5, CSS Specificity and Inheritance in the Thesis Theme Navigation Menu, lesson of our Customize Thesis Like a Pro video tutorial series. Connection of Elements to Classes in CSS Now let’s take a look at the connection of elements to classes in CSS as shown in

Lesson 6 – Part 7 – Classes Thesis Applies to the Navigation Menu

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to Part 7 of Lesson 6 of the Customize Thesis Like a Pro tutorial series. In this part of the lesson, we are going to finish our examination of CSS specificity and inheritance in the Thesis theme by looking at the classes that Thesis adds to each menu item and then looking at

Lesson 6 – Part 8 – Examples of Styling Elements of the Thesis Navigation Menu

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to the eighth and final part of Lesson 6 of the Customize Thesis Like a Pro tutorial series. In this final part of the lesson, we are going to look at specific examples of styling individual navigation menu items using the classes that the Thesis theme adds to each individual menu item. Top

Fine Tune the Width and Location of the Navigation Menu

Difficulty Level -

Filed Under Topics - , , , ,

Listed Under Lesson Subjects -

A member has a navigation bar on her website that doesn’t line up with the header above it. We inspect the menu’s elements in Firebug and adjust the style using Edit CSS on Web Developer to get the navigation menu to look right. To do this we adjusted the margin on the .custom .menu and

Indicating the Current Page on the Thesis Nav Menu

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

A member wants to indicate on her customized navigation menu that a visitor is at the current page in the menu. Thesis has settings for this and they are set by default. She has replaced the Thesis default background colors with a background image. She has also attempted to add a background image to the

Rounded Tabs in the Navigation Menu

Difficulty Level -

Filed Under Topics - , , , ,

Listed Under Lesson Subjects -

A member has added rounded corners to his top level navigation menu items using the border-radius property of CSS3.  Unfortunately it also is adding those rounded corners to his sub-menu items which doesn’t look right.  He wants to retain the rounded corner for the main menu items but remove them from the rest of the

How to Center the Thesis Navigation Menu

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

A member asked how she can center her Thesis Navigation Menu. We look at adding margins to the individual menu items to get them spaced correctly.  Next we look at 2 methods of centering the navigation menu.  The first is to explicitly set a left padding to simulate centering and the second is to set

How to customize the appearance of the navigation menu

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

A member asked about positioning the Thesis Navigation Menu and adding background images as backdrop in navigation bar. We discussed lessons available on the site and looked a various configurations for the Navigation Menu.  Included in the video is a discussion of: Resources available in BYOB Video Lessons for nav customization How to position your

Lesson 10 – Part 1 – Understanding the Structure of the Thesis Navigation Menu

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome to Lesson 10 of the Build Your Own E-Commerce Website tutorial series. The goal of this tutorial series is to show you how to create a fully functional ecommerce website using WordPress, Thesis and WP eStore. This is the fourth of the tutorials on styling your new ecommerce website. In these tutorials we’ll be

Lesson 10 – Part 2 – Configure Thesis Navigation Menu Design Options

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to part two of Lesson 10 of the Build Your Own E-Commerce Website tutorial series. In this lesson we are going to configure Thesis Design Options for the navigation menu. First, I want you to take a look at our example to see what we’re trying to accomplish. That is thesisestore.com, and this

Lesson 10 – Part 3 – Add Custom Styling to Menu Text

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to part three of Lesson 10 of the Build Your Own E-Commerce Website tutorial series. In this lesson we are going to style the text that is inside the navigation menu with custom styling. We’re going to start by using Firefox to identify what we’re looking at. I’m going to inspect the element.

Lesson 10 – Part 4 – Configure Size and Spacing of Menu Items

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to the fourth and final part of Lesson 10 of the Build Your Own E-Commerce Website tutorial series. In this part of the lesson we are going to configure the navigation tabs so that they are equal size, equally spaced, and sitting in the right spot. You can see generally what this is