Slight flickering when hovering off menu items

Home Forums Older releases 0.9.x Slight flickering when hovering off menu items

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #1356
    Shafiq
    Participant

    I’ve nearly finished developing a menu navigation done in Bootstrap using the Smartmenus.

    Everything seems to be working as it should – I just have this one issue in which when i’m hovering off menu items there seems to be a slight flicker of a white background behind the menus. You can get a better understanding if you visit
    http://shaws.tempsite.co.uk/

    Can anyone help?

    Thanks!

    #1678
    admin
    Keymaster

    Hi,

    You will need to tweak a bit your CSS code in “/wp-content/themes/blankslate/style.css” to consider the toggling of the “open” class when sub menus are shown/hidden.

    1) Replace the following rules:

    /* Colour the menu items */
    li.company-nav a:hover, li.company-nav:hover a, li.company-nav a:focus, li.company-nav a:active a { background-color:#555 !important; color:#FFF !important; }
    li.restoration-nav a:hover, li.restoration-nav:hover a, li.restoration-nav a:focus { background-color:#165E72 !important; color:#FFF !important; }
    li.new-build-nav a:hover, li.new-build-nav:hover a, li.new-build-nav a:focus { background-color:#808040 !important; color:#FFF !important; }
    li.singlelink.blog-nav a:hover, li.blog-nav a:focus { background-color:#555 !important; color:#FFF !important; }
    

    with these:

    /* Colour the menu items */
    li.company-nav.open a, li.company-nav a:hover, li.company-nav:hover a, li.company-nav a:focus, li.company-nav a:active a { background-color:#555 !important; color:#FFF !important; }
    li.restoration-nav.open a, li.restoration-nav a:hover, li.restoration-nav:hover a, li.restoration-nav a:focus { background-color:#165E72 !important; color:#FFF !important; }
    li.new-build-nav.open a, li.new-build-nav a:hover, li.new-build-nav:hover a, li.new-build-nav a:focus { background-color:#808040 !important; color:#FFF !important; }
    li.singlelink.blog-nav.open a, li.singlelink.blog-nav a:hover, li.blog-nav a:focus { background-color:#555 !important; color:#FFF !important; }
    

    2) Replace the following:

    .navbar-default .navbar-nav .open .company-subs li a { background-color: #555; color: #FFF;}
    .navbar-default .navbar-nav .open .company-subs li a:hover { background-color: #777; color: #FFF;}
    .navbar-default .navbar-nav .open .restoration-subs li a { background-color: #165E72; color: #FFF;}
    .navbar-default .navbar-nav .open .restoration-subs li a:hover { background-color: #5C8F9D; color: #FFF; }
    .navbar-default .navbar-nav .open .newbuild-subs li a { background-color: #808040; color: #FFF;}
    .navbar-default .navbar-nav .open .newbuild-subs li a:hover { background-color: #A6A67A; color: #FFF; }

    with the following:

    .navbar-default .navbar-nav .company-subs li a { background-color: #555; color: #FFF;}
    .navbar-default .navbar-nav .company-subs li a:hover { background-color: #777; color: #FFF;}
    .navbar-default .navbar-nav .restoration-subs li a { background-color: #165E72; color: #FFF;}
    .navbar-default .navbar-nav .restoration-subs li a:hover { background-color: #5C8F9D; color: #FFF; }
    .navbar-default .navbar-nav .newbuild-subs li a { background-color: #808040; color: #FFF;}
    .navbar-default .navbar-nav .newbuild-subs li a:hover { background-color: #A6A67A; color: #FFF; }

    That’s all.

    Cheers!

    #1679
    Shafiq
    Participant

    That’s great, sorted it. Thank you!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?