CSS border is applied to the nav sub menu but it's working on localhost but not working on the live WordPress site tangentconsulting.ca. Here is the code.
@media all and (min-width: 1025px) {
.tc-mega-menu li:nth-child(2) ul.sub-menu {
position: fixed!important;
z-index: 99;
display: flex;
flex-wrap: wrap;
align-items: normal;
justify-content: center;
width: 96.25vw!important;
left: 1.25vw!important;
top: unset;
padding: 8px 16px;
border-radius: 15px;
border-width: 1px!important;
border-color: black!important;
background: repeating-linear-gradient(
45deg,
#ffffff,
#ffffff 10px,
#fdfdfd 10px,
#fdfdfd 20px
);
}
.tc-mega-menu li:nth-child(2) ul.sub-menu li.menu-item {
box-sizing: border-box;
flex-basis: 16.6%;
padding: 8px 8px;
border: none;
border-bottom-width: 0!important;
/* border-right: 1px solid #aaaaaa!important; */
position: relative;
padding-left: .8em;
}
.tc-mega-menu li:nth-child(2) ul.sub-menu li.menu-item:nth-child(3n) {
border-right-width: 0!important;
}
.tc-mega-menu li:nth-child(2) ul.sub-menu li.menu-item a {
align-items: flex-start;
justify-content: flex-start;
}
.tc-mega-menu li:nth-child(2) ul.sub-menu li.menu-item a:before {
content: " ";
display: block;
border: solid .3em black;
border-radius: .3em;
margin-top: 6px;
margin-right: 6px;
position: static!important;
}
.tc-mega-menu li:nth-child(2) ul.sub-menu li.menu-item:hover a:before{
border-color: #D35C48;
}
}
@media all and (max-width: 1024px){
.tc-mega-menu nav {
width: 900%!important;
margin-top: 10px;
padding: 0 10px;
border: 1px solid black;
border-radius: 8px;
}
}
I tried to check from inspect and it's applied but I'm not able to see it on website. It should be like this. Local host showing the border
But after pushig the same code to the live, it looks like this. live site tangentconsulting.ca's nav submenu