I am wanting to implement a navigation sidebar in MVC 5, but I couldn't find any built in classes in the Bootstrap 3that came with the project. I've tried with the following code:
_Layout.cshtml
<body>
//the sidebar code is here...
<div id="Wrapper">
<ul>
<li>hello</li>
<li>Project</li>
<li>Account settings</li>
</ul>
</div>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content" id="page-content-wrapper">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year/p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<link href="~/Content/Custom.css" rel="stylesheet" />
#RenderSection("scripts", required: false)
CSS
#Wrapper {
background-color: #3F51B5;
z-index:1;
height: 100%;
width:300px;
position:fixed;
}
#page-content-wrapper{
margin-left:300px;
}
So far, what I've done is that I put a margin-left: 300px to the page content and add a <div id="Wrapper"> to encapsulate the side navigation bar and have styling to it. The results I get is as below:
However, I found out these problems with this implementation:
If I put the side menu in the _Layout.cshtml means that every page will have that side menu . But I would like the side menu to appear only when a user logged in.
If I put the side menu in each individual View, this will cause the ugly white space at the left side of the page since every View is rendered in #RenderBody().
If I put the side menu in the _Layout.cshtml, how do I include the jQuery code to toggle and hide the side menu when a button is clicked?
Is there any better implementation of this?
To keep the solution simple I would create two layouts:
_Layout.cshtml
_LayoutNoSidebar.cshtml
To toogle sidebar, include this template in your _Layout.cshtml:
https://blackrockdigital.github.io/startbootstrap-simple-sidebar/
Related
Div above navbar is not in the top of body (Screenshot).
source:
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Bootstrap Affix Example</h1>
<h3>Fixed (sticky) navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
</div>
<div class="navbar navbar-inverse" style="background-color:#026;" data-spy="affix" data-offset-top="197">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("ՏԵՍԱԿՆԵՐ", "Index", "Home")</li>
<li>#Html.ActionLink("ՕԳՏԱԿԱՐ ՆՅՈՒԹԵՐ", "About", "Home")</li>
<li>#Html.ActionLink("ԿԼԻՆԻԿԱՆԵՐ", "Contact", "Home")</li>
<li>#Html.ActionLink("ԲԺԻՇԿՆԵՐ", "Contact", "Home")</li>
<li>#Html.ActionLink("ՆՈՐՈՒԹՅՈՒՆՆԵՐ", "Contact", "Home")</li>
<li>#Html.ActionLink("ԲԼՈԳ", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
.affix {
top: 0;[enter image description here][1]
width: 100%;
z-index: 9999 !important;
}
.affix + .container-fluid {
padding-top: 70px;
}
I even tried using JavaScript but it doesn't help. I suppose Bootstrap doesn't let me to do that.
Have you tried adding position:absolute or position:fixed to the .container-fluid element's css?
(https://developer.mozilla.org/en-US/docs/Web/CSS/position)
I am unable to reacreate your problem. It should work, since it's pretty much the example from w3schools.
It might help if you provided a minimal working example of your code as a stack snippet or on something like bootply or jsfiddle.
I am assuming you want your navbar to be at the bottom of the page, and you would like the background color to fill the whole item page (coded area).
To fix this...
Add a wrapper div (call it .bg or something) directly inside the body tag
Set the .bg class to width of 100 (w-100)
Make sure the navbar is not in your .container class, but still inside the .bg wrapper class
Here below I made a simple bootstrap webpage with a background color, and a navbar at the bottom.
I did not use css for brevity, instead I used bootstrap included classes for background color, margins, etc...
If you want the whole webpage to be one color, set the html tag css to
background-color: #somecolor;
Good Luck!
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="bg bg-danger">
<div class="container-fluid">
<div class="row w-100">
<h4>Bootstrap Afix Example</h4>
</div>
<div class="row w-100 mt-5">
<button type="button" class="btn-primary">button :)</button>
</div>
</div>
<nav class="navbar navbar-default sticky-top navbar-light mt-3 w-100 bg-secondary">
<ul class="nav mr-auto mt-1 mb-1">
<li class="nav-item">
Home
</li>
<li class="nav-item ml-3">
About
</li>
</ul>
</nav>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to create a layout using jumbotron and navbar but I cannot do it. I want that the jumbotron is located on top and the navbar is under of it. After I created I don't know why it has space on top and between the navbar.
How do I fix this ?
trying
<!-- Header.cshtml to use as a Partial to include on main layout -->
<header class="jumbotron bg-red">
<h1>My first layout</h1>
<h3>Trying to create a layout using jumbotron and navbar</h3>
</header><!--jumbotron-->
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="~/Imagens/logo.png" width="32" height="32" title="Red Cherry" />
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div><!--nav bar-->
Not sure why you having this issue, have you changed anything in the bootstrap css?
For a quick fix you can do some css, add a class 'remove-space' to the header tag.
<header class="jumbotron bg-red remove-space">
Then apply this css to it.
.remove-space{
margin: -50px 0 0 0;
}
I'd like to change my css so that the page has the bottom menu stay there (like fixed) but without the position:fixed.
Why?
Indeed, using Boostrap 3, I am using navbar-fixed-bottom .
BUT position:fixed is not supported at all on Opera Mini which accounts for 10% almost of mobile browsers (see here).
how can I create this without position:fixed ?
3 constraints:
I never want any scroll: it means if the viewport gets smaller(no matter the size of the viewport: big, small, desktop, tablet...), the menu and image will just get smaller and never any horizontal nor vertical scrollbar.
and I want the menu to stay below the image (the quality of the image, distorted or not, is not my point in this question).
i want only html and css: no javascript nor jquery. thanks
Here is an example of what I would like to do:
Here is my current code using fixed position:
<div>
<nav role="navigation" class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<!-- Title -->
<div class="navbar-bottom pull-left">
BIGGA
</div>
<!-- The non-Collapsing items on navbar-LEFT -->
<div class="collapse navbar-collapse navbar-left">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>
News
</li>
</ul>
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-bottom pull-right">
<ul class="nav pull-left">
<!-- This works well for static text, like a username -->
<li class="navbar-text pull-left">User Name</li>
<!-- Add any additional bootstrap header items. This is a drop-down from an icon -->
<li class="dropup pull-right"> <span class="glyphicon glyphicon-user"></span><b class="caret"></b>
<ul class="dropdown-menu">
<li> Profile
</li>
<li> Logout
</li>
</ul>
</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
</div>
<!-- Additional navbar items on the LEFT of the PULL-RIGHT stuff above -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Locator
</li>
<li>Extras
</li>
</ul>
</div>
</div>
</nav>
</div>
I will give you an idea, about how it could be solved.
Use 2 divs, one after the other. The 1st div will contain your image, or whatever you want to put in the main content area. Its height is 90%, of course you can change or modify that. The second div is your menubar, the height is 10%, modify it as per your needs. Notice the overflow:auto in the .image_content class, it will contain your main contents, regardless of its length and keep the menubar at the bottom.
<style>
.main_wrapper {
height:100%;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:9999;
}
.image_content {
height:90%;
background:red;
overflow:auto;
}
.bottom_menu {
height:10%;
background:blue;
}
</style>
<div class="main_wrapper">
<div class="image_content">
Your main content here
</div>
<div class="bottom_menu">
Menu here
</div>
</div>
Of course, remove the red and blue colors from the divs, they are just for the testing.
Added the following image to better explain what is going on in my code -
I am fairly new to CSS and have a question I can't seem to figure out. So I just started a MVC application and I am trying to float a logo over the navigation menu bar. I got the logo into the position I want, but now the problem is that the navigation menu is covering over the top half of the logo. Is there anyway I can choose for the logo to be on top of the bar?
This is what my _Layout.cshtml looks like:
<body>
<div style="position: absolute; margin-top: -50px;">
<img src="~/Content/Images/IsabellasLogo.png" />
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("Mission", "Mission", "Home")</li>
<li>#Html.ActionLink("Menu", "Menu", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© Isabellas's Pizzeria</p>
</footer>
</div>
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
Your navbar is set to have navbar-fixed-top class, which probably defines position:fixed;. Try changing this to position:relative;. You might need to also adjust margins, but without seeing actual CSS its hard to tell.
Another option would be to leave position:fixed; intact, but adjust top:0 to something bigger, like top:50px;.
I've been playing around with this for a while and thought it's time to seek help.
I have a container and within it there is a link and below the link there is a label and below that is the nav bar.
I tried a few of the settings but haven't been able to get it right.
For a moment I thought I had it.
[EDITED] Here is the code that i've been mucking around:
<div style=" background-color:#f0f0f1; width:inherit;">
<div class="container">
<!--Page Title Section -->
<div class="container">
<div style="float:left;">
<br />
Back to Link
<p class="pagelabelspacer">
<asp:Label ID="PageTitleLabel" CssClass="pageTitle" runat="server">Page Title.</asp:Label>
</p>
</div>
</div><!-- /.container-collapse -->
</div>
<!--End Page Title Section-->
<!--Nav Bar -->
<div class="container">
<nav class="navbar navbar-inverse navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>
</nav>
</div>
<!--End Nav Bar -->
</div>
[EDITED] My questions:
How do i get the nav bar not to overlap the link and label?
[My answer -> just put it in another container and it works]
On nav-default the height of the nav bar seems exaggerated (i.e. too high). Is there a way to change it (e.g. setting a specific pixel height)?
Is there a way to override the default nav bar color?
I'll continue playing with it to try to get it working.
Any suggestions and advice are greatly appreciated.
thanks!
How do i get the nav bar not to overlap the link and label?
http://getbootstrap.com/components/#navbar-fixed-bottom
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the bottom of the . Try out your own values or use
our snippet below. Tip: By default, the navbar is 50px high.
body { padding-bottom: 70px; }
Make sure to include this after the core Bootstrap CSS.
Is there a way to override the default nav color?
http://getbootstrap.com/customize/#navbar
If you're using SASS or LESS bootstrap, has variables that you can change to manipulate various properties of elements.