Nav border CSS now broken in Chrome


Author Message
john

Posted: 10/28/2016
Quote message 

Recently only in chrome 54.x or higher all the themes I created with a nav/child navigation border are broken but only in Chrome. Still work in FF & IE. I narrowed it down to this CSS but can't figure out what to change to make it work correctly in chrome.

You can see example at this url: http://www.echoultrasonics.com/

.desktop ul.art-hmenu>li.ext:hover>ul:before {
top: -1px;
clip: rect(2px, auto, auto, auto);
border-top-left-radius: 0;
border-top-right-radius: 0;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.8);
}

Here is an image: http://highwaters.net/files/css.jpg

Thoughts?

Thanks.
 
Justin Feral-McWhirter

Posted: 10/31/2016
Quote message 

I used the following code, alone, to fix this issue....


/* Fix for navigation in Chrome 54 - JFM */

.chrome54 ul.art-hmenu>li>ul:before {
top: 0;
}


I'm unclear if this creates any problems with the older version of Chrome54, as I believe I already had Chrome54 and it's just the newest version that's having an issue with this code.

I used the .chrome54 instead of .desktop to avoid creating any issues in other browsers. It is possible, though, that the update to chrome 54 was also done to older versions.

If anyone is using a version of Chrome older than... 54.0.2840.71 m, please reply to this thread and let us know if the fix works in that version too. You can see it on my site, http://www.JustinsWebDesign.com

Here is the CSS of the element that we're editing with this code...


.desktop ul.art-hmenu>li>ul:before
{
top: 10px;
right: 30px;
bottom: 30px;
left: 30px;
}

 
Joe

Posted: 11/1/2016
Quote message 

My gosh - having the same problem! I thought it was just me!

Where do I put that code?
 
John

Posted: 11/1/2016
Quote message 

Thanks Justin, that fix worked for my site navigation with chrome 54. Need to find a way to test it on other versions of chrome.
http://www.echoultrasonics.com/

Joe,
You add that code to the style.css or stylesheet for your theme. Hopefully you are using a child theme or have a way to add custom css to your theme.

/* Fix for navigation in Chrome 54 - JFM */
.chrome54 ul.art-hmenu>li>ul:before {
top: 0;
}

 
John

Posted: 11/7/2016
Quote message 

I added another line to this fix from Justin which helped the nav border work a little better on chrome.
I added border-top: none; to the class below.


.chrome54 ul.art-hmenu>li>ul:before {
top: 0;
border-top: none;
}

John

 
Gary

Posted: 12/12/2016
Quote message 

Hi I am having a similar problem, but your code didn't work for me. When you hover on any drop down menu it appears fine for a few seconds and then a gap appears between the main nav bar and the sub menu item? Do you have any ideas what might cause this? I thought it might be a js problem because it work fine until the page loads completely You can see the problem here - http://millsphotography.com.au/sunshinecoastphotographer/

Any help wold be much appreciated :-)
 
Schleiss Johann Anton

Posted: 3/13/2018
Quote message 

Stylesheet fehlt -
Was nun


 
Schleiss Johann Anton

Posted: 3/13/2018
Quote message 

Stylesheet fehlt -
Was nun