CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Nicolas Pierre
Nicolas Pierre

Reputation: 1195

Bootstrap navbar brand left margin not overriding

I'm trying to override the left margin of the bootstrap class navbar-brand like so

.navbar .navbar-brand{
  margin-left: 15px;
  background: url("../img/logo.png") no-repeat;
}

Basic stuff right ? Well as I remember from my training is the class that is last in the list of classes, it's properties get set. Now in this case it just won't take my override in my main.css file. I've tried different selectors, different positions in the class list. I even tried different class names. As it is like always in CSS I'm probally missing something tiny small I can't seem to think of now or maybe it's something major I have never encountered before.

enter image description here enter image description here

Anyway can someone point me in the right direction here ? This has been driving me nuts for the past 2 days now. I'll attach my files below.

main.html & main.css

Upvotes: 1

Views: 10200

Answers (7)

Khaled Boussoffara
Khaled Boussoffara

Reputation: 1771

To use Bootstrap 5 correctly and avoid the addition of CSS classes, you can utilize Sass variables :

$navbar-brand-margin-end: 0 !default;
$navbar-brand-padding-y: 0 !default;
@import "../node_modules/bootstrap/scss/bootstrap";
@import '../node_modules/@fortawesome/fontawesome-free/css/all.min.css';

Upvotes: 0

Sanjit Singh Chouhan
Sanjit Singh Chouhan

Reputation: 61

Use !important.

.navbar .navbar-brand{
margin-left:10% !important;
}

Upvotes: 0

Benjamin Solum
Benjamin Solum

Reputation: 2321

The problem is likely related to CSS specificity. You have a more specific selector that's setting that element's margin. You can confirm this by setting margin-left: 15px!important;

If the margin-left take effect after that, it's a specificity issue, if not you know it's something else.

You can resolve specificity issues by making your selectors more specific or other selectors less specific (or you can cheat it by putting your styles inline via style attribute or using !important).

Edit: As you can see from your devtools screenshot, your class is definitely less specific than the one from Bootstrap. This should work:

@media (min-width:768px){
  .navbar > .container .navbar-brand,
  .navbar > .container-fluid .navbar-brand {
    margin-left: 15px;
  }
}

Upvotes: 2

Moid
Moid

Reputation: 1447

To specifically override a property copy the exact classes applied from the developer tools.. In your case which would be .navbar>.container .navbar-brand .navbar>.container-fluid .navbar-brand. So basically it will be

@media (min-width:768px){
.navbar>.container .navbar-brand .navbar>.container-fluid .navbar-brand{
      margin-left: 15px;
   }
}

Another way is simply using !important after the property which you want to overwrite everything irrespective of media queries. This is not recommended unless you are sure.

Upvotes: 1

vtforester
vtforester

Reputation: 683

.navbar .navbar-brand {
    margin-left: 15px;
}

is less specific than 

@media (min-width: 768px)
.navbar > .container-fluid .navbar-brand {
    margin-left: -15px;
}

try

@media (min-width: 768px) 
.navbar > .container-fluid .navbar-brand {
    margin-left: 15px;
}

Upvotes: 1

Jos
Jos

Reputation: 2013

Your override is not evaluated because there is a more specific css rule in bootstrap.css. You can try to make your css selector bit more specific.

Eg:

nav.navbar>container-fluid .navbar-brand{
  margin-left: 15px;
  background: url("../img/logo.png") no-repeat;
}

Upvotes: 1

Münich
Münich

Reputation: 343

Try something like this:

.navar div.container-fluid div.navbar-header a {
      margin-left: 15px;
      background: url("../img/logo.png") no-repeat;
}

Let me know if it helped

Upvotes: 1

Related Questions