Skip to content Skip to navigation

Overriding Open Framework Styles: Customizing your Main Menu

In this series of posts, I'm going to share some tricks to quickly override some of Open Framework's default styling, such as the main menu, text, and link styles. For anyone who wants a quick way to get to a custom design on Stanford Sites, these posts should get you started on the right path. In this first post we'll cover how to customize the main menu.

First, I'll just review some basics before we get started. If you are familiar with CSS Injector and Open Framework, you can skip down to the section, "Overriding Open Framework Styles."

What is Open Framework?

Open Framework is the base theme provided on Stanford Sites hosting environment for Drupal 7. It is a "plain vanilla" theme which lets you more easily create a custom design. Open Framework is the base theme used in Stanford's family of Drupal themes, which you can check out at http://drupalthemes.stanford.edu. Learn more about Open Framework and how to get started using the theme on the Open Framework website, and in particular the Open Framework User Guide.

How are we going to override Open Framework styles?

We are going to use a module called CSS Injector to add our own CSS code to our Drupal site through the admin UI. CSS Injector lets us create multiple "rules" that can apply to our whole site, or specific pages or sections of the site (based on path). The fundamental way CSS Injector works is by override. This important concept  is key in understanding how to theme your Drupal site (either through CSS Injector or through subtheme). Through a process of targetting specific elements on the page, and adding specificity in our CSS code, we can override the base theme's styles and replace them with our own.

How do I set up a CSS Injector rule?

To set up a CSS Injector rule, log in as an admin to your site, and navigate to CSS Injector under Configuration > Development > CSS Injector. (If you don't see this module here, then you might need to enable CSS Injector from your Modules page first.) Click "Create a new rule" and name it something descriptive of the styles you want to put there (e.g. "General Styles" or "Main Navigation"). You can then choose to have your rule applied to the whole site (that is the default setting), or enter a path to make the rule apply to a certain page or section of your site. In order to save your rule, you must place some CSS code in the rule, so I usually just place a comment in to get started:

/* General Styles */

Overriding Open Framework Styles

OK, now that we've gotten set up and oriented, we can start working on overriding Open Framework's styles, because, let's face it. Everyone wants their site to be a little unique. So, we're going to do that with custom typography, colors, and treatments.

Overriding the Main Menu

The main menu is one of those dead giveaways that you are using a Bootstrap site, so let's first take a look at how to strip some of the "Bootstrappy" style from the navbar.

Here's what your main menu should look like by default:

OFW main menu by default

Some of the things we're going to want to change are the main navbar container styles (removing the background image, border, and shadows) and the active and hover states for our menu items. So, in order to figure out how to change these things, we'll use a tool like Firebug or Chrome Dev Tools to inspect each element on the page. Let's start with the overall navbar container first. When I inspect this element, here's what I see:

Inspecting the navbar element

From this inspection, we can see there is a CSS class, "navbar-inner" that we will want to target to override the main menu container styles.

In your CSS Injector rule, here's the code you'll need to strip the Bootstrap styles from this navbar-inner element:

/* Main Menu Overrides */

.navbar-inner {
    background-color: transparent;
    background-image: none;
    border: medium none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0;
}

Our main menu should now look like this:

Main menu without navbar-inner styles

Note that you'll need to be careful to include the vendor prefixes for CSS3 properties like box-shadow, text-shadow, etc. If you're not sure whether to include a vendor prefix, do a quick Google search on the CSS property, or consider using a site like PrefixMyCSS.com

OK, next we want to inspect the active and hover states for our menu items. Using the inspector, hover over the active state item, in my case, the Home item in the menu. Here's what I see in Firebug:

Targeting the active state

This one is a little more complicated, as there are two lines of CSS I will need to override, this one that defines styles for the active state menu item:

.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus

and this one that defines default styles for all menu items:

.navbar .nav > li > a

Upon further inspection of the hover state for the other menu item ("Resources"), we discover that there is another additional line of CSS we will need to target those items that are not in the active state:

.navbar .nav > li > a:focus, .navbar .nav > li > a:hover

Since I will want my hover state to match my active state, I will just combine this last line with the first one I found when defining my CSS rule. If you want your active state to look different than the general hover state, then keep these two separate.

The things we'll want to override on these menu items are the background color, the text shadow, the color of the text, and perhaps the padding as well. Here's what our full CSS Injector rule should now look like to override the navbar-inner container and the menu items (scroll to see all code):

/* Main Menu Overrides */

.navbar-inner {
    background-color: transparent;
    background-image: none;
    border: medium none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding: 0;
}

/* Overriding active and hover states for menu items */
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus,
.navbar .nav > li > a:focus, .navbar .nav > li > a:hover {
    background-color: #333;
    color: #FFF;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* Overriding default menu item styles */
.navbar .nav > li > a {
     padding: .5em 1em;
     -webkit-text-shadow: none;
     -moz-text-shadow: none;
     text-shadow: none;
}

Here's what our main menu now looks like:

main menu with active and hover states defined

If you want to take your main menu styles further, just edit or add to the CSS properties we've defined above. Here are some things you could consider changing:

  • Colors (background color of navbar, background colors for active/hover/default menu items states, font color)
  • Typography (you might want a custom font for your menu items, or adjust the font sizes)
  • Spacing and padding (you might want more or less padding around your menu items, or add margin in between the items to create space)
  • Rounded corners (you might want a softer edge on your menu items and consider adding rounded corners to your menu items)

What's Next

In the next post, we'll cover ways to override the default typography of your site, from headings to paragraphs to link styles.

Categories: 

Comments

I was having problems formating the menu on my site. This was very helpful. Thanks!

hello i have big problem how to create menus ...i need 3 type of menus example:- Home page navigation menu and middle page navigation menu and footer for navigation menus ...

how can i configure my 3 blocks like https://openframework.stanford.edu
responsive, easy to use, Building on Bootstrap
ant their background colours?

thanks...

Hi Onur,

Place three blocks in the 3-column-flow region.

Use Block Class module to add the "well" class to each block. This will give the background color.

We also use the "column" class (in addition to well) to get the equal height effect on the blocks.