CODEWITHSUNDEEP
csstwitter-bootstrap
Anon
Anon

Reputation: 865

Bootstrap modal and drop down menu not working in the same nav bar, how do I override CSS?

So here's the code I'm using to create a NAV bar. 

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
    <div class="container">
        <ul class="nav pull-right">
            <li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a></li>
            <li class="dropdown all-camera-dropdown">  
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">  
            My Account  
               <b class="caret"></b>  
           </a>  
    <ul class="dropdown-menu">  
            <li ><a data-toggle="tab" href="#">List item</a></li>    
        <li ><a data-toggle="tab" href="#">Another item</a></li>
     </ul>  
</li>
</div>
</div>
</div>

I added the modal funcationality to my NAV bar first, here's my trigger for the modal window.

$('#myModal').on('hide',function(){
    $('.nav > li > a.modal-open-li').removeClass('modal-open-li');
});

I then added the drop-down menu. However my modal isn't working now. Are they in the same CSS namespace? How do I override this?

Here are the scripts files that I am using:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="js/formsAction.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="bootstrap-modal.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>

Here's the CSS files I'm using

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.responsive.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">

If I comment the following two scripts my modal starts working but my drop-down menu stops working.

<link href="static/css/bootstrap.min.css" rel="stylesheet"> 
<script src="static/js/bootstrap.min.js"></script>

Upvotes: 0

Views: 3145

Answers (1)

Girish Thimmegowda
Girish Thimmegowda

Reputation: 2169

CSS

1) Use either bootstrap.css or bootstrap.min.css but not both.

2) If you want override styles from bootstrap, create a style file and add it after the bootstrap.css

ie,

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.responsive.css" rel="stylesheet">
<!--Your custom css file-->
<link href="css/custom.css" rel="stylesheet">

Now in your custom.css file give !important to the styles you're overriding.

JAVASCRIPT

1) Use either bootstrap.js or bootstrap.min.js but not both.

2) bootstrap.js or bootstrap.min.js will contain all the javascript functionality. no need to add the modal.js, dropdown.js, datepicker.js again, so remove it.

Upvotes: 1

Related Questions