When using Andromeda in Firefox, I have no trouble; the nicemenu appears in front of the background header image and is easy to use. In Google chrome, however, on any page except the frontpage (or the frontpage too, if one doesn't have the slideshow installed) the menu appears below the background area - white on white. It's essentially impossible for users to navigate.

I tried changing the css in both the menu.css and layout.css files to force display of a black background for the nicemenu, without any luck. Thinking I might have missed some of the css, I also downloaded firebug and firefox to see if I was just missing the css, but didn't get any traction there either.

I am very new to programming and drupal, but have been working on this problem for awhile without success; because it's a production site, I'm afraid we have to switch to another theme so that workflow is uninterrupted. I have included a somewhat crude screen capture, however, made through MS Paint, that illustrates the problem; if you look closely, you can see the white on white just below the patterned header bar.

Update: After turning off css optimization and clearing the cache, I see that my attempts to force a black background display work. Now, however, the menu is appearing below the header in both Chrome and Firefox, with the -rather ugly- black background boxes I placed around them. Though this works, it's not very pretty, and really stands in contrast with the smooth lines of the theme.
I would prefer by far to simply have the menu be in front of the background header image; it looks nicer and works better that way. Is there any way I can change the placement of the nicemenu, or extend the size of the black background image, so that it fits appropriately?

Thank you for your assistance.
B Peterson

CommentFileSizeAuthor
screen capture andromeda issue.png165.34 KBB Peterson

Comments

akronsound’s picture

Status: Active » Closed (duplicate)

Hello Peterson :-)

I managed to find solution for your problems you need to go to your layout.css file and do the following:

Find this code:
.with-slogan #header .section{
height:120px;
}
#name-and-slogan{
margin-top:30px; <---- I changed this from 30 to 0
}

Play a bit with the margin:top number....for me I changed 30px to 0px and problem solved!

Let me know if that helps.

akronsound’s picture

Issue summary: View changes

Extra tinkering led to the same problem, just not as severe. Hence, the update.