Circular Menu

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 ..

Comments

  • 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!
  • 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 :)
  • 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
  • Fine thanks a lot, what about the background changing color's on hover ? (black bg)
  • Background color can be changed on hover within below css:
    #Top_bar .menu > li:hover#menu-item-xxx { background: #FFF !important; }
Sign In or Register to comment.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.