what can i do to make my webpage inherity my css

Question

So when the default color for my Nav items is black. Now i'm trying to use my css to change the color to white but it isn't working. bothe the nav brand and the nav links could it be the scripts on the page affecting it? if not how do i change the default bootstrap css settings

.navbar{
    padding: 20px 0px;
    box-shadow: none;
    background-color: transparent;
}
.navbar-brand{
    font-size: 28px;
    font-weight: 700;
    color:  #3a3a3a;
}
.navbar .navbar-expand-md .navbar-nav .nav-link{
    position: relative;
    font-size: 16px;
    font-weight: 300;
    color:  #ffffff;
    padding: 0px 30px 0px;
    transition: all .5s ease-in-out;
}

.navbar-nav .nav-item .nav-link::before {
    content: '';
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 0px;
    height: 2px;
    background:  #ffffff;
    transition: all .5s ease-in-out;
}

.navbar-nav .nav-item .nav-link:hover::before,
.navbar-nav .nav-item .nav-link.active::before {
    width: 40px;
}

<nav class="navbar navbar-expand-md navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#page-top">Otikes Fitness</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#page-top">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#About">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Features">Features</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#Contact">Contact</a>
                    </li>
                </ul>

            </div>

        </div>
    </nav>

Carol Skelly · Answer 1 · 2021-01-06T19:22:58.100

The problem is with the CSS selector. Instead of .navbar .navbar-expand-md .navbar-nav .nav-link it should be .navbar.navbar-expand-md .navbar-nav .nav-link because .navbar-expand-md isn't a child of .navbar, it's the same element.

.navbar.navbar-expand-md .navbar-nav .nav-link {
    position: relative;
    font-size: 16px;
    font-weight: 300;
    color: #ffffff;
    padding: 0px 30px 0px;
    transition: all .5s ease-in-out;
}

what can i do to make my webpage inherity my css

1 Answers1