CODEWITHSUNDEEP
csstwitter-bootstrap
cilop
cilop

Reputation: 85

Override Bootstrap css rules

I have a simple problem that is driving me insane. I want to override a CSS rule from bootstrap. By default, bootstrap assigns position: relative to elements with a class of navbar. I want my navbars to be position: absolute.

From my research on similar questions, I have tried:

In Bootstrap's file, all they have is (from what I can tell):

.navbar {
  position: relative;
}

So in mine, I have:

div .navbar.menu {
  position: absolute;
}

Makes no difference

It works if I:

Ill be glad to provide any more info if needed Any ideas will be appreciated !

EDIT:

My HTML snippet (for loading the css)

<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../styles/main.css">

The thing I am trying to target is here (its under body -> nav -> div):

<div class ="navbar menu">

I tried selecting it as body nav div .container.menu too

Upvotes: 1

Views: 1328

Answers (2)

Shawn Taylor
Shawn Taylor

Reputation: 15740

Unless I'm missing something, can't you just do:

.navbar{
position:absolute;
top:#px;
left:#px;
width:100%;
}

like here: http://www.bootply.com/pcyQsgEQVP

Upvotes: 1

vitro
vitro

Reputation: 939

By your css

 div .navbar.menu {
   position: absolute;
 }

the html structure would have to be

<div>
    <div class='navbar menu'>
    ....
    </div>
</div>

but if you have just this

<body>
    <div class='navbar menu'>
    ....
    </div>
</body>

your css has to be

 div.navbar.menu {
   position: absolute;
 }

Upvotes: 3

Related Questions