/    Sign up×
Community /Pin to ProfileBookmark

Bootstrap – NavBar doesn’t change styling via CSS Page

Hi all,

I’m attempting my first bootstrap page and I’m following a YouTube tutorial but for some reason my navbar doesn’t allow me to style certain things. The background color for one. As you can see by my HTML code below I am trying .navbar{style} but that wont work. if I use .nav{style} then it works. I should add that 3/4 of the way through this tutorial I read the comments and found that this is actually Bootstrap 3, not 4. Could this be my issue?

HTML:

[code]<nav class=”navbar navbar-default navbar-fixed-top” role=”navigation”>
<div class=”container-fluid”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#navbar-collapse-main”>
<span class=”sr-only”>
Toggle Navigation
</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
</div>
<div class=”collapse navbar-collapse” id=”navbar-collapse-main”>
<ul class=”nav navbar-nav navbar-right”>
<li><a class=”active” href=”#”>Home</a></li>
<li><a href=”#”>My Build</a></li>
<li><a href=”#”>Gallery</a></li>
<li><a href=”#”>Supplies</a></li>

</ul>
</div>
</div>
</nav>[/code]

CSS:

[code].navbar{
background-color: #0094ff;
padding: 1% 0;
font-size: 1.2em;
}
.navbar-brand{
min-height: 55px;
padding: 0 15px 5px;
}
.navbar-default .navbar-nav li a{
color: white;
}
.navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:active {
color: grey;
}
[/code]

Sorry if the coding isn’t pasted in correctly I couldn’t find any buttons to input the code!

Rob

*tags added*

to post a comment

6 Comments(s)

Copy linkTweet thisAlerts:
@rootJun 14.2018 — [[2],[2,52]]
Copy linkTweet thisAlerts:
@rootJun 14.2018 — Please USE the markdown or ForumBB code tags to wrap your code blocks in... Much easier on the eyes and helps people help you.
Copy linkTweet thisAlerts:
@RobHowdleauthorJun 15.2018 — @root#1592971 Sorry I couldn't find the button that did that haha

Thanks
Copy linkTweet thisAlerts:
@rootJun 15.2018 — YOU don't have a button, YOU type them...

[CODE]

Your code block in here...

[/CODE]

so you get something like

function testme(a,b){
return a - b;
}


which is much easier to read.
Copy linkTweet thisAlerts:
@SempervivumJun 15.2018 — You can force overwriting the styles of bootstrap by adding !important:
.navbar{
background-color: #0094ff !important;
padding: 1% 0 !important;
font-size: 1.2em !important;
}
and so on.
Copy linkTweet thisAlerts:
@RobHowdleauthorJun 17.2018 — @Sempervivum#1592994 Worked like a charm thank you!
×

Success!

Help @RobHowdle spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...