Son of Suckerfish dropdown menu breaks when #header is modified in CSS

cb-rcw
February 17, 2011 at 10:41 pm #504

Hello Syahir Hakim:

Thank you so much for your hard work and extra effort to make Graphene a success. I have created a working child theme, and when I modify the #header variable in style.css from height:198px to height:100 to fit a smaller image, the drop down menu breaks (cannot select sub-menu items). Suggestions would be appreciated.

Also, I would like to change the blue border around the slider and widget items to another color. I’ve failed to locate instructions on how this is done.

Thank you in advance!

Das Capitolin
February 21, 2011 at 10:28 pm #12712

It would be great if someone would kindly respond to this issue. I have to imagine that not everyone wants their header to be 198px tall.
jmek66
February 21, 2011 at 11:33 pm #12713
I did the same thing (change my header from 198 to 100) and the menu works fine. How and where did you change your header height? The method might be the problem.

I did it with the following CSS in the Graphene Display > Custom CSS box. I had to change a number of CSS classes; it would be easy to miss one. Here’s what I used:
```
#header{

background-color:#000;

background-repeat:no-repeat;

height:100px;

width:900px;

position:relative;



-moz-box-shadow:0 2px 5px #555;

-webkit-box-shadow:0 2px 5px #555;

box-shadow:0 2px 5px #555;

}

#header h1{

position:relative;

top:20px;

left:18px;

width:852px;

font:bold 28px "Trebuchet MS";

}

#header h1 a, #header h1 a:visited{

text-decoration:none;

}

#header h2{

color:#000;

border-bottom:none;

position:relative;

top:20px;

width:852px;

left:18px;

}

#header_img_link{

text-decoration:none;

width:900px;

height:100px;

display:block;

position:absolute;

}
```
Das Capitolin
February 22, 2011 at 2:20 am #12714

Thank you jmek66!!! I was changing only the one #header style, and not the many others.

Now if only I could figure out how to change the menu/slider color from blue to silver.

jmek66
February 22, 2011 at 3:13 am #12715

My menu bar is silver out of the box, although the slider border is blue. Firebug and Web Developer for Firefox are great ways to figure things out. If you’re not familiar with them, including a URL would help others to help you.

Das Capitolin
February 22, 2011 at 5:54 am #12716

My website is http://www.gunwarrior.com/

It’s got the blue widget header/slider frame/view full post box, and I’d like to make it silver (or some other color). I’m not sure if these are controlled by CSS, or elsewhere like the sprites.

Admin

Syahir Hakim
February 22, 2011 at 8:47 am #12717

Beginning with 1.1.4 those are all defined in CSS, using CSS3 codes. See this post for modification: https://forum.graphene-theme.com/topic/help-with-changing-colors

Though as jmek66 suggested, do use the Firebug plugin for Firefox. It makes life a whole lot easier when doing modifications like these.