Need help? Check out our Support site, then


restoring sunspot theme hover menu transparency

  1. robertlavigne808
    Member

    Hi I am using the Sunspot theme for my blog and as soon as I change any of the default colors the submenus become opaque, and lose the hover effect.

    Is it possible to restore the partial transparency and effects from the theme in the colors I have chosen?

    The blog I need help with is makasi-imports.com.

  2. robertlavigne808
    Member

    I have managed to restore the hover effects using this code

    .menu a:focus, .menu a:hover, .menu a:active {
        background: rgba(0, 0, 0, 0.4);
    }
    .menu li li a:focus, .menu li li a:hover, .menu li li a:active {
        background: rgba(0, 0, 0, 0.25);
    }

    however the submenu background is still opaque

  3. @robertlavigne808, I think congratulations are in order as I'm seeing hover color on the menus and submenu items on your site. If you are still having problems, perhaps give us a little more on what you want things to look like.

  4. robertlavigne808
    Member

    As I have I rather extensive sub menu section under the "showroom" tab, I would prefer not to have the submenus completely obstruct the view of the slideshow on the home page.

    I have a french language version of the same site with no upgrades. On this site when I changed the background color to white the background of the menus and submenus stayed the same as in the original theme. see french language version

    Basically I want light green see through sub menus on my english site, or even the original "sunglasses" look the menus had in the theme.

  5. robertlavigne808
    Member

    I have had partial success!

    this is the code am using

    .menu a:focus, .menu a:hover, .menu a:active {
    	background: rgba(0,0,0,0.4);
    }
    
    .menu li li a:focus, .menu li li a:hover, .menu li li a:active {
    	background: rgba(0,0,0,0.25);
    }
    
    .menu li ul {
    	background: rgba(140, 163, 65, 0.6)
    }

    The only thing I havent been able to figure out yet is how to make the "focus" and "active" buttons also appear partially transparent, but I can live with what I have so far.

  6. Try out the following two options and see what you think. The first will make the current submenu item (you are on that page) the darker green (with the translucent black overlay).

    .current-menu-item {
        background: rgba(0, 0, 0, 0.25);
    }

    The following will also set the parent/ancestor pages in the nav with the translucent black.

    .current-menu-item, .current_page_parent, .current_page_ancestor {
        background: rgba(0, 0, 0, 0.25);
    }
  7. robertlavigne808
    Member

    thank you very much I have achieved a look I am happy with and learned a few things at the same time.

Topic Closed

This topic has been closed to new replies.

About this Topic