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
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.
.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;
}
<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.
I have a metisMenu in my ASP.Net MVC app, what I am looking to do is hide some options based on the users AD Group membership.
The app is currently using windows integrated authentication (Intranet Application).
What is the best way to do this?
I am presuming I could do a viewbag option which then if true or flase either shows or hides, but that would mean I would have to code something for every action?
The menu is part of the shared layout which is below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CCL Support System</title>
<link rel="shortcut icon" type="image/png" href="~/img/favicon.png" />
#*CSS Declerations*#
<link href="~/Content/bootstrap.min.css" rel="stylesheet">
<link href="~/Content/plugins/metisMenu/metisMenu.min.css" rel="stylesheet">
<link href="~/Content/ccl.less" rel="stylesheet" type="text/css">
<link href="~/Content/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/themify-icons.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800' rel='stylesheet' type='text/css'>
#*JavaScript Declerations*#
<script src="~/Scripts/less.min.js" type="text/javascript"></script>
<script src="~/scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script src="~/scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="~/scripts/plugins/metisMenu/metisMenu.min.js" type="text/javascript"></script>
<script src="~/scripts/sb-admin-2.js" type="text/javascript"></script>
<script src="~/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="~/Scripts/expand.js" type="text/javascript"></script>
</head>
<body class="ccl-body">
<div id="wrapper">
<nav class="navbar navbar-default navbar-fixed-top ccl-header" role="navigation">
<div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown navbar-profile">
<a style="z-index: 1" href="#" class="dropdown-toggle navbar-profile-icon" data-toggle="dropdown"><span class="ti-settings menu-icon"></span><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Edit User Details</li>
</ul>
</li>
</ul>
</div>
<div class="logo-box">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="ccl-logo" href="#Url.Action("index", "Home" )"><img src="~/img/logo.png" width="75" height="73" alt="" /></a>
</div>
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<span class=" ti-info menu-icon"></span>Information<span class="ti-angle-right menu-carret pull-right"></span>
<ul class="nav nav-second-level">
<li>
About
</li>
<li>
Licenses
</li>
<li>
Bug Report
</li>
</ul>
</li>
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
</ul>
</div>
</div>
</nav>
<!-- Main Panel -->
<div id="page-wrapper" class="content">
#if (IsSectionDefined("title"))
{
<div id="page-block" class="page-block-header row">
<div class="col-lg-offset-1 col-lg-10">
#RenderSection("title", false)
</div>
</div>
}
#if (IsSectionDefined("subtitle"))
{
<div id="page-block" class="page-block-two row">
<div class="col-lg-offset-1 col-lg-10">
#RenderSection("subtitle", false)
</div>
</div>
}
#RenderBody()
</div>
</div>
<!-- Footer -->
<div class="navbar ccl-footer">
<div class="pull-right">
<p>© 2014 Computer Concepts Ltd</p>
</div>
</div>
</body>
</html>
If we look at the menu more closely (snippet below)
div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li>
<span class=" ti-info menu-icon"></span>Information<span class="ti-angle-right menu-carret pull-right"></span>
<ul class="nav nav-second-level">
<li>
About
</li>
<li>
Licenses
</li>
<li>
Bug Report
</li>
</ul>
</li>
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
</ul>
</div>
</div>
I am looking to hide certain options within this
What would be the best way, would I need to create a custom authentication class?? if so does anyone have any good links on how to do this?
So the end result would be if user is in XYZ AD Group then show
<li>
<span class=" ti-key menu-icon"></span>Reset Passsword
</li>
Otherwise hide it.
You can use MvcSiteMapProvider's security trimming feature to do this in a few steps.
Configure the AuthorizeAttribute on your action methods (which supports roles/users/AD/forms authentication).
Install MvcSiteMapProvider via NuGet.
Create an hierarchy of your site in the Mvc.sitemap XML file and/or using .NET attributes and/or using dynamic node providers.
Add the #Html.MvcSiteMap().Menu() HTML helper to your layout page (or create your own Menu HTML helper that has similar functionality if it doesn't suit your needs).
Customize the templates in the /Views/Shared/DisplayTemplates/ folder to conform to your page layout.
Documentation Wiki: https://github.com/maartenba/MvcSiteMapProvider/wiki
Blog with Downloadable Demos: http://www.shiningtreasures.com/?tag=/MvcSiteMapProvider
MvcSiteMapProvider Questions on SO: https://stackoverflow.com/questions/tagged/mvcsitemapprovider
Full Disclosure: I am a major project contributor of MvcSiteMapProvider.
If you don't want to add a 3rd party library, this will take a bit of work to do. You would have to create your own HTML helpers that respond to the authorize attribute (or something similar). You could cannibalize the AuthorizeAttributeAclModule to determine whether to show or hide your HTML helper nodes.