Flickering Menu Links

Hey @marketinggreenpaint – there’s no URL for us to check, but my guess would be that the size of the element is off due to the custom CSS you’ve got added. I’m happy to have a look if you share the URL, but I can’t reproduce this on my own test site, which likely means that your custom CSS is causing the problem.

@jobthomas my website is not online yet, working on localhost. Will try send you the entire Custom CSS contents.
Thank you for the help.

@jobthomas Sent you an email through your job.blog page.
Hope you can help me. thank you.

Hey @marketinggreenpaint – I’m terribly sorry, but I’m not going to troubleshoot a long list of custom CSS (that’s what I presume it will be). If you single out the CSS that is targetting the menus, we can have a look at that.

Regarding the mail you sent; I only deal with emails sent through my website, that are about me/my website – I prefer not to mix my involvement on the forums here with my personal space on the web. Thanks for your understanding.

@jobthomas
No problem at all. Sorry if I should not have used the website, was just trying to contact with you easier.
So here is the CSS for the menus:

/* text size */
.menu-item a {
font-size: 16px !important;
}

.main-navigation ul {
padding: 0px 0px 0px 0px!important;
height: 215px !important;
}

/* vertical dropdown */
.main-navigation li {
height: 55px!important;
}

/* height/width menu */
.main-navigation ul.menu ul.sub-menu {
color: #023a16;
background-color: #F0F0F0;
max-height: 1000px;
width: 180px;
}

/* Padding */
.main-navigation a, .main-navigation a:visited {
padding-right: 40px !important;
}

.site-header {
padding-top: 20px !important;
}
#masthead.site-header {
padding-bottom: 0px !important;
}

#masthead {
padding: 0px;
}

/* Masthead / Gray horizontal rule */
#masthead.site-header {
height: 170px!important;
margin-bottom: 0px;
margin-top: 0px;
}

Thanks for that @marketinggreenpaint – I’ve tried adding that to my test site, but I don’t get flickering. It must be something else on your site, but there’s no way to figure out what it is without getting public access to it.

Does it disappear if you delete the custom CSS? If so, try to add it section per section and then you’ll be able to see what’s causing it.

For what it’s worth, it seems odd to me that you need to add .main-navigation a:visited – this should already be covered by just the .main-navigation a.

@jobthomas Thank you so much for the help, the only code that seems to fix it, is this one

.main-navigation ul li a:hover, .main-navigation ul li:hover > a, .site-title a:hover, .site-header ul.menu li.current-menu-item > a {
    color: #5cb525;
		height: 0px;
}

BECAUSE it removes the color.
But I NEED the color sadly for me, any ideas to fix this?

Again, @marketinggreenpaint why do you have height: 0px for your :hover. That means that whenever you’re hovering over these elements their height changes to 0px, which seems very odd to me. I wouldn’t be surprised if that brings you closer to the solution.

That said, I don’t think we can help you further with thus until it’s on a live site, so I’ll mark this as resolved soon unless there’s a public site to check.

@jobthomas Thanks for the help.

Removing the height did solve the problem.

Once again, I am very sorry having disturbed you through your website.

Hey @marketinggreenpaint – no problem at all. I’m happy we were able to find the problem. For what it’s worth, using height to hide something (I presume that’s what you were trying to do), is never a good idea with CSS. Always good to using properties like display: for that.

All the best with your site!

@jobthomas well, now that you say that, I was actualy using that to set the height for the HOVER “color change” on the sub menu.
Was I using that wrong?

Hey @marketinggreenpaint – height is only for the element that you’re targeting. Adding it after color doesn’t mean that you’re adding it to that color, but to

.main-navigation ul li a:hover, 
.main-navigation ul li:hover > a, 
.site-title a:hover, 
.site-header ul.menu li.current-menu-item > a

These are 4 elements in the HTML that would change once you hover over it (their height would change), but given that the height would go to 0 you wouldn’t be hovering over them anymore (they’re too small), and as a result they’d show up again, but then you’d be hovering again. The flashing would be a very logical consequence.

I’m really not sure what exactly you’re trying to do upon the hovering though.

• This reply was modified 5 years, 12 months ago by Job a11n.