Welcome! To use this support forum, please Login or Join Today!

   

Background on sub menu items

{name}
RankRank

Total Posts: 49

Joined 2012-01-06

PM

 

I have a problem where the color does not extend properly behind submenu items. I have a pic attached.

You can see whre the border is with the shadow but the items each are of different width.

Any help with the css to fix this would be appreciated.

Thanks,

Image Attachments

Capture.PNG

Click thumbnail to see full-size image

{name}
Rank

Total Posts: 10

Joined 2011-11-10

PM

 

Did you try re-installing the theme?  I have dropdown menus and it covers the whole width uniformly.

In order to help you troubleshoot:

What is the url of the site?

What version of WP?

Which browser are you using?  What version?

Does it happen in all browsers?

Did you try disabling all of your plugins?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Have you modified the theme in any way? Are you generating the menus from Appaearance → Menus or is it displaying the default menus? Can you provide a link to the page in question?

{name}
RankRank

Total Posts: 49

Joined 2012-01-06

PM

 

Sorry, I have not replied. I did do some modifications in a child theme. I have not had time to go disable the child theme and then check it. I will do that in a little bit and reply back with the result and the link if I still have the problem.

Thank You.

{name}
RankRank

Total Posts: 49

Joined 2012-01-06

PM

 

OK, I deactivated the child theme and I still have the problem. The URL is http://www.gasdetection.com/2012/

I have tested and confirmed the problem on Firefox 12, IE 9, and latest Chrome (they change version like every other day but I keep it updated)

I have left the child off so you can see it.

{name}
Rank

Total Posts: 10

Joined 2011-11-10

PM

 

OK, I’m no expert but I used Firebug to poke around and I think I found a temporary way to fix your sub menu width problem…

Find this in your css file:

#menu ul.sub-menu li a {
    
border-bottommedium none;
    
border-radius0 0 0 0;
    
height26px;
    
line-height26px;
    
min-width210px;
    
padding5px 0 5px 8px;
    
position: static; 


You see where the min width is set to 210px.  You need to change that to 350 to make your sub menu fit to the long titles in your menu.  The problem is this will change every sub menu to 350px which you don’t need that wide on the other drop down menus.

Here is where my basic css skills end… but I know you can isolate the specific drop down menu and just change the width of that only.  I think you create a class in css and then you can style however you want..

li id=“menu-item-128” is the menu you want to change so try this.  Just add this to your child theme css file.

#menu-item-128
min-width350px


Again I don’t know css that well but I just keep trying stuff till it works :)

Hopefully this will point you in the right direction.

Eric

{name}
RankRank

Total Posts: 49

Joined 2012-01-06

PM

 

I appreciate the help Eric. I found a workaround like you proposed but I kind of need the need the whole thing to work right, so when my client who knows no HTML or CSS adds a menu item in Wordpress it works. Hopefully Casey will have a full fix he pushes out in the theme soon. He has always been awesome about this stuff in the past.

This is my 4th project I bought one of his themes for as a result.

{name}
RankRank

Total Posts: 49

Joined 2012-01-06

PM

 

Well I put a fix in place for the blue area

#menu ul.sub-menu, #menu ul.sub-menu li {
  background: #0D83DD; }

And then I did the following for the Hovers:

#menu ul.sub-menu li a { min-width: 100%; }

{name}
Rank

Total Posts: 10

Joined 2011-11-10

PM

 

Cool… it looks pretty good now!

I learned something new from your post:

min-width: 100%;

I’ll have to remember the 100% trick!

Thanks!