Button Border Not showing in Mobile View

Hi there,

is the issue that the hover effect does not work?
If so, then it won't work on touch devices as they don't support hovering.

Let me know,

No not the hover effect. I had given a border for the button, its not showing in mobile version.

Hi Vishnu,

probably it's because you apply the css style to .main-nav (and mobile version doesn't work with that class).
Better you assign a CSS class for this menu item. WP-Dashboard > Design > Menu:
https://prnt.sc/BUTNk3z_R6Ql

Afterwards you style this certain class in your custom css.

So this is your current CSS:

@media (min-width: 769px) {
        .main-navigation .main-nav ul li.nav-button a {
            background-color: #0c0c0c;
            border: 2px solid #f2393f;
            color: #fff;
            line-height: 40px !important;
        }

        .main-navigation .main-nav ul li.nav-button a:hover {
            background-color: #000;
            border: 2px solid #ff4e00;
            color: #fff;
        }
    }

replace that with:

.main-navigation .main-nav ul li.nav-button a {
    background-color: #0c0c0c;
    border: 2px solid #f2393f;
    color: #fff;
    line-height: 40px !important;
}

.main-navigation .main-nav ul li.nav-button a:hover {
    background-color: #000;
    border: 2px solid #ff4e00;
    color: #fff;
}

@media(max-width: 768px) {
    .main-navigation .main-nav>ul {
        padding: 10px 10px 20px;
    }

    .main-navigation .main-nav ul li.nav-button a {
        text-align: center;
    }
}