Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Dec 29, 2012, 12:16 AM   #1
Brendon Bauer
macrumors 6502
 
Join Date: May 2007
Location: Good 'ol USofA
Opacity of a dropdown menu

Hello,

Been awhile since I've been here but I've got a little problem I can't solve. I've been modifying a new theme for a website (credit to Super Skeleton by Brandon Jones) but am having a problem where the dropdown menu is transparent and you can see the menu below it, making things unreadable.

To see my problem, you can go to this test page: (page no longer exists)

I added several menu items on the second row in order to make the problem more obvious. When you hover over a menu item in the top row, it is transparent (making it hard to read) and when you move your mouse down, the menu interferes with the one below it. Any ideas on how to fix this? I was thinking of maybe implementing some sort of z-index? As far as the transparency goes, at one point I changed all the options I could find to 1, but none of them seemed to have any affect (I have since changed them back to their original values).

CSS for the menu stuff is located at (sf-menu class): (page no longer exists)

Thanks for the help! You guys are awesome on here
Brendon
__________________
Retina Pro 15", iPhone 5

Last edited by Brendon Bauer; Aug 23, 2013 at 07:37 PM. Reason: Problem solved, pages moved to new location
Brendon Bauer is offline   0 Reply With Quote
Old Dec 29, 2012, 02:19 AM   #2
olup
macrumors regular
 
Join Date: Oct 2011
Try to set the z-index really high to something like 9999 and it should work

Code:
.sf-menu ul li {
        float:left;
        white-space:normal;
        width:100%;
        z-index:9999;
olup is offline   0 Reply With Quote
Old Dec 29, 2012, 03:18 AM   #3
Brendon Bauer
Thread Starter
macrumors 6502
 
Join Date: May 2007
Location: Good 'ol USofA
Tried applying a really high z-index but no luck :\
__________________
Retina Pro 15", iPhone 5
Brendon Bauer is offline   0 Reply With Quote
Old Dec 29, 2012, 11:11 PM   #4
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
In styles.css line 364 I found this upon introspection:

Code:
.sf-menu > li > a {
padding: 10px 10px 15px;
background: transparent;
margin-bottom: 0;
}
Comment out the "background: transparent" or change to "background: #fff" to see if that fixes things. Your site uses the Superfish menu system which adds inline styling in addition to using its own stylesheet, so if the above advice doesn't help I suggest considering not setting the menu block to use their styling and use your own, created from scratch following this tutorial: http://www.themebrain.com/guide/how-...superfish-menu
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Jan 5, 2013, 12:09 AM   #5
Brendon Bauer
Thread Starter
macrumors 6502
 
Join Date: May 2007
Location: Good 'ol USofA
Thanks guys. I tried all of the above but to no avail. I started to restyle it from scratch, but then I just started adding "z-index: 999;" to every single thing in the superfish.css style sheet to see if anything would work. Low and behold, this is what did it (for those that use this default style):

Code:
.sf-menu li li li {
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	color:#676767;
	outline:		0;
	z-index:		999;
}
__________________
Retina Pro 15", iPhone 5
Brendon Bauer is offline   0 Reply With Quote
Old Jan 5, 2013, 03:15 AM   #6
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by Brendon Bauer View Post
Thanks guys. I tried all of the above but to no avail.
Good to hear (adding the anchor states was the key), but I noticed now on your test page you also removed the second row of Superfish nav underneath the top level -- which affected the advice given, no doubt. Multiple Superfish instances on the same page sharing the same containers is a common issue and might have contributed as well, but all that matters is it's fixed. Great job and the page is coming along nicely.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Jan 6, 2013, 07:40 PM   #7
Brendon Bauer
Thread Starter
macrumors 6502
 
Join Date: May 2007
Location: Good 'ol USofA
I'm not sure if you mean the extra <li> elements I had originally? Before, I put more <li> elements on there so they wrapped to the second line (which is what may end up happening in the future, and is why I was trying to solve this problem now). You can still recreate the problem by resizing the browser window down slightly, causing the menu to wrap. So I didn't set up another instance of superfish menu that I know of But thanks for your help! I've always appreciated it in the past.
__________________
Retina Pro 15", iPhone 5
Brendon Bauer is offline   0 Reply With Quote
Old Jan 7, 2013, 02:09 AM   #8
olup
macrumors regular
 
Join Date: Oct 2011
You mean adding a second row of menu items like you had in the original?

If you do that, I'd switch the dropdown and the second menu.

I came across this article yesterday on z-index:http://coding.smashingmagazine.com/2...ehensive-look/

Important thing is to position the element you want the z-index on either absolute,fixed or relative, only then will the z-index be applied.
olup is offline   0 Reply With Quote
Old Jan 8, 2013, 03:58 PM   #9
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Quote:
Originally Posted by Brendon Bauer View Post
I'm not sure if you mean the extra <li> elements I had originally? Before, I put more <li> elements on there so they wrapped to the second line (which is what may end up happening in the future, and is why I was trying to solve this problem now). You can still recreate the problem by resizing the browser window down slightly, causing the menu to wrap. So I didn't set up another instance of superfish menu that I know of But thanks for your help! I've always appreciated it in the past.
Try setting static overall width and overflow: none for the menu container (i.e. "div.sf-menu" and/or whatever container which is a parent of that) might even try the same on div.sf-menu ul (menu width, take into consideration how many across in your math)
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Show calendar in clock dropdown menu cclloyd Mac Basics and Help 3 Jun 5, 2013 02:37 PM
News in Dropdown Menu SawyerTHEBEST iPhone and iPod touch Apps 3 Feb 28, 2013 02:58 PM
iDraw Opacity MacBook Pro"ish Mac Applications and Mac App Store 0 Nov 20, 2012 11:19 AM
Creating 'dropdown' Bookmarks? Big Stevie OS X 10.8 Mountain Lion 2 Sep 9, 2012 09:12 AM
Menu Bar Opacity bitsoda OS X 10.8 Mountain Lion 2 Jun 12, 2012 07:01 PM

Forum Jump

All times are GMT -5. The time now is 04:10 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC