Build Your Own Business Website header image

Nav Menu Customization

How to Center the Nav Menu in Thesis 2.1

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

In this session we demonstrate how to center the nav menu in Thesis 2.1 by displaying it as an inline block and setting the page wrapper to text align center in Custom CSS. We also show how to undo this in media queries to take care of its responsiveness.Member: How would I center the entire…

How to Add a Background Navigation Image to the Nav Menu in Thesis 2

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

In this session we show how to add a background image to the Nav Menu in Thesis 2. The Nav Menu doesn’t have a way for us to add a background image other than by creating a new single element styles package. We show how to make the background transparent by using the menu package

How to Create a CSS-Tricks Style Navigation Menu Part 6 – Add the CSS Transition Animation

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

In this session we show how to add the CSS transition animation and discuss the way to use the transition properties. We define the property that we are positioning, provide the time involved in creating the transition, define the kind of transition effect and the amount of time before the transition starts. We also discuss

How to Create a CSS-Tricks Style Navigation Menu Part 5 – Style the Third Menu Item

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

In this session we show how to style the third menu item with the border style, link background style and color, hover and current background style and link, hover and current border style. And we discuss how each of these menu items affect the appearance of the site. So I’m going to do this one

How to Create a CSS-Tricks Style Navigation Menu Part 4 – Style the Second Menu Item

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we show how to style the second menu item. We set up the images and the colors and configure the link background style. We configure each link state separately and allow the current border style to be styled differently. Okay so the next thing to do is to kind of move along

How to Create a CSS-Tricks Style Navigation Menu Part 3 – Style the First Menu Item

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we show how to style the first menu item in our Thesis Nav Menu plugin options page. We customize the background image and color, link background style, hover background style and current background style. Okay so that’s that. Although very interestingly, the height here is very different because the height includes the

How to Create a CSS-Tricks Style Navigation Menu Part 2 – Setup Typical Menu Item Style

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

In this session we show how to setup the typical menu item styles in the BYOB Thesis Nav Menu plugin options. We create the background image for the menu in photoshop and finish by using our BYOB Full Width Backgrounds plugin to style the background of the menu. So now that we have that image

How to Create a CSS-Tricks Style Navigation Menu

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

This is a special kind of menu that is made up of an image sprite in which each individual menu element has its own image, its own background hover color and current style. We show you how to create this menu style using our BYOB Thesis Nav Menu plugin and custom code. To view the menu style we used as inspiration visit the CSS-Tricks website (http://css-tricks.com/.)

How to Modify the Width of the Submenu Items in the Thesis Navigation Menu

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

This member asks how to increase the length of the drop down submenu items in the Thesis Nav Menu. I demonstrate using Nav Menu settings in Thesis Design Options to make this modification. You have a site with the drop down menu where the width is too small, how can I modify the width of

How to Prevent the Thesis Navigation Menu from Being Covered by the Multimedia Box

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

This member asks how to prevent the dropdown elements of the Thesis Nav Menu from being covered up by the content in the Multimedia Box. In his situation a YouTube video covers up the drop down menu items. I demonstrate how to add the z-index property to the menu to insure that it stays on

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

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