CODEWITHSUNDEEP
htmlreactjsnavbarmaterialize
User56789087654356789
User56789087654356789

Reputation: 33

How to stop the materialize navbar tabs from underlining and changing color?

I am trying to make my materialize navbar links not turn the color of the navbar/underline when I hover over them. See the photos for example. I am using react. Any quick fixes?

this is how it should look:

enter image description here

but it looks like this:

enter image description here

enter image description here

Upvotes: 0

Views: 309

Answers (2)

DanielSmurts
DanielSmurts

Reputation: 641

try this just to be sure..it should override whatever conflicting css

.tabs .tab a:hover, .tabs .tab a.active {
        text-decoration: none !important;
        color: white !important;
    }

Upvotes: 0

Sean Doherty
Sean Doherty

Reputation: 2378

Pretty hard to help you without seeing the code. That is not normal behaviour of navbar tabs so something is conflicting. One fix could be to reinforce the hover/active class. This is the actual materializecss styles taken from the docs:

.tabs .tab a:hover, .tabs .tab a.active {
    background-color: transparent;
    color: #ee6e73;
}

It looks like the browser default anchor tag underline is being applied. So you could try:

.tabs .tab a:hover, .tabs .tab a.active {
        text-decoration: none;
        color: white;
    }

https://materializecss.com/navbar.html/#navbar-tabs

Upvotes: 1

Related Questions