I've implemented a Floating Action Menu using JQuery and CSS:
HTML:
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<div id="hamburger" class="waves-effect waves-light">
<div id="wrapper">
<span class="icon-bar" id="one"></span>
<span class="icon-bar" id="two"></span>
<span class="icon-bar" id="thr"></span>
</div>
</div>
(...) // Rest of the HTML code
Javascript / JQuery:
$('#hamburger').click(function() {
$('#hamburger').toggleClass('show');
$('.hamburger-nav').toggleClass('show');
});
CSS:
(...) // CSS properties defined for different elements
This implementation was functioning well until I added Bootstrap CSS, causing issues.
<link rel="stylesheet" href="https://getbootstrap.com/dist/css/bootstrap.min.css" type="text/css">
You can see the buggy behavior when Bootstrap is included in this Fiddle. Is there a way to resolve conflicts between my code and Bootstrap while still utilizing Bootstrap's CSS?
Thank you for any assistance!
Screenshots of Working and Not Working States: https://i.sstatic.net/e82FS.png https://i.sstatic.net/1ETK6.png
UPDATE: Identifying the issue - bootstrap.css contains a conflicting class:
.show {
display: block !important;
}
This class was overriding my custom styles. Renaming my class resolved the conflict. For debugging in Chrome, inspecting elements reveals all affecting classes in the Styles tab.