I have a nice flow going on my site when you mouse over all the navigation areas, you will see a red text and red drop shadow, it is fluid throughout the site.
I noticed today on responsive view, the SKINS and TEMPLATE pages, the mouse over is falling below the border and looks bad. I would like for this to follow the same suit as the desktop site.
Since these are separating out into 5 individual boxes on mobile, I think this might have something to do with it.
I am not married to this mobile view on these tabs, so if it makes sense to change how they are displayed that I can do also.
I have messed with the margins on the drop shadow to no avail.
.gallery-menu-wrapper ul li {
border: 6px solid #333;
display: inline-block;
float: none;
margin: 6px 3px;
}
Web link
http://dagrafixdesigns.com/2019/industrial-darker/skins.html
Would prefer to try to keep it simple as maybe I am over looking a inset or - margin call, but also maybe a pseudo class call could work if all else fails?
Thank you
If you want the shadow of previous elements in the DOM to appear on top of the element after it on hover, add position: relative; z-index: 1; to .tp-navigations .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus