Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #17426

    I have added png background transparencies to the topmenu bar ‘.main_menu’ and am trying to add them to the child menus ‘#top .main_menu .avia_mega’ , but I am having no luck. Can you help me style these child menus? Which css style do I add ‘background: transparent url(../images/grey.6opacity.png) center center no-repeat;’ to?

    #95429

    Hi,

    This is what styles the child nav dropdown menus

    #top .main_menu .avia_mega > li > ul, #top .main_menu .avia_mega > li > ul ul{
    position:absolute;
    display:none;
    width:212px;
    top:44px;
    left:-1px;
    padding:8px;
    }

    #top .main_menu .avia_mega > li:first-child > ul{
    left:0px;
    }

    #top .main_menu .avia_mega > li > ul a{
    width:170px;
    display:block;
    padding:2px 20px 2px 0;
    }

    #top .main_menu .avia_mega > li > ul li{
    padding:3px 0 3px 20px;
    }

    #top .main_menu .avia_mega > li > ul ul {
    left: 210px;
    top: -9px;
    }

    #top .main_menu .avia_mega > li:hover > ul ul, #top .main_menu .avia_mega > li> ul li:hover ul ul, #top .main_menu .avia_mega > li> ul ul li:hover ul ul , #top .main_menu .avia_mega > li> ul ul ul li:hover ul ul, #top .main_menu .avia_mega > li> ul ul ul ul li:hover ul ul {
    display:none;
    }

    #top .main_menu .avia_mega > li:hover > ul, #top .main_menu .avia_mega > li > ul li:hover ul, #top .main_menu .avia_mega > li > ul ul li:hover ul, #top .main_menu .avia_mega > li > ul ul ul li:hover ul, #top .main_menu .avia_mega > li > ul ul ul ul li:hover ul , #top .main_menu .avia_mega > li > ul ul ul ul ul li:hover ul{
    display:block;
    }

    #top .main_menu .avia_mega h1, #top .main_menu .avia_mega h2, #top .main_menu .avia_mega h3, #top .main_menu .avia_mega h4, #top .main_menu .avia_mega h5, #top .main_menu .avia_mega h6{
    font-size: 13px;
    text-transform: none;
    }

    I am not sure what you are trying to do since to me they look to be transparent already so I pasted it all for you.

    For making customization to your theme’s CSS, we recommend that you install and get to know Firebug ( http://getfirebug.com/css ) and Google Chrome developer tools ( https://developers.google.com/chrome-developer-tools/docs/overview ) browser add-on. Firebug is a free web development tool that integrates into Firefox and Chrome browsers and assists in monitoring, debugging and editing of any website’s CSS, HTML, DOM, and JavaScript files.

    Once installed, this easy to follow video will show you the basics of Firebug – http://vimeo.com/20917974 and get you on your way to customizing your theme like a real pro. It’s 5 minutes long, and by the end you will know how to style anything!

    Thanks,

    Nick

    #95430

    I have been using firebug. It works great to shed light on what css is styling particular objects. You can even edit the css rules on the fly. I have now styled the menu to my liking. BTW what are the statistics for browsers in use which don’t support transparent .png? I am using them exstensively in my re-skin.

    To make my megamenu transparent I used the following code which places a semitransparent .png in the background.

    .avia_mega_div, #top .main_menu .avia_mega > li > ul, #top .main_menu .avia_mega > li > ul ul{
    border:1px solid #444;
    background: url(../images/grey.8opacity.png) center center repeat transparent;;
    /*background: none repeat scroll 0 0 #222222;*/
    }
    .main_menu .avia_mega ul{
    background: url(../images/grey.6opacity.png) center center no-repeat;;
    color:#777;
    }

    #top .main_menu .avia_mega div ul a:hover{
    background: transparent;
    }

    #top .main_menu .avia_mega ul ul li, #top .main_menu .avia_mega >li >ul li{
    color:#777;
    background-color: transparent;
    background-image: url(../images/shared/arrow-right-light.png);
    background-position: 6px 13px;
    background-repeat: no-repeat;
    }

    #top .main_menu .avia_mega div ul li{
    background-position: 0px 10px;
    }

    .main_menu .dropdown_available{
    background: transparent url(../images/shared/arrow-down-light.png) center center no-repeat;
    }

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

The topic ‘Megamenu re-skin’ is closed to new replies.