[Support request] Button Border Not showing in Mobile View

[Eduseat Intellect Pvt Ltd]

I added a nav-button to the primary menu and it’s having a hovering effect with border color. But it’s not working on the mobile version.

link: – dentalfry.com

[David]

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,

[Eduseat Intellect Pvt Ltd]

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

[Stefanie]

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.

[David]

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;
    }
}

[Author]

Posts