Support Forum - Tag: transparent megamenu

Support Forum - Tag: transparent megamenu - Recent Posts http://www.kriesi.at/support/tags/transparent-megamenu Support Forum - Tag: transparent megamenu - Recent Posts en-US Sat, 25 May 2013 01:03:23 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php ansonkemp on "Megamenu re-skin" http://www.kriesi.at/support/topic/megamenu-re-skin#post-81886 Fri, 02 Nov 2012 01:01:42 +0000 ansonkemp 81886@http://www.kriesi.at/support/ 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. <pre><code>.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; }</code></pre> Nick on "Megamenu re-skin" http://www.kriesi.at/support/topic/megamenu-re-skin#post-81709 Wed, 31 Oct 2012 14:51:00 +0000 Nick 81709@http://www.kriesi.at/support/ Hi, This is what styles the child nav dropdown menus <pre><code>#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; }</code></pre> 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 ( <a href="http://getfirebug.com/css" rel="nofollow">http://getfirebug.com/css</a> ) and Google Chrome developer tools ( <a href="https://developers.google.com/chrome-developer-tools/docs/overview" rel="nofollow">https://developers.google.com/chrome-developer-tools/docs/overview</a> ) 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 – <a href="http://vimeo.com/20917974" rel="nofollow">http://vimeo.com/20917974</a> 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 ansonkemp on "Megamenu re-skin" http://www.kriesi.at/support/topic/megamenu-re-skin#post-81511 Tue, 30 Oct 2012 07:06:30 +0000 ansonkemp 81511@http://www.kriesi.at/support/ 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?