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;.
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 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/
I am trying to built a site with Bootstrap. So far everything is going pretty much as planned. I would like a fixed navbar and I am using the built in function:
<div class="navbar navbar-fixed-top">
This is great and just what I need BUT I would like the navigation and title to start at the same place as the container instead of all the way to the left/right (still having the navbar going 100% in width. I have tried to put a container inside the navbar which was not the correct solution :-)
example
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="./index.html">Bootstrap</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>
Get started
</li>
...
<li>
Customize
</li>
</ul>
</div>
</div>
</div>
</div>
or throw
.navbar {
max-width: 1170px; /* width of .container */
margin: 0 auto;
}
into the css
You should have a container class nested inside your navbar
<div class="navbar navbar-fixed-top">
<div class="container">your menu and logo go here</div>
</div>
That will give you the same width as the body container if you do not have a fluid layout and will give auto margins to the container so it is centered in the middle of the screen. It will also keep the navbar itself at 100%
I am using HTML5 boilerplate and Bootstrap to create a website.
I am looking to make the orange and grey banner fixed on scroll but also centered and responsive. At the moment it is fixed on scroll and responsive but NOT CENTERED.
How can i make this element:
- FIXED ON SCROLL
- RESPONSIVE
- CENTRED
Bare in mind that i still want the slider to appear behind the banner as is.
Here is my code for this bit:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right" id="nav-links">
<li class="active">HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="span12"> <!--THIS IS THE IMAGE I AM USING-->
<img src="images/PBP_header.png"/>
</div>
</div>
My dev site is: http://dev.paperboyposse.com
Thanks in advance guys!
Ash
Just replace
<div class="span12">
<img src="images/PBP_header.png">
</div>
with
<div class="container">
<div class="span12">
<img src="images/PBP_header.png">
</div>
</div>
It should be fixed, responsive and centered now :)
NOTE : I am not considering the slider as part of header btw.