OptimizePress CSS Hacks: Designing A Beautifully Looking Navigation Header

Update: I’ve created a new tutorial showing how to create a header menu in OP 3.0.

If you’ve been using OptimizePress for awhile, then you probably agree with me that the navigation header doesn’t look that great, especially without any custom styling applied.

Fortunately, there’s a workaround for that. All you need is insert a few lines of CSS code and in no time, you’ll be able to design a stunningly looking header just like the big boys.

You say, “hey KM, I don’t know a single bit of CSS.” Well, that’s what I’m about to share with you here. But before I do, let’s first examine what would a perfect header look like. The easiest way to find out is by looking at the websites of some of the leading brands.

Let me give you a few really great examples…

 
Can you see the common patterns? Here are some of the important observations…

• Small logo: the width is not more than 200px and the height is not more than 50px
• Slim header: the entire header won’t take up too much space at the top of the site
• Tidy menu items: items are in line with the logo and spaced nicely with each other
• Uppercase texts: some, but not all of the menu items are set in fully capital letters
• CTA button (or text): there is some sort of call-to-action in one of the menu items

Here’s what the default OptimizePress alongside navigation looks like in a browser:

Let’s Beautify The OptimizePress Alongside Navigation

#1 Reduce The Header Height: To do this, all you need is modify the top and bottom padding of the header (default is 40px). In this example, I’m going to reduce it to 15px.

#2 Reduce The Logo Width: The default logo width is 250px but I want it to be 225px. Also, I want to add an extra 2px of padding to the top just to move the logo down a bit.

Tip: Your logo height should be less than 50px and the design should look uncluttered.

#3 Transform Menu Items To Uppercase: This step is optional. But if you want the menu items in uppercase letters, then throw in the following code. Just for showing purposes, I’d also like to increase the spacing between the menu characters by 1px.

#4 Increase Spacing Between Menu Items: You may increase the distance between the menu items by using the code below. The purpose is to let people skim through the items easily. Default padding is 1.2em 1.1em.

#5 Remove Hover Effect On Menu Items: Personally I’d prefer there’s no hover effect (grey background) when mouse over to the menu items. It looks so much cleaner to me.

/* For Main Menu */
body .container .navigation > ul > li:hover {
background-color: transparent;
}

/* For Sub-Menu */
body .container .navigation ul ul li:hover > a {
background-color: transparent;
}

However, you can change the hover link color if you want. Go to Colour Scheme Settings → Page Colour Settings → Navigation Bar Alongside Logo Colour Options → Navigation Hover Link Text. Feel free to change the color for your main Navigation Link Text as well.
 

Let’s add a call-to-action button to the header…

In your WordPress Dashboard, go to Appearance → Menus. Click Screen Options on your top right and check the CSS Classes option. Under Menu Structure, select a menu item, click Custom Link and enter a name into CSS Classes field. Then hit Save Menu.

 
#6 Create A CTA Button: Launch the LiveEditor of your page and insert the following code (Note that redbutton is the same name you’ve entered in the CSS Classes field).

You may change the background, border, border radius, or padding to suit your needs.

#7 Add Simple Transition Effect: You can add this line of code (in blue) into #3 just to make the transition goes smoothly when mouse over to the menu items and the button.

Here’s what the OptimizePress alongside navigation looks like after customization:

As you can see, the navigation header looks pretty slick (agree?) after applying all the 7 customization above. Of course you can take things even further, e.g. making the header sticky just like what I’ve done on some of my OptimizePress templates, adding font icons to the menu items (watch video below), or adding some fancy hover effect to the button.

Update: I’ve created a new tutorial showing how to create a header menu in OP 3.0.

There you have it! I believe I’ve covered most of the important customization that people want to make. I’ve personally tested the CSS code on a demo site. I really hope some of you’ll find the custom code here useful when designing your header with OptimizePress.

P.S. I’ve compiled the 7 CSS code into a TXT file. Click here to download if you want it.