Circular Menu

Hamilton2186 · March 2015

I know its a different site Please .. What I am asking here is help .. how do i get about creating a menu like this in the below url

http://www.themonkeys.com.au/

The circular rings and different color hovers ..

Albert · March 2015

If you mean something similar to what we did on this screenshot http://pbrd.co/1H9WgmG then this can be done within "Transparent" header layout only. If you got this header style, then please send us url to your website and we'll see if on your side this will work as this kind of layout needs some css modifications.

Thanks!

Hamilton2186 · March 2015

Thanks very much for the reply ..

Here's the URL - http://jbkatelyn.com/newleaf/

Its just a slider and uses Transparent Header.

I would need the default circles to be colored #f4f4f4 and the rest as follows on Hover

About Us - Yellow
Eco - Green
Brand - Orange
Custom - Blue
Contact - Red

If we can accomplish this we gotta new client for both us and more business

Albert · March 2015

We'll give you example css of what you should do but for each color you must create own css in accordance to example below:

/* this code is responsible for removing border between menus items and should be used only once */
#Top_bar .menu > li > a span:not(.description) { border: 0; }

/* below code should be duplicated for each menu item if you want to use different colors */
#Top_bar .menu > li#menu-item-xxx { background: #000; border-radius: 100px; width: 110px; height: 110px; line-height: 110px; }

where xxx is menu item ID. To check menu item id's you can use Firebug for Firefox http://themes.muffingroup.com/betheme/documentation/#theme-customizations

Hamilton2186 · March 2015

Fine thanks a lot, what about the background changing color's on hover ? (black bg)

Albert · March 2015

Background color can be changed on hover within below css:

#Top_bar .menu > li:hover#menu-item-xxx { background: #FFF !important; }

Circular Menu

Comments