Revise Menu CSS

10 posts from 2 voices

• Started 1 year ago by JPDCSO
• Latest reply from Dude
• This topic is not a support question

Tags:

• CSS
• menus

1. 

   JPDCSO
   Member

   This is a simple solution, but it's eluding me. If you look at the drop down here: http://www.nashville-sheriff.net/ The sub-menu next to Chief Deputy disappears before I can mouse over the listings, presumably because it's clashing with the Media drop down next to it. I know it's probably a simple CSS fix, but I can't find it. Please help! Thanks.

   Posted 1 year ago #
2. 

   JPDCSO
   Member

   bump

   EDIT: This issue seems most prominent in IE, but it also shows up on occasion in Firefox as well.

   Posted 1 year ago #
3. 

   Dude
   Dude

   Hey,
   the problem is that the "Resource" menu tab has a short description compared to other menu items. So when the user navigate towards dropdown they leave the link element and the dropdown closes. You need adjust the link size. You can create a longer description for the resource tab or you can adjust the other tabs.

   Posted 1 year ago #
4. 

   JPDCSO
   Member

   This did not work for me. I expanded the descriptions on both "DCSO Media Center" AND "Resources," and I still have the same issue, only know, you can see the description text as it bleeds into the menu. So, I need to remove that conflict AND make the menus opaque so that description text isn't visible. Thanks.

   Posted 1 year ago #
5. 

   JPDCSO
   Member

   Only NOW, I mean, not "only know." Apologies for confusion. To clarify, after the changes, I have issues in IE and FF.

   Posted 1 year ago #
6. 

   Dude
   Dude

   It works fine for me now (IE9 + Firefox & Chrome) but I'll report it to Kriesi. Maybe he can improve the menu function by implementing hoverintent or something similiar.

   Posted 1 year ago #
7. 

   JPDCSO
   Member

   Okay, thanks for help. I'm having trouble accessing the "Chief Deputy" submenu. Could I just have the CSS needed so that the menu isn't transparent? At the very least, I"d like to hide the description text so it doesn't obscure the menu text.

   Posted 1 year ago #
8. 

   Dude
   Dude

   I'd push the menu down a bit (some pixels) by adjusting following code in style.css:
   

   #top .catnav ul {
   display:none;
   position:absolute;
   top:90px;
   width:172px;
   left:-10px;
   }

   Change it to:
   

   #top .catnav ul {
   display:none;
   position:absolute;
   top:97px;
   width:172px;
   left:-10px;
   }

   You can hide/delete the description by clearing the description text field for all main menu items.

   Posted 1 year ago #
9. 

   JPDCSO
   Member

   Thanks for help. The code changes the menu position in Firefox, but it appears to stay the same in IE. Worse, when I move it down, I can select the items on the "Divisions/Facilities" menu, but I can't even access the "Media Center" links before they disappear. Frustrating.

   Your hoverintent idea seems interesting.

   Posted 1 year ago #
10. 

    Dude
    Dude

    Please try to clear the cache of your IE browsers. The position of the dropdown is absolute so it should effect every browser in the same way...

    Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.