Cut Bootstrap navbar in half - html

I'm using Bootstrap navbar with the bootstrap.min.css file.
This navbar stretches to the entire screen, where in the CSS file do I change the navbar settings (I don't want it to stretch)? There are a lot of navbar classes there and I can't seem to locate the right one.
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Imperia Bank
<button class="navbar-toggle" data-toggle="collapse"
data-target=".navHeaderCollapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Login</li>
<li>Register</li>
<li>Clients</li>
<li>Administrator</li>
<li>Accounts</li>
<li>Illustration</li>
<li >Atm</li>
</ul>
</div>
</div>
</div>

Place <div class="container"> above <div class="navbar navbar-inverse navbar-static-top">.

For anyone trying to make the navbar a custom width in Bootstrap 4, just override the navbar css width.
For example:
.navbar {
width: 400px;
}
In case you have more than 1 navbars (?!) just specify a custom class/id for the one you want to alter.

You should be able add your own styles on top of the existing styles. Using a tool like the chrome debugger you should b able to find the style rule that is doing this and then in your own stylesheet just use a more specific CSS selector to override it.

You can place the navbar in its own container (with applicable ID) and adjust the width of the container in your stylesheets. As Swagata said, you should be able to just flip the div tags and adjust your css accordingly. I'd give it a memorable name, though, for the sake of editing.

There is no pretty way to do this, considering .navbar was built to span the screen. But it can be accomplished fairly easily using the built in grid.
<div id='row'>
<div id='col-md-6'>
INSERT NAVBAR HERE
</div>
<div id='col-md-6'>
INSERT WHATEVER YOU WANT ON THE OTHER HALF OF THE SCREEN HERE
</div>
</div>

Related

How to disable horizontal tap if content fits to mobile screen

Bootstrap 3 shopping cart is defined using bootstrap standard markup like
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<body>
<div class="container">
<div id="_info"></div>
<header class="row">
<div class="col-xs-12">
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<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">Lüli navigeerimist</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
....
In mobile its content width is same as mobile screen width.
However user can drag content horizontally left so that ugly white space appears in left.
How to fix this so that unnessecary left dragging is not allowed?
Maybe some element in page causes this effect?
I tried to delete elements in Chrome developer tools Elements tab but horizontal scroling is still allowed.
The problem is your header and footer both have a hard set width to them. This would normally not be an issue with proper media queries but in my opinion in order to not have to worry about adding more media queries I would just change your CSS for the header like I have below:
#media only all and (min-width: 481px)
header, .wrap {
width: 100%;
margin: 0 auto;
}
For the footer, you have a facebook toolbar that has a lot of hardset inline widths. You can hack this together by wrapping the entire element in a div and applying width: 100%; overflow: hidden; to that div but I would strongly recommend you do more research on that plugin to make it function properly or find a better plugin that will give you better results.
This did it on my comp. I just disabled the set width of the header.

Bootstrap NavBar not collapsing as expected - separating onto two lines

Question Background:
I'm using Twitter Bootstrap on my site and have incorporated a collpasing navbar for my sites menu.
The Issue:
The NavBarcollapses to a button as expected but when the screen hits a certain width the logo I have within the NavBarand the menu items split onto two separate lines. The following shows the issue:
This is the navbar with the page fully expanded and working as desired:
This is with the page slightly minimized and response, notice the NavBar has now split into two lines. This is not the desired behavior I want. I ideally I want the option to stay on the same line or collapse to a button:
This shows the NavBar fully collapsed:
The Code:
This is my NavBar markup. I cannot see why I'm seeing the above unwanted behavior with the NavBarseparating into two lines:
<div class="navbar navbar-fixed-top">
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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">FM<b>FC</b></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Welcome</li>
<li>Club</li>
<li>About Us</li>
<li>Gallery</li>
<li>Committee</li>
<li>Contact Us</li>
<li>Location</li>
<li><a href='#Url.Action("FutureEvents", "Events", new { pageNo = 1 })'>Events</a></li>
</ul>
</div>
</div>
</nav>
</div>
Any help in working out this issue would be appreciated.
The nav is wrapping in to 2 lines because you have many menu items and the Bootstrap container switches to 750px as the screen width shrinks. You have 2 options..
One option is to use the full width container-fluid (this may not work for your design):
http://codeply.com/go/TfbwIivilI
Another option is to decrease the point at which the navbar collapses. This requires CSS to override the default navbar collapse point. In your case around 1000px seems to work best:
http://codeply.com/go/kcaXYh7ARB
It happenes because you have so many li elements, so what you need is to change the collapse break point. Just add the following to your css
#media(max-width:992px) {
.nav>li>a {
padding-left: 10px;
padding-right:10px
}
}
bootply.

How can i get rid of the open space between the topside of my website and my navigation bar (bootstrap)

When i tried to make my navbar static I came across something weird. I am having a space between the navbar and the topside of my website.
Any ideas on how to fix this so that my navbar will be in the place of the open space? (I am bad at explaining things i know....)
<body>
<div id="wrapper">
<div class= "navbar navbar-inverse navbar-static-top">
<div class="container">
BlahBlahism
<button class="navbar-toggle" data-toggle = "collapse" data-target= ".navHeaderCollapse">
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
<span class = "icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
There is no CSS involved
This code works fine when i tried running.
but still you should try using this.
some versions of internet explorer do not support class nav or nav-bar please check
hope this would help
body, html {
margin: 0px;
padding: 0px;
}
I don't know what your code says, but I'm guessing it has something to do with the default behaviour of the elements in question.
Possible solution:
Make a little CSS and remove padding and/or margin.
<style>
#theNavbarID{
padding: 0px;
margin: 0px;
}
</style>
Post some code and I'll expand upon it if need be.
EDIT:
Code works just fine, you can try it here:
JSFiddle

Bootstrap one page website themev formatting problems

My website: zarwanhashem.com
I'm using the landing-page theme and the scrolling-nav css, which can be found here:
http://startbootstrap.com/template-overviews/landing-page/
http://startbootstrap.com/template-overviews/scrolling-nav/
2 problems:
When I navigate to different pages using the navbar the next "page" creeps up from the bottom because the page I actually navigated to doesn't fill up the entire screen. How can make it so that the extra space is just filled in with the background colour?
When I navigate to different sections the scrolling stops too late. As in, the spacing between the images and the navbar is non-existent. There should be 50px padding there to make a space equal to the size of the navbar. I tried adding padding to the divs but the padding goes into the previous section, which has a different background colour, so it doesn't fit in properly.
Also, a random bug, but there's an equal sign between two of the sections and I can't find out why.
I would appreciate any help.
Here's some of my code. All of it is public on the website so it's visible if you want to look at it. I took away the 50px padding now because of the colour issue.
Code for the robot section (The other project sections have the same structure):
<div id="robotAI" class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Fighter Robot AI</h2>
<p class="lead">An object oriented robot programmed in Java. It fought robots
created by other students in an environment created by a third party. I also created other robots
and tested them against each other to determine the best strategy. A brief report summarizing how the robot's intelligence
works can be found here.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="img/robotAI.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
Code for the about section (The resume section has almost the same structure):
<div id="about" class="content-section-a">
<div class="container">
<div class="row">
<h2 class="section-heading" style="text-align:center">About Me</h2>
<p class="lead">I'm a passionate student who loves coding. In high school I took 3 computer science
courses, which introduced me to the world of programming. I try to make free time
in my schedule for coding so that I can fiddle around with different languages and problems. I've worked with Turing, Python, and Java. I also have a basic understanding
of HTML and CSS.
<br><br>
My other interests include martial arts and chocolate. I trained in mixed martial arts for 10 years, and currently
hold a 2nd degree black belt. The focus of my training was karate, but I also worked with tae kwon do and jujutsu.
<br><br>
I am currently seeking a software development internship/co-op position from May-August 2015. You can find more information
about me on my LinkedIn page.</p>
</div>
</div>
<!-- /.container -->
</div>
These are the only changes I've made to landing-page css (Not sure if these actually are changes, I might've reverted them back to what they were originally):
.content-section-a {
background-color: #f8f8f8;
}
.content-section-b {
border-top: 1px solid #e7e7e7;
border-bottom: 1px solid #e7e7e7;
}
Navigation bar code:
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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 page-scroll" href="#page-top">Zarwan Hashem</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>About Me</li>
<li class="dropdown">
Projects <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class = "page-scroll" href="#robotAI">Fighter Robot AI</a></li>
<li><a class = "page-scroll" href="#spaceInvaders">Space Invaders</a></li>
<li><a class = "page-scroll" href="#snake">Snake</a></li>
</ul>
</li>
<li>
<a class="page-scroll" href="#resume">Resume</a>
</li>
</ul>
<a class="navbar-brand pull-right">zarwan#zarwanhashem.com</a>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Note that I'm not actually using the sections in the scrolling-nav code. I'm only using the navbar section. Also I'm very new to CSS and HTML so please dumb down your explanations a little.
if you want to make each section fill up the whole space you will have a problem that each user have different screen height, I don't know if there is a way to do it with css but I have this solution using jQuery:
<script type="text/javascript">
$(window).ready(function(){
$('div[class^="content-section"]').css('min-height', $(window).height());
})
</script>
if you already have jQuery just add this script to the bottom of the body.
as for the second problem you that's because your navigation bar is set to fixed, and the javascript handling the scrolling put the div at the top of the window, to fix that you either have to change the javascript handling the scrolling or just increase the padding-top for each section.
edit: to fix the scrolling problem you can edit the file scrolling-nav.js and change the click event handler by subtracting 50 form the offset().top:
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 50
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});

100% height with twitter bootstrap and container-fluid

I have seen a number of questions about divs that take up 100% of the screen, but none quite match the requirements I have. I guess the closest would be:
How to have multiple columns that consume 100% height using twitter bootstrap?
The problem with this one is it doesn't use twitter bootstrap conventions, and I also have some extra div nesting.
A relevant code snippet is here:
<!-- Standard bootstrap fixed header -->
<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>
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<!-- here is the interesting section -->
<div id="app-container" class="container-fluid" style="background-color: red;">
<div id="app" class="row-fluid" style="background-color: blue;">
<div id="menu" class="span2" style="background-color: green;">
Menu
</div>
<div id="content" class="span10" style="background-color: purple;">
Content
</div>
</div>
</div>
And a link to the jsFiddle: http://jsfiddle.net/djMJX/18/
What I need:
The container-fluid div (#app-container) should reach to the bottom of the page
There should be no extra scrolling caused by the top navbar
content should also reach the bottom of the page. If the content is longer than the page, #app-container and #content should stretch so that the content is contained within
I have tried various variations of setting heights and min-heights to 100%. The problem seems to arise from the extra row-fluid. I have come close where all divs reached the bottom of the page, and it looked fine when the content was short enough, but it fell apart when the content exceeded the height of the page.
I appreciate any help I can get. Thanks!
We have recently started using Bootstrap, however as a web app we encountered difficulty in using the grid system with 100% height. Our solution was to supplement the Bootstrap grid with some helper css classes that utilise the Flexible Box Layout module.
This is the abstract from the specification:
The specification describes a CSS box model optimized for user interface design. In the flex layout model, the children of a flex container can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
Here are some further details...
CSS Flexible Box Layout Module Specification
Introduction and Tutorial
However the specification is only at the Candidate Recommendation stage, so it's still quite new. You will also need to consider browser support...
Can I Use Flexbox
There is a polyfill available if you do need to support older versions of IE:
FlexieJS