i have tried multiple solutions to my problem but i guess the unique structure of my project designs , require unique solution to fit the video in a box and keeping it responsive.
here is the snapshot of what i want to achieve:
mock up image
now this is the link of my code :
http://new.loversorlosers.com see the black box where i want to put responsive video.
so far i have tried different examples available on SO and other tutorial websites, but none are working . my guess is this is happening because of unique position of video embed.
currently i am trying this jQuery approach but even this is not working on different screen sizes: StackOverflow example position of element over background
i am using bootstrap 3 & bootswatch framework.
thanks for your help
I found this youtube video that will walk you thru the steps. Create a folder, download bootstrap, extract the files in your new folder paste in the following code https://www.youtube.com/watch?v=oAPdNKTrBYA
<!DOCTYPE html>
<html lang="en">
<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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
h1 {
color: red;
}
h2 {
color: black;
}
h3 {
color: red;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-6">
<div class="navbar-wrapper">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div><!-- end of navbar wrapper -->
<div class="container">
<div class="col-md-5">
<div class="panel panel-primary">
<div class="panel-heading">
<p class="panel-title">Responsive video Embed 16by9</p>
</div><!-- end of panel heading -->
<div class="panel-body">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/-dfnKTY_dfc" allowfullscreen></iframe>
</div>
</div><!-- end of panel body -->
</div><!-- panel closes out here -->
</div>
</div><!-- container -->
</div>
<div class="col-md-6">
<h1> Attention All<br>Lovers..</h1>
<h2>Join Todd Bridges</h2>
<h3>For Lovers or Losers</h3>
<h2>the Game Show
And Receive a 3 Day, 2 Night stay
In the Entertainment Capital
of the World </h2>
<h2>The best part is it
Won't Cost you a dime!!! </h2>
<div class="btn btn-default"> Click Here Now Reserver Your Seat!!!</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Related
Here is the error now showing in browser console, anyone please explain what is this?this is a screenshot of html file
I'm building a web page using Bootstrap, I have added Bootstrap CSS and my CSS into "head" tag. Here is the code-
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>
first web page using bootstrap
</title>
<!-- Font awesome for brand name-->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<!--Our CSS-->
<link rel="stylesheet" href="CSS\style.css" >
</head>
Here is what I have added into my CSS-
.mybanner{
background-color: rgb(12, 8, 5);
text-align: center;
}
.mybg{
background-color: rgb(161, 86, 86);
}
.other{
width: 30px;
height: 30px;
}
Here is the whole code-
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>
first web page using bootstrap
</title>
<!-- Font awesome for brand name-->
<link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet">
<!--Our CSS-->
<link rel="stylesheet" href="CSS\style.css" >
</head>
<body>
<!-- Nav bar-->
<nav class="navbar navbar-light navbar-expand-lg mybg" style="background-color: #3be79f;">
<a class="navbar-brand" href="#" style="color: rgb(141, 7, 7); font-size: 25px; font-family: 'Permanent Marker', cursive;"> Stiffy </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Categories
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Beauty</a>
<a class="dropdown-item" href="#">Health</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Lifestyle</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Your Cart</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sign In</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<!--slideshow starts-->
<div class="fluid-container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../Image\unsplash.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>Photography</h3>
<p>It is always so much fun!</p>
</div>
</div>
<div class="carousel-item">
<img src="../Image\zombie-945622.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>Ghost</h3>
<p>Thank you, Mr. Demon</p>
</div>
</div>
<div class="carousel-item">
<img class="img-1" src="../Image\zombie-979358.jpg" alt="New York" style="width:100%; height: 60%;">
<div class="carousel-caption">
<h3> Oops.</h3>
<p>Ghosts are best.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!--slideshow ends-->
<!-- Banner starts-->
<div class="fluid-container">
<div class="row" class="mybanner" style= "background-color: #3be79f;
text-align: center;"
>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
24*7 Services
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
Cheaper in price
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
Deliver ASAP
</div>
</div>
</div>
<!-- Banner ends-->
<!-- other stuff-->
<div class="other">
<img src="../Image\bride.jpg">
</div>
<!-- JQuery,JS, BOOTSTRAP JS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I have added class properly, don't know why it's not working. Please help me.Thank you.
You are in the folder of html, you should use .. to go out of the folder and then tell to what folder to ender /CSS/ and then to select the file style.css
Use this:
<link rel="stylesheet" href="../CSS/style.css" />
Please swap this:
<link rel="stylesheet" href="CSS\style.css" >
To this:
<link rel="stylesheet" href="../CSS/style.css" >
EDIT: As #renaldo-balaj explains you're in a HTML folder so to access the CSS folder you would need to use ../ to hop up one level in your folder directory then go into CSS then grab styles.css
Also to add you used the wrong \
EDIT 29/11:
Ok I have removed the HTML not needed to show that this works properly.. You must be implementing the solution wrong. You have 2 answers that are correct and this post should be closed due to lack of context and over duplciation of 100 other posts around this relative path issues.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>
first web page using bootstrap
</title>
<!--Our CSS-->
<link rel="stylesheet" href="../CSS/style.css" >
</head>
<body>
</body>
</html>
body {
background-color: black;
}
Folder Structure:
Project
│
│
├───CSS
│ style.css
│
└───HTML
index.html
So here I will try explain further your issue.
\ backslashes are not used in filepaths, as per #birspider's answer which shows the HTML validator state that.
You have your index.html in a HTML folder which isn't normal for a static website so becuase of this unless your CSS file is in the same directory to that HTML file then you need to use the ../ to hop up out of the HTML folder, then /CSS to go into your CSS folder and then /style.css to grab the style.css file and serve it.
Again your DevTools console would of advised you of where it was trying to look and you should be able to debug from there.
Please close this post and accept a answer.
Image from my browser showing that background-color: black; worked from the style.css file: https://ibb.co/ys1Kvvt
your html markup is invalid:
try https://validator.nu/ and you will find (among others)
Error: Bad value CSS\style.css for attribute href on
element link: Backslash ("\") used as path segment delimiter.
At line 20
<link rel="stylesheet" href="CSS\style.css" >
---
Error: Bad value ../Image\unsplash.jpg for attribute src on
element img: Backslash ("\") used as path segment delimiter.
At line 84
<img src="../Image\unsplash.jpg" alt="Los Angeles" style="width:100%;">↩
---
Error: Duplicate attribute class.
At line 124
ass="row" class="mybanner" sty
I've got a nasty little problem I can't solve. I need to add an tall image to a bootstrap navbar (navbar-fixed-top, if possible). The image is in the navbar-brand. Let's say that the image is 350px high, and the navbar 60px. That causes the background of the navbar to fill the space to the bottom of the image.
I need that image to stick out of the navbar and to have to text under it flow around it. If I use an absolute position for the image, it will be where I want it, but it will lay on top of the text. That's not good. I need the text to float around it.
How do I solve this one?
Not sure if this is what you're looking for, or why you'd want to do this exactly, but this is my take on it:
I'd put the image in the body of the page, unless there's good reason to leave it in the header? This allows you to set properties for the surrounding text more effectively.
One note - the image you're using is a complete raster image, therefore, text won't wrap around the exterior of it like print layout will in an inline image in a magazine or newspaper for example. So if that's what you're looking for, you'd need to start with different image assets.
I chose to address this question as if you wanted the text to wrap around the image rectangle only.
Also, I abandoned your css, and commented out two calls in the body to js files I didn't have locally, so that could impact the outcome.
Final note - because this image overlaps the header, I'd recommend doing something like a "pull-right" on the navbar so it doesn't get overlapped by the logo image.
The following HTML should be all you need to see the results - I'm just grabbing jQuery and Bootstrap from CDNs, should work for you as well. Let me know if you have any questions on it.
<!DOCTYPE HTML>
<html>
<head>
<title>
</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<style>
.navbar-brand {
position: relative;
top: -130px;
left: -60px;
margin: 0 0 25px 0;
padding: 0;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container">
<div class="row">
<div class="col-xs-9 pull-right">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="navbar-brand" href="#"><img src="https://www.bitballoon.com//images/posts/grunt-logo.png"></a> -->
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">Default <span class="sr-only">(current)</span></li>
<li>Static top</li>
<li>Fixed top</li>
</ul>
</div>
<!--/.nav-collapse -->
</div><!-- col-xs-8 -->
</div><!-- row -->
</div>
<!--/.container-fluid -->
</nav>
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<a class="navbar-brand" href="#"><img src="https://www.bitballoon.com//images/posts/grunt-logo.png"></a>
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script>
window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- not sure what this is... removing ..................
<script src="js/docs.min.js"></script> -->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug
..... don't have this script, removing .................
<script src="js/ie10-viewport-bug-workaround.js"></script>
-->
</body>
</html>
The steps to replicate this problem are a bit cumbersome, but for those who care, please help me solve this mystery.
Try it with any of the bootstrap themes. For example http://getbootstrap.com/examples/navbar-fixed-top/
In the Google Chrome Inspector, toggle the device to view it in a mobile view. The nav-bar remains fixed to the top as it is scrolled. This is as expected.
However set some paragraph's css to be {white-space: "nowrap"}. The nav-bar no longer remains fixed but scrolls with the rest of the page.
It took me forever to identify this unsuspecting culprit. Does anybody know why this is happening?
p {
white-space: nowrap;/* this ruins the layout in the mobile browser */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Fixed Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="../../assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/navbar-fixed-top/navbar-fixed-top.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Fixed navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Default</li>
<li>Static top</li>
<li class="active">Fixed top <span class="sr-only">(current)</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<!-- Main component for a primary marketing message or call to action -->
<div class="jumbotron">
<h1>Navbar example</h1>
<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
<p>To see the difference between static and fixed top navbars, just scroll.</p>
<p>
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs »</a>
</p>
</div>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="../../dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Out of curiousity, why are you using white-space: nowrap; there in particular? But anyway, the reason is that because the navbar is position: fixed; it makes it 100% width of the space that is used to contain the text so it's expanding the body tag.
As to why it's not scrolling, it is quite strange because the fixed attribute is essentially getting ignored when you scroll down but is fine when scrolling up.
This CSS below fixed it, although it simply cuts of the text rather than letting it spill over.
.jumbotron {
overflow-x: hidden;
}
Here is some more information on the position attribute.
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.
I have tried numerous times to get Bootstrap to work, however even when I copy an example from Bootstrap's site, it still won't work properly as it does in the example. Here's the code I've uploaded to my server and yes, all the files are in the proper directory.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Starter Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="starter-template.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="js/ie8-responsive-file-warning.js"></script> <![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Your classes were not correct.
You will have to make sure that since you are using a fixed-top navigation, you will want to put top margin or padding on items directly below them....
Here is a fiddle
<nav class="navbar navbar-inverse nav navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<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="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse" id="#navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->