Breaking News
Home » Digital » The Internet » Coding and Customization » How To Style A Single Menu Item To Standout
How To Style A Single Menu Item To Standout

How To Style A Single Menu Item To Standout

Website design inspiration can come from anywhere, literally. I’ve been inspired by designs in magazines, commercials, books, and (of course) other websites. Sometimes I find them on my own, others are recommended by Branndon. And a combination of both helped me discover a fun design aspect to bring attention to our ‘getting started’ page.

Jump to Final Code

(Hippies' Note: If you enjoy reading our articles, you'll love our newsletter. Receive updates directly to your inbox. Subscribe now!)

Design Inspiration

Original Design Inspiration from Smart Passive Income

Branndon has been on a podcasting kick lately and one of his favorites is by Pat Flynn, at Smart Passive Income. He mentioned a few podcasts he listened to and what he learned. Many were things I already knew as I have been into the internet ‘marketing’ side longer than him. However, he caught my interest and I listened to a podcast.

Well, I tried to listen to a podcast. Truth is I wasn’t into it. At all.

Listening is not one of my favorite ways to learn. I’m much more of a visual person. Plus it limited me to the speed of the podcast. I preferred reading the transcription of the podcast made available (good idea in my opinion). The transcript was easier for me to take in the information more quickly. Instead of taking 40-45 minutes to listen to Pat I could browse the transcript and read what interested me in less than 15 minutes. No extra conversation or fluff. Time is important for me as I usually have to do this at night after Spirit goes to sleep.

After a few transcripts I read many of Pat’s articles and saw him talking about a ‘start here‘ page. I loved the idea and made one for us, adding a simple link to the upper navigation. I didn’t want to have a large banner (like Pat) as that is where our Featured Images and Sliders go.

Later I was browsing the blog over at Viper Chill, another great internet marketing resource, and I saw the similar idea of focusing on a ‘Start Here‘ page. This website only had a single link in the upper navigation, which we also had already. I was surprised we even had the same words, but I guess there are only a few ways to simplify that phrase.

What I noticed most was the color was different on that menu item. I wanted to do the same thing, but with our blue link color we already were using. (I’m thinking Viper Chill‘s clean layout and blues originally attracted me to the website. Then I stayed for great content.)

Tutorial: Step-By-Step

This quick tutorial will walk you through the CSS code we used to make this change happen. I use Firebug to make my web development easier. It allows me to inspect coding elements (in this case CSS) while on an active website, and it doesn’t have to be your own. Luckily it integrates with many of the more popular browsers, including Chrome and Firefox.

Before and After

Here’s a quick look at what our upper navigation menu looked like with the default styling. You can see in the screenshot below that the subtle gray looks clean and is less obtrusive, which we liked, but the ‘New? Start Here’ blends in too well.

Before - Style A Single Menu Item To Standout

And this is what our menu looks like now (as you can see ‘live’ at the top of this page).
After - Style A Single Menu Item To Standout

It’s a subtle change, but it does have a visual impact. Unfortunately it is still not as popular as the ‘About Us’ link, the ‘Start Here’ is tied for a distant second with the ‘FAQ’. I’m still watching our analytics to see if this changes after our relaunch campaign.


Final CSS Code Snippet

Here is the final CSS code you will need to mimic this look for your website. Simply copy the code below and paste it into your style sheet. It’s best to paste the code into the custom CSS section of your WordPress theme (assuming your theme has this). Otherwise you’ll want to paste it into your style.css file directly.

WordPress Users: You can access the style.css file in the Editor under Appearance. Tread lightly as this can cause errors with your site if you make mistakes, sometimes making you open the file in a FTP program to fix them. This is why it’s best to copy the entire style sheet code and paste it into a text document.

Remember to change the color hex code (in this code #37b8eb) to match your site’s design.


Once completed I was very happy with this look.

What do you think? Anyone planning on using this simple idea on their own site?

Subscribe to our mailing list

I'm interested in...

About Brianne

Born and raised in Orange County, California, I am definitely a "summer" girl at heart. Today I am a full-time mother to a rambunctious two-year old living in a RV. Together Branndon and I are learning how to become financial and location independent.


  1. That does make it stand out. I like that. Thanks for the advice.

  2. This is amazing.. :) This is what I was looking for. I tried the same on my website and its working.. As we both use same theme, it was not a problem at all. here is my site and the header menu worked just as yours.

    Thanks again!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

CommentLuv badge