Style navbar li and ul

1

I’m trying to style a bootstrap navbar. I’ve changed the background and borders. But i’m having problems with font-colors and the best/right approach do style all items

I need to style li and a, when they are active, inactive and on hover

Should I create a new class and apply to li/a? Should I use the div id or the ul class?

I’ve tried lots of ways but didn’t succeed.

HTML:

 <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">SiteName</a>
                </div>
                <div class="collapse navbar-collapse" id="#myNavbar">
                    <ul class="nav navbar-nav">
                        
                        <li class="menu active"><a href="#">Home</a></li>
                        <li class="menu"><a href="#">Bio</a></li>
                        <li class="menu"><a href="#">Work</a></li>
                        
                        
                    </ul>
                </div>
                </div>
        </nav>
2

Nothing, still… Can someone help me?, what i’ve tried:

.navbar-default{
    background-color: #00802f;
    border: none;
    /* Only this part dont work:*/		
    color: #fedf00;
}
#myNavbar ul.nav li.menu a{
    color: #fedf00
}

Applied this class to li and a:
.menu-links{
    color: #fedf00;
}

nav a{...}

navbar-collapse a{...}

and others…

I also tried to create divs within and outside li, but i just messed up positioning

I need to change the color of the TEXT at these links (home, bio, work and sitename):

3 
.navbar { color: yourcolorhere }
4

I found targeting the correct ID/class/tag using bootstrap was hard to get the right path.

Use chrome developer tools to target the exact ID/class/tag path. It also shows what css rule is overwriting your rule.

You will need to learn to use dev tools to do this but there is heaps of videos on youtube to teach you.

Also for people to help you they usually need to see the entire code in a tool like Codepen or jsfiddle. This allows them to use dev tools to help target the issue for you.

Pete

1 Like