My app requires Bootstrap. Hoping to override the default Bootstrap style, I am loading Bootstrap first followed by my custom CSS. Still end result differs. What am I missing? Here is an MWE.
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>Home</li>
<li>
<span class="sub-arrow">+</span>About
<ul id="sm-14772210106692266-2" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-1" aria-expanded="false">
<li>Introduction to SmartMenus jQuery</li>
<li>Themes</li>
<li>The author</li>
<li>
<span class="sub-arrow">+</span>The company
<ul id="sm-14772210106692266-4" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-3" aria-expanded="false">
<li>About Vadikom</li>
<li>Projects</li>
<li>Services</li>
<li>Privacy policy</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Sub test
<ul id="sm-14772210106692266-6" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-5" aria-expanded="false">
<li>Dummy item</li>
<li>Dummy item</li>
<li>Disabled menu item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-8" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-7" aria-expanded="false">
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-10" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-9" aria-expanded="false">
<li>Dummy item</li>
<li>A 'current' class item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-12" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-11" aria-expanded="false">
<li>subMenusMinWidth</li>
<li>10em</li>
<li>forced.</li>
</ul>
</li>
<li>Dummy item</li>
<li>Dummy item</li>
</ul>
</li>
<li>Dummy item</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Mega menu
<ul class="mega-menu" id="sm-14772210106692266-14" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-13" aria-expanded="false">
<li>
<!-- The mega drop down contents -->
<div style="width:400px;max-width:100%;">
<div style="padding:5px 24px;">
<p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
<p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
If I don't load Bootstrap by deleting line #24, the result looks like Figure 1 (expected) where as the actual view is figure 2 (with Bootstrap loaded)
Figure 1
Figure 2
In other words, I wan't the extra padding surrounding the menu bar on all sides. However, the menubar contains no padding either on top or both the sides.
.navbar-fixed-top sets (position:fixed;left:0;top:0;right:0) to your element. so delete this class from your nav tag
add rules to #navbar id or .navbar class to add the padding rules you want to extend the css from Bootstrap in your demo.css file.
If you want to overwrite the bootstrap css property or any other just give "!important"
html, body {
background:#fbf3e8 !important;
}
body {
margin:0 !important;
padding:2em 5px !important;
}
Related
I created a navbar, the navbar items collapse on small devices and can be seen through pressing a button that shows the items as a sidenav, the issue i'm having is that I'm not able to click any of the links, it shows the sidenav but everything is disabled, I'm going to show the snippet to explain this better.
<!-- This is a free template created by the github user NeutronBlast, please don't erase this -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!-- Navbar -->
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper teal">
<!-- Your logo here! -->
<a href="#" class="brand-logo ml-nav-4 mt-2">L
</a>
<!-- Trigger button for collapsible menu on phone view -->
<a href="#" data-target="menu-responsive" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>ABOUT US</li>
<li>FEATURES</li>
<li>SERVICES</li>
<li>PROJECTS</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
<!-- Menu that will be shown on small devices -->
<ul class="sidenav" id="menu-responsive">
<li>ABOUT US</li>
<li>LINK</li>
<li>SERVICES</li>
<li>PROJECTS</li>
<li>TESTIMONIALS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
</div>
<!-- Compiled and minified JavaScript -->
<script type="application/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
M.AutoInit();
});
</script>
</body>
</html>
Note: I realized that removing the div with the class navbar-fixed solves the problem of the sidenav being disabled but I need the navbar to be fixed on desktop, so simply removing that it's not enough of a solution for me.
You'll want to keep the sidenav markup outside of the navbar markup...
<!-- Navbar -->
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper teal">
<!-- Your logo here! -->
L
<!-- Trigger button for collapsible menu on phone view -->
<a href="#" data-target="menu-responsive" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>ABOUT US</li>
<li>FEATURES</li>
..
</ul>
</div>
</nav>
</div>
<!-- Menu that will be shown on small devices -->
<ul class="sidenav" id="menu-responsive">
<li>ABOUT US</li>
<li>LINK</li>
...
</ul>
https://codeply.com/p/IsB0HvAEJy
The image is getting covered by the menu even when I add the CSS code to give it a space. Then I just have a blue space above my menu but no image. I get a flash like it is loading it and then covering it.
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1</li>
<li>Planets 1-2</li>
<li>Moons 1-3</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
CSS bit
body {
padding-top: 90px;
background-color: #aabbcc;
}
edit
I just added some more code in case the error is there.
<!DOCTYPE html>
<html>
<head>
<title>Journey To The Stars</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<?php include 'menu.php'; ?>
<div class="container">
Found my own answer!
Adblock Plus was blocking the picture. Now I need to learn why...
Edit:
Now I know why. It blocks "728x90". I added that to the name because my research showed it was the most common header picture size. Must be the most common ad size as well.
The problem is even after adding the padding: 90px; to the body, the header will be rendered after it, so you achieved nothing unless you use absolute positioning for example, try the snippet below:
body {
padding-top: 90px;
background-color: #aabbcc;
}
header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 90px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<header class="masthead">
<div class="container">
<img src="media/Journey_To_The_Stars728x90.png" class="img-circle" alt="Journey To The Stars!" width="728" height="90">
</div>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php">Home</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Systems <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Stars 1-1
</li>
<li>Planets 1-2
</li>
<li>Moons 1-3
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</nav>
My app requires Bootstrap. Hoping to override the default Bootstrap style, I am loading Bootstrap first followed by my custom CSS. Still end result differs. What am I missing? Here is an MWE.
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>Home</li>
<li>
<span class="sub-arrow">+</span>About
<ul id="sm-14772210106692266-2" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-1" aria-expanded="false">
<li>Introduction to SmartMenus jQuery</li>
<li>Themes</li>
<li>The author</li>
<li>
<span class="sub-arrow">+</span>The company
<ul id="sm-14772210106692266-4" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-3" aria-expanded="false">
<li>About Vadikom</li>
<li>Projects</li>
<li>Services</li>
<li>Privacy policy</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Sub test
<ul id="sm-14772210106692266-6" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-5" aria-expanded="false">
<li>Dummy item</li>
<li>Dummy item</li>
<li>Disabled menu item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-8" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-7" aria-expanded="false">
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-10" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-9" aria-expanded="false">
<li>Dummy item</li>
<li>A 'current' class item</li>
<li>Dummy item</li>
<li>
<span class="sub-arrow">+</span>more...
<ul id="sm-14772210106692266-12" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-11" aria-expanded="false">
<li>subMenusMinWidth</li>
<li>10em</li>
<li>forced.</li>
</ul>
</li>
<li>Dummy item</li>
<li>Dummy item</li>
</ul>
</li>
<li>Dummy item</li>
</ul>
</li>
</ul>
</li>
<li>
<span class="sub-arrow">+</span>Mega menu
<ul class="mega-menu" id="sm-14772210106692266-14" role="group" aria-hidden="true" aria-labelledby="sm-14772210106692266-13" aria-expanded="false">
<li>
<!-- The mega drop down contents -->
<div style="width:400px;max-width:100%;">
<div style="padding:5px 24px;">
<p>This is a mega drop down test. Just set the "mega-menu" class to the parent UL element to inform the SmartMenus script. It can contain <strong>any HTML</strong>.</p>
<p>Just style the contents as you like (you may need to reset some SmartMenus inherited styles - e.g. for lists, links, etc.)</p>
</div>
</div>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
If I don't load Bootstrap by deleting line #24, the result looks like Figure 1 (expected) where as the actual view is figure 2 (with Bootstrap loaded)
Figure 1
Figure 2
In other words, I wan't the extra padding surrounding the menu bar on all sides. However, the menubar contains no padding either on top or both the sides.
A few things to consider.
Make sure the CSS selector matches the rule you want to override in the bootstrap file exactly. So if div > a > span don't go div > span
Make sure the bootstrap file isn't using the keyword !important
Add a type="text/css" to the bootstrap link
lastly, see if it works if you put the keyword !important
I'm creating a sb admin 2 like page where it has 2 navigations that looks like this:
And what I've done so far is this:
As you can see, the side navigation extends at the top bar. My code so far is this:
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="navbar-fixed">
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>User Profile</li>
<li>Settings</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container">
Point of Sale
<ul class="right hide-on-med-and-down">
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</div>
<ul id="slide-out" class="side-nav fixed">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
(function($){
$(function(){
$('.button-collapse').sideNav();
}); // end of document ready
})(jQuery); // end of jQuery name space
</script>
</body>
</html>
What I am trying to achieve is this:
Is this possible?
As the Side Nav documentations says:
You have to offset your content by the width of the side menu.
so do like this
<style type="text/css">
.wrapper {
padding-left: 300px;
}
</style>
and wrap your code in wrapper div
<div class="wrapper">
<div class="">
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>User Profile</li>
<li>Settings</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container">
Point of Sale
<ul class="right hide-on-med-and-down">
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</div>
</div>
<ul id="slide-out" class="side-nav fixed">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
here is my fix to avoid over lap with the top navbar, and to hide on small to med screens
add:
<ul class="sidenav sidenav-fixed invesible-top" id="mobile-nav">
also optional to make it show on top again on small screens:
<li class="hide-on-large-only">
style:
#media only screen and (min-width : 992px) {
.invesible-top {
top: 65px;
}
}
You should try:
<style type="text/css">
.side-nav{
top: 65px;
width: 250px;
}
</style>
and wrap your code in header and aside:
<header>
<div class="navbar-fixed">
<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
<li>User Profile</li>
<li>Settings</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
<div class="nav-wrapper">
<nav class="light-blue lighten-1" role="navigation">
<div class="nav-wrapper container">
Point of Sale
<ul class="right hide-on-med-and-down">
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Profile<i class="material-icons right">arrow_drop_down</i></a></li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<aside>
<ul id="slide-out" class="side-nav fixed">
<li>First Sidebar Link</li>
<li>Second Sidebar Link</li>
</ul>
</aside>
Sometime I ran into some problem when Nav was overflowing beyond the width of its wrapper (in my case, header tag) so I use this instead of what MaterializeCSS recommends:
Note: In sass though.
header, main, footer {
margin-left: 300px;
nav {
left: 300px;
right: 0;
width: auto;
}
#media only screen and (max-width : 992px) {
margin-left: 0;
nav {
left: 0;
right: 0;
width: auto;
}
}
}
MaterializeCSS recomends his own modification for this:
header, main, footer {
padding-left: 300px;
}
#media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
Reference here.
<link href="css/SideMenuBar.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/bootstrap.js"></script>
<!-- Optional theme -->
<div class="nav-side-menu">
<div class="menu-list">
<ul id="menu-content" class="menu-content collapse out">
<li>
<a href="#">
<i class="fa fa-dashboard fa-lg"></i> Dashboard
</a>
</li>
<li data-toggle="collapse" data-target="#service" class="collapsed">
<i class="fa fa-globe fa-lg"></i> Services <span class="arrow"></span>
</li>
<ul class="sub-menu collapse" id="service">
<li>New Service 1</li>
<li>New Service 2</li>
<li>New Service 3</li>
</ul>
</ul>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
As per the code given, drop down menu in side bar when we click on services to have more option it appears but when we click again to close it doesn't close.