CSS Styling is applied to the submenu border on live website but why it is not working

26 Views Asked by At

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

0

There are 0 best solutions below