I'm trying to use Twitter Bootstrap for the first time (first time with frontend too), however I already have problems. One is that the navbar is always shown over others components.
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<div class="container theme-showcase" role="main">
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
In this case for example the div .container .theme-showcase is under and I can never see it.
What am I missing? Thank you.
EDIT: removing-fixed-top is not a solution, I need the nav always present
.navbar-fixed-top will give the navbar position: fixed removing it from the flow so other elements will start at the top of the page. If you want a sticky nav, add top padding to .container.theme-showcase or if you want the navbar static, then simply remove the .navbar-fixed-top class.
Because .navbar-fixed-top is position: fixed, the nav element will lay on top of the underlying div. Be sure to give .container .theme-showcase some padding-top to show it beneath the navbar.
Related
I need move bootstrap elements of row div to the bottom of the page and make it responsive.
I tried add position:absolute to row class, but didn't worked so well.
How can i do this?
jsfiddle
I assume you are trying to absolutely position the element with the id bottom-list.
In order to make it go to the bottom of the page add
bottom:0;
to the selector.
In this way you specify the offset of the absolutely positioned element from the bottom of the containing element.
If however in your layout one of the parent elements has a CSS property
position: relative;
then this may work differently.
Hence I suggest the outermost container element i.e. .container must be absolutely positioned with bottom:0;
Edited fiddle: https://jsfiddle.net/fz93cgxd/4/
If you need to have a Responive bootstrap navbar fixed on bottom you may need to start with Bootstrap navbar itself then add your custom style on it
like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<nav class="navbar navbar-default nav-justified fixed-bootm navbar-fixed-bottom">
<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" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</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 nav-tabs nav-justified">
<li class="active">01 INTRO <span class="sr-only">(current)</span></li>
<li>02 WORK</li>
<li>03 ABOUT</li>
<li>04 CONTACTS</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Note: all those code is with bootstrap style I didn't write a single line of CSS
Now you can start adding your custom styles
I would want to click the button in the header to expand the list of links, but it only expands, and unable to hide. What should I do to get it working normally?
Here is my code:
<!-- Navbar -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<!-- This is where the button to collapse the list is -->
<img class="icon" alt="Brand" src="img/icon.ico">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseBtn" aria-expanded="false" aria-controls="collapseBtn">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- This is the list I expect to collapse when I hit the button -->
<div class="collapse navbar-collapse in" id="collapseBtn">
<ul class="container-fluid nav navbar-nav pull-right">
<li><h4 class="navbar-items">Education</h4></li>
<li><h4 class="navbar-items">Experience</h4></li>
<li><h4 class="navbar-items">Skills</h4></li>
<li><h4 class="navbar-items">Contact Me</h4></li>
</ul>
</div>
</div>
</nav>
You have the class of in in your navbar-collapse causing it to remain open other than that your Code is working fine as you can see in the following fiddle
Fiddle
You will want to remove the class of in From your navbar-collapse and then if you are having trouble getting it to open you more than likely forgot to load jquery.js before loading bootstrap.js. So before your bootstrap javascript file you need to load the jquery javascript library. Bootstrap's javascript works off of jquery so you need to load the jquery library first. So before the bootstrap js script link add this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
then after that load your bootstrap js file
<script src="bootstrap.js"></script>
I can't seem to figure out why this is.
My code is as follows:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="container-fluid">
<div style="text-align:center"><a href="http://www.leagueofassassins.co.uk">
<img class="banner" src="../images/logos/Logo%20for%20LoA.png"></a>
</div>
<!--Navbar Begin-->
<nav class="navbar-static-top navbar-inverse navbar-inner navbar-custom" role="navigation">
<div class="container">
<!-- 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" aria-expanded="false">
<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="#"></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>Home</li>
<li>Info</li>
<li>Roster</li>
<li>WarcraftLogs</li>
<li class="active">Apply</li>
</ul>
</div>
</div>
</nav>
<!--Navbar End-->
For some reason, it leaves a big area at the right hand side when vertical but works when my phone is horizontal. I have included pictures below. Any help would be appreicated. I want it to be full screen width.
Ignore the well at the bottom with the overflowing text, please. That's not the problem.
See http://www.leagueofassassins.co.uk/apply/
It looks like your "main-pane" cals got 60% width, try removing it and it should work fine.
CSS Class
.main-pane {
margin-top: 1%;
margin-bottom: 5%;
width: 60%; // remove this line
height: 100%;
}
It turns out that I'd accidentally missed some padding on either side of .container-custom and the bottom content was spilling over causing the page to need to be widened. It works now. Thanks.
I want to make a nav bar that automatically turns into a Menu button and collapses when you minimize your browser
I want it to be exactly like this one http://php1.emagid.net/~laurenbe/
I looked up tutorials but every tutorial only teaches us how to do the bar static to the top of the page. Any suggestions?
This is part of bootstrap, the Navbar
At it's most basic, you want to do this:
<nav class="navbar navbar-default" role="navigation">
<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">Toggle navigation</span>
<div class="btn btn-primary">Menu</div>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
You can then use custom CSS styles to over-ride bootstraps native styling.
It's all about responsive design, so you can have help here : http://getbootstrap.com/css/#grid.
Here : http://getbootstrap.com/css/
And a beginner video for bootstrap if you're not familiar with it : https://www.youtube.com/watch?v=no-Ntkc836w
So I am trying to change the color of the navbar. I have worked with HTML and CSS, but havent really made design changes before. And for some reason I cannot figure out for the life of me how to make changes to this html/css template I downloaded.
<nav 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-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" href="index.php">CandyCode</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">
<li>About
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I am not really sure what to change in the CSS. Essentially I would like to change the navbars color to #77bbb0. I can show more code, but I think for the sake of clarity, you can check out the code here: http://startbootstrap.com/blog-home.
Thank for helping a design noob!
The easiest way is to give the HTML element in question an id and then add the CSS rule:
#the_id_i_gave_it { background:#77bbb0; }
However, if you can't or don't want to edit the markup, you can chain together the various classes on the element to give your rule high specificity:
.navbar.navbar-inverse.navbar-fixed-top { background:#77bbb0; }
As long as those classes don't change that should be specific enough to get just the div you want and no others.