My application depends on Bootstrap. I am trying to customize the default Bootstrap styles by loading Bootstrap first followed by my own custom CSS. However, the final appearance is not what I expected. What could be causing this issue? Below is a minimal working example.
demo.css
html, body {
background:#fbf3e8;
}
body {
margin:0;
padding:2em 5px;
}
@media (min-width: 640px) {
body {
padding:2em;
font-size:112.5%;
}
}
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>SmartMenus jQuery Website Menu - jQuery Plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- jQuery -->
<script type="text/javascript" src="../libs/jquery/jquery.js"></script>
<!-- SmartMenus jQuery plugin -->
<script type="text/javascript" src="../jquery.smartmenus.js"></script>
<!-- SmartMenus jQuery init -->
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- SmartMenus core CSS (required) -->
<link href="../css/sm-core-css.css" rel="stylesheet" type="text/css" />
<!-- "sm-blue" menu theme (optional, you can use your own CSS, too) -->
<link href="../css/sm-blue/sm-blue.css" rel="stylesheet" type="text/css" />
<!-- My custom CSS -->
<link href="../libs/demo-assets/demo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav id="main-nav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<ul id="main-menu" class="sm sm-blue" data-smartmenus-id="14772210106692266">
<li><a href="http://www.smartmenus.org/">Home</a></li>
<li>
<a href="http://www.smartmenus.org/about/" class="has-submenu" id="sm-14772210106692266-1" aria-haspopup="true" aria-controls="sm-14772210106692266-2" aria-expanded="false"><span class="sub-arrow">+</span>About</a>
<ul id="sm-14772210106692266-2" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-1" aria-expanded="false">
// More HTML code...
</ul>
</li>
// More menu items...
</ul>
</nav>
</body>
</html>
If I remove the line #24 loading Bootstrap, the result matches Figure 1 (expected). But when Bootstrap is included, the actual output differs as shown in Figure 2.
Figure 1
https://i.sstatic.net/Rj9u5.png
Figure 2
https://i.sstatic.net/BC6bQ.png
To clarify, my goal is to have additional padding around the menu bar on all sides, however, with Bootstrap loaded there seems to be no padding either at the top or on the sides of the menu bar.