• Resolved paulw80

    (@paulw80)


    I have 2 custom menu’s on a custom wordpress theme I am making, both are working fine and linking to the page, but when on the clicked page the navigation hover rollover is not working, the links and drop downs are fine, just the rollover animation…

    Does anyone have any ideas how to fix this?

    Page url:
    https://fior.org.uk/about-us/

    Cheers!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Which theme is this?

    Thread Starter paulw80

    (@paulw80)

    It’s a theme that im building from scratch.

    Cheers

    Thread Starter paulw80

    (@paulw80)

    Sorry, only seems to be happening in Safari…

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What CSS are you using for the rollover?

    Thread Starter paulw80

    (@paulw80)

    Code below, thanks

    [ Moderator note: please wrap code in backticks or use the code button. You forgot to close the backtick. ]

    #navwrap {
    float:left; height:30px; width:980px;
    	margin:22px 0 0 164px;
    	background-color:#a7bdcd;
    	font-size: 14px;font-family: 'Ubuntu', sans-serif;color:#FFF; font-weight:lighter;
    
    }
    
    ul.dropdown {
    list-style:none;
    float:left;
    width:100%;
    padding:7px 0px 0px 0px;
    margin:0px 0px 0px 0px;
    }
    
    ul.dropdown  li{
    float:right;
    position:relative; 
    
    }
    
    ul.dropdown a {
    padding:7px 7px 7px 7px;
    margin:0px 0px 0px 1px;
    color:#eee;
    background-color:#5e819a;
    text-decoration:none;	-o-transition:.5s;
      -ms-transition:.5s;
      -moz-transition:.5s;
      -webkit-transition:.5s;
      transition:.5s;
    }
    ul.dropdown #active a {
    	background-color:#113d5e;
    }
    
    ul.dropdown li a:hover {
    background:#113d5e;
    }
    
    ul.dropdown li ul a {
    display:block;border-top:solid 1px #FFFFFF;
    }
    
    ul.dropdown ul {
    list-style: none;
    margin:0;
    padding:0;
    width:200px;
    position:absolute;
    z-index:500; 
    
    }
    
    ul.dropdown li ul {
    top:23px;
    }
    
    ul.dropdown ul ul {
    top:0;
    left:100%;
    }
    
    ul.dropdown ul li {
    float:none;
    }
    
    ul.dropdown ul,
    ul.dropdown li:hover ul ul,
    ul.dropdown ul li:hover ul ul
    { display: none; }
    
    ul.dropdown li:hover ul,
    ul.dropdown ul li:hover ul ,
    ul.dropdown ul li ul li:hover ul
    { display: block;}
    
    ul.dropdown li * a:hover {
    background: #5e819a;
    }
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Which menu has the issue and which style in particular isn’t being applied?

    Thread Starter paulw80

    (@paulw80)

    Both menu’s are affected, when a link to another page for example: Security is clicked the css hover effect is not working – this only happens in safari though? weird…

    Thread Starter paulw80

    (@paulw80)

    Hi, its working now – ran the site through the W3C validator and it found a few errors that I have fixed. I had quite a few <!————Comments————–> which are invalid. changed to <!–Comments–> which seems to have sorted the problem!

    Thanks for taking the time-out to help me.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Links in child pages not highlighting on mouse over’ is closed to new replies.