5 lovely menus made in one afternoon with Menu Customizer (& 5 cups of tea)

You may know that in England we drink a LOT of tea. These menus were all created in one afternoon with our newest plugin Menu Customizer for WooThemes Canvas. The main thing I needed (other than Menu Customizer) was a tea break between each one to keep me going. So here they are… 5 menus powered by 5 cups of tea!

Each menu below has some of the options and settings I used to create them. We’d love to hear what you think in the comments below and also some sites with nice menus we can use for even more inspiration…

1. Charmed

Screenshot 2014-10-07 15.23.45

Align menu right
Site title font: Capriola, #ffffff
Menu items font: Open Sans
Menu item background color: #a0bcd6
Menu item rounded corners: 20px
Menu item hover color: #ffffff
Current page navigation font color: ##dd9933
Menu item hover text color: #dd9933
Sub-menu background color: #a0bcd6
Sub-menu border color: #ffffff
Sub-menu border width: 3px
Sub-menu item rounded corners: 10px
Call to action font color: #000000
Call to action font weight: 700
Call to action menu item background color: #000000

2. Pink Lady

Screenshot 2014-10-07 13.33.35

Center logo over navigation
Align Menu Items: middle
Full width header color: #dda4a4
Site title font: Great Vibes
Menu items font: Arabutus Slab
Menu item hover color: #ddd9d9
NavBar top and bottom border color: #ddd9d9
NavBar top and bottom border width: 3px
Font Awesome icons: fa-heart

3. Simple Jones

Screenshot 2014-10-07 14.31.14

Center logo over navigation
Align Menu Items: middle
Site title font: Oswald, #666666
NavBar border top: #666666, size 1
NavBar border bottom: #666666, size 1
Menu items font: Special Elite
Menu item hover text color: #84abaf
Current page navigation font color: #84abaf
Menu item padding top/bottom: 10
Menu item padding left/right: 25
Sub-menu font color: #84abaf
Sub-menu border color: #666666, size 1

4. LEGEND

Screenshot 2014-10-07 14.52.14

Align menu right
Site title font: Sorts Mill Goudy, #44403b
Menu items font: Open Sans
Menu item font color: #44403b
Menu item hover text color: #dd9933
Current page navigation font color: #dd9933
Sub-menu background color: rgba(255, 255, 255, 0.5)
Sub-menu border color: #dbdbdb
Sub-menu border width: 2px
Sub-menu item border bottom: 1p #dbdbdb
Sub-menu item hover border bottom: 1p #dbdbdb
Call to action font: Open Sans
Call to action font color: #000000
Call to action font weight: 700
Call to action border color: #dd9933
Call to action top border: 2px
Call to action top border: 2px
Call to action left/right border: 2px
Call to action rounded corners: 3

5. A Beautiful Mess

Screenshot 2014-10-07 13.58.44
Center logo over navigation
Align Menu Items: middle
Full width header color: #cde1df
Site title font: Pacifico
Menu items font: Open Sans
Menu item hover color: #eded17
Sub-menu background color: #44403b
Sub-menu border color (for arrow): #44403b
Sub-menu arrows: up arrrow, size 10


Comments

17 responses to “5 lovely menus made in one afternoon with Menu Customizer (& 5 cups of tea)”

  1. Nick – many thanks for taking time out to post these!

  2. No worries Darron! Cheers, N

  3. Thanks Nick for these examples, it helps me a lot to recreate them! If you have more examples, please keep them coming!

    1. Will do Wiepke. Any sites with menus you like just post them here!

  4. Jamie Marsland Avatar
    Jamie Marsland

    Hi Nick,

    How about a twitter menu tutorial?

    Jamie

  5. Just about to order this plus a truck load of Pootle goodies.

    Hey guys, how about a proper slider as Woo Slider sucks.

    Also, a project plugin as woo’s sucks too!

    1. Hey Ken, what’s wrong with WooSlider? We’ve got plans for Page Builder that will make it great for portfolios too (to be honest it is already great for this). Use the ideas board for suggestions: https://pootlepress.uservoice.com/forums/238444-canvas-extension-ideas

  6. I bought Menu Customizer as soon as you released it, it’s great.

    Thanks, for posting these menu examples, it shows me that MC can do even more than I expected.

    1. No worries Craig. Share any menus you love and we’ll do more!

  7. Hi,

    What about a menu with horizontal drop menu in multiple levels (all horizontal), can that also bee done?

    1. Hi Niclas, We have plans coming for this. Can’t do it at the mo with version 1 though…

  8. keith whalen Avatar
    keith whalen

    Great link, I love the options in the menu but I have raised an issue with how the background colour and how it works IE11.

    Check out http://mcddesign.co.uk/ on IE and then Chrome or Firefox.

    1. I think we have just fixed this in version 1.1 Keith. Rolling out today. If it’s doesn’t fix it in IE11 please contact support@pootlepress.com. Cheers! N

  9. Hi
    I love the menu customiser – it does make the site look more professionally done.

    I can’t seem to get the arrow working on the menu item. I’ve asked for Arrow on the submenu but nothing.
    Also my sub menu will not centre under the menu item – it shows only to the left. I’ve tried going back to default and starting again, but doesn’t help
    Thanks

    1. Hi Trina, you may not be seeing the arrow because of color. The down arrow takes the color from the menu item background color and the up arrow takes it from the drop down menu border. Email support@pootlepress.com if you still have issues. Your purchase comes with full email support. Thanks! N

  10. can i get the underline effect as on this Jamie Oliver restaurant site – been asked to do a restaurant site and they like this –

    http://www.fifteen.net/

Leave a Reply

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