How to Improve Menu Design

Community Forums Forums Design Tips and Tricks How to Improve Menu Design

This topic is: not resolved


This topic contains 5 replies, has 4 voices, and was last updated by  AC 2 years, 10 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #12911


    Hello!  Thanks in advance for any assistance Рmuch appreciated.

    If you check out the primary and secondary navigation menus at my site , you will see that they don’t have any “WOW” factor to them. ¬†Said another way they don’t really stand out and catch your attention because the background color (black) blends in with the rest of the site.

    How would you recommend I change the menus, to make them a bit more appealing to the eye?

    I am wondering if there is a way to upload a custom sleek looking menu, or even just change the background color to something other than black.

    Any insight is much appreciated.

    Take care and all the best,




    You can change the style rules in the style sheet, style.css. I recommend installing the Firebug add on for Firefox or using Chrome’s Firebug Lite which will enable you to right click on any element to inspect it and determine the associated style rules or the selectors required to create new style rules.

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography



    Thank you!



    If you want to go a little beyond just changing the color of menu, you can download the free navigation bars:

    Susan @ One Happy Studio I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts



    You’re welcome :)

    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography



    If you want to add different colors to each tab – you could do this also –

    Go to Menus – click “Screen Options” in the top right corner. Put a check mark in the CSS Classes.
    Then, open up one of the tabs and add a class name to each tab – for example Tab1, Tab2, etc., etc.

    Once you do that, then go to Appearance > Editor. Add the following code to the bottom of your style sheet … adding it for each Tab. Give each tab a different color or you can use a background image if you like.

    .tab1 {
    background-color: #cc9900;

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.