Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie
Hi all,
Vanilla are planning an update to the site on April 24th (next Wednesday). It is a major PHP8 update which is expected to boost performance across the site. The site will be down from 7pm and it is expected to take about an hour to complete. We appreciate your patience during the update.
Thanks all.

Wordpress menu bar problem

Options
  • 06-08-2013 7:40pm
    #1
    north south east west
    Registered Users Posts: 128 ✭✭


    Hi

    I was wondering could someone help me. I have used a template online to create a wordpress website. Everything was going fine till I updated to the latest version of wordpress. Since then my menu bar doesnt function as it should.

    Basically the problem is that I have a list of child menu categories that should open on "hover", but then when I try to mouse-over them to click in, they disappear. I need them to stay put so I can mouse-over them.

    I have very little css experience and was wondering can anybody help me?
    I have attched the code that I think is relevant below
    /*-- ESSENTIAL STYLES --*/
.sf-menu, .sf-menu * {list-style:none;}
.sf-menu {line-height:1.0}
.sf-menu ul {position:absolute; top:-999em; width:170px;}
.sf-menu ul li {width:100%;}
.sf-menu li:hover {visibility:		inherit; /* fixes IE7 'sticky bug' */}
.sf-menu li {float:left;position:relative;}
.sf-menu a {display:block; position:	relative;}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {left:-15px; top:2.2em; /* match top ul list item height */z-index:9999}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {top:-999em;}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {left:10em; /* match ul width */top:0}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {top:-999em}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {left:10em; /* match ul width */top:	0}

/*----- SKIN -----*/


ul.sf-menu > li.top:first-child {margin-left:0}

.sub-menu a:hover{ }
.sub-menu{
   background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #EEEEEE;
    margin: 55px 0 0 0px;
    padding: 0 5px 5px 5px;
        width: 170px;

}
.sub-menu a:active { padding-top:0px; }

.sub-menu li{line-height:40px; height:40px; padding-bottom:8px}
.sub-menu li:first-child{padding-top:1px; position:relative;	}
.sub-menu li:last-child { border: 0 none !important; }
.sub-menu a{color:#7B7B7B; display:block; font-size:12px; text-transform:none; height:40px; line-height:40px;  padding:0px 10px !important; text-decoration:none}
.sub-menu a:hover {
color:#222 !important;
}
.sf-menu li li {height:30px; line-height:30px; border-bottom: 1px solid #F0F0F0;}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {outline:0}

#top-menu {float:left; margin-top:-5px; }
#top-menu ul {list-style:none;}
#top-menu li:first-child {margin-left:0px}
#top-menu a.active, #top-menu li.current-page-parent,  #top-menu li.current_menu_parent {  /*background:url('img/diagonals.png') repeat-x bottom;*/ margin-bottom:-3px}
#top-menu li.current-menu-item > a {
    color: #222222 !important; border-top:5px solid #FFF; padding-top:44px;
}

#top-menu ul li { display: inline; margin-left: 27px; }
#top-menu ul a {     color: #7B7B7B;
    float: left;
    font-size: 13px;
    font-weight: bold;
    padding-bottom: 7px;
    padding-top: 49px;
    text-decoration: none; }
    
#top-menu ul a:hover {     border-top: 5px solid #FFFFFF;
    color: #222222 !important;
    padding-top: 44px; }    
    
#top-menu ul ul a {     color: #7B7B7B;
    display: block;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px !important;
    text-decoration: none;
    text-transform: none;
    font-weight: normal;
    margin-top:4px;
    }
    
#top-menu ul ul li { margin-left: 0px; }

#top-menu ul ul a:hover {     border:0;
    color: #222222 !important;
    padding-top: 0px; }


Comments

  • Options
    #2
    uglybunz
    Registered Users Posts: 20 ✭uglybunz


    Looks like a Superfish menu. There's a menu property, delay (Javascript not CSS), that is normally set to 800-1000 (milliseconds) for regular Superfish menus. Maybe this is set incorrectly? Or maybe your menu is completely broken and it's degrading to pure CSS (no delay) - try turning off Javascript in your web browser and see if the menu's behaviour is the same? Anyhow, if you need to play with the CSS used for styling the menu, the trick is to set delay to a silly value like 1 minute (60000) or more, and then you can use tools like Firebug to play with the CSS, as the menus hang about for long enough.

    I'm not very familiar with Wordpress, but there should be somewhere that you can set the delay property in the controls, it might be called something like 'mouse delay'. There's also a Superfish plugin called HoverIntent that can contribute to such problems if it's being used. It's unlikely that CSS is causing your problem, it doesn't normally do delays!


  • Options
    #3
    north south east west
    Registered Users Posts: 128 ✭✭north south east west


    Thanks very much for the reply. Managed to figure out a work around by reducing the padding between each menu item.


  • Options
    #4
    uglybunz
    Registered Users Posts: 20 ✭uglybunz


    It sounds like you've implemented a CSS solution for the issue that 'delay' normally addresses - it allows you to move the mouse around the menu elements but delays them from closing, so the mouse can jump over any gaps in the menu display or the user can move the mouse erratically without the menu closing up. It sounds like you have eliminated the gaps?


  • Options
    #5
    north south east west
    Registered Users Posts: 128 ✭✭north south east west


    uglybunz wrote: »
    It sounds like you've implemented a CSS solution for the issue that 'delay' normally addresses - it allows you to move the mouse around the menu elements but delays them from closing, so the mouse can jump over any gaps in the menu display or the user can move the mouse erratically without the menu closing up. It sounds like you have eliminated the gaps?

    Yeah thats exactly what I did. Its not the most ideal solution but it works!!! Unfortunately I coudnt find anywhere in the css that might indicate a delay option. Think it might have been somewhere in the php of the theme im using but have never really done any php myself so was a bit lost.


Advertisement