Megamenu re-skin « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Shoutbox

Megamenu re-skin

3 posts from 2 voices

Started 6 months ago by ansonkemp
Latest reply from ansonkemp
This topic is closed
This topic is resolved

Tags:

transparent megamenu

ansonkemp
Member

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?

Posted 6 months ago #

Nick
Moderator

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

Posted 6 months ago #

ansonkemp
Member

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;
}

Posted 6 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

Kriesi.at - Wordpress Themes and HTML Templates

Megamenu re-skin

Topic Closed

Support Forum usage - Please read

Check out some of our WordPress Themes

Blog Categories

Latest Themes

Pages

About me…