I am using BootStrap. I have a navbar at the bottom of my page with a phone number. I want that phonenumber to be hidden upon collapse and then show a phone icon instead. Currently I can't get the phone icon to be hidden before collapse. Here is my code:
<div class = "navbar navbar-default navbar-fixed-bottom">
<div class="navbar-inner">
<div class ="container">
<div>
<img src="logo.png" alt="#" href="#">
</div>
<div class = "collapse.in navbar-collapse navbar-right" id="bund-navbar-collapse-semi">
<a class = "navbar-btn btn-success btn-xl btn pull-right">
<span class="glyphicon glyphicon-earphone" ></span>
</a>
</div>
<div class="collapse navbar-collapse navbar-right" id="bund-navbar-collapse-fuld" >
<a class = "navbar-btn btn-success btn-xl btn pull-right">
<span class="glyphicon glyphicon-earphone "></span> +45 30 30 30 30
</a>
</div>
</div>
</div>
</div>
make use of the responsive-utilitie classes from Bootstrap.
add the classes
hidden-sm
hidden-md
hidden-lg
to the button with just the phone icon, see the fiddle. Never mind that the icon isn't showing properly. I would use bootply but its down for maintenance.
Related
I added a new menu item to a navbar, but now when resizing smaller, the top Account menu item in yellow(see screenshot)(the div with 'navbar-right-container' in the HTML) moves down into the main navbar. If I resize even smaller, the hamburger icon shows up. I want the hamburger icon to show up before the top menu item overlaps into the other navbar. Below is a snippet of the HTML. I tried adding padding to the body as suggested by other posts but that did not work. How can I get the hamburger icon to show up before it overlaps? Thanks.
<div id="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-expand-background">
</div>
<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 class="navbar-brand">
</div>
</div>
<div class="navbar-collapse collapse">
<div class="navbar-middle-container">
<ul class="nav navbar-nav navbar-middle">
<li>
<a href="javascript:openModalAction('/Manage/Accounts')" class="navbar-account-switch">
<span>Account:<br />My Account</span> <span class="caret caret-right caret-collapsible"></span>
</a>
</li>
<li class=" nobr">
<a href="/" title="My Dashboard" >
DASHBOARD
</a>
</li>
<li class=" dropdown nobr">
<a href="/Quotes" class="dropdown-toggle" data-toggle="dropdown">
ACCOUNTS
<b class="caret caret-collapsible"></b>
</a>
<div class="dropdown-menu dropdown-menu-multicolumn ">
<div class="dropdown-menu-head"><div class="dropdown-menu-head-border"></div></div>
<table class="table table-condensed">
<tr>
<td>
<ul class="dropdown-menu-col">
<li class="nobr"><div class="dropdown-menu-col-header">MANAGE</div></li>
.......................................<div class="navbar-right-container">
<ul class="nav navbar-nav navbar-right">
<li class=" dropdown nobr">
<a href="/Quotes" title="Manage Account" class="dropdown-toggle" data-toggle="dropdown">
My name
<b class="caret"></b>
</a>
My Navbar
It is hard to presume without a working example. But almost certainly you should add some to your CSS breakpoint. Add 12em or 200px. Or make an entirely new breakpoint to focus specifically on that element.
You could resort to hacky tricks like negative margin width to offset the new element's impact on the layout. This may affect your ability to click and require even more rules.
I have the following data-toggle i want to collapse for the menu. I have provided the necessary bootstrap classes, but it's still not working either.
Html code:
<div class="navbar navbar-compact">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a rel="nofollow" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" title="Toggle menu">
<span class="menu-name">Menu</span>
<span class="menu-bars">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav" id="topMenu" data-submenu="horizontal">
<li class=" active ">
<a rel="nofollow" href="//ss-template-blog03.simplesite.com/434337774">FRONT PAGE</a>
</li>
<li class=" ">
<a rel="nofollow" href="//ss-template-blog03.simplesite.com/434337775">BLOG</a>
</li>
<li class=" ">
<a rel="nofollow" href="//ss-template-blog03.simplesite.com/434337777">CONTACT</a>
</li>
</ul>
</div>
</div>
</div>
</div>
My Bootstrap classes that i have loaded into my project
bootstrap.collapse-2.3.2.js
bootstrap.dropdown-2.3.2.js
bootstrap.modal-2.3.2.js
I have my own CSS for the styling
This is how i load my js files
You have 2 copy of Jquery.js files...
remove one of them
And include Bootstrap.js file after Jquery.js file.
Update:
Do not remove dot in ".nav-collapse" as suggested in another answer.
if this does not work.. try removing all other Bootstrap includes
I have Created Jsfidle:
[https://jsfiddle.net/DTcHh/40014/]
There's one link that stays up on the top line, next to "search jobs by," in certin screen resolutions of the collapsed navbar. Also, within these same resolutions, the client login continues to work like the "desktop/laptop" client login instead of the mobile login. I'm having this problem with various tablet resolutions only (when width is between 768px and 1023px).
The "State" link, between widths 768px and 1023px, is still on the same line as the "Search jobs by:" text in the collapse navbar, as per the photo I uploaded. Also, the client login dropdown is operating like the expanded navbar version instead of the collapsed navbar version within the 768px and 1023px width range. The picture above shows this weird appearance.
See visual below:
http://www.bootply.com/Cl8RGWpCqv
What's the best way to fix this in bootstrap 3 (Note: I'm using regular css/css3, neither less nor sass)?
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<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="#tusaj-main">
<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 brandmedia" href="#"><img src="img/logo_final.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="pspacerv20t spacerh10r">
<div class="collapse navbar-collapse" id="tusaj-main">
<ul class="nav navbar-nav navbar-right">
<p class="navbar-text">Search Jobs By:</p>
<li>State</li>
<li class="divider-vertical"></li>
<li><div class="spacerh80"> Category</div></li>
<li>Post Jobs</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Client Login <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<form class="form-inline no-margin center-block" role="form">
<div class="form-group pspacerv10b pspacerv10t">
<div class="col-sm-5">
<input type="text" placeholder="Username" class="form-control">
</div>
</div>
<div class="form-group pspacerv10b">
<div class="col-sm-5">
<input type="password" placeholder="Password" class="form-control">
</div>
</div>
<!--<div class="form-group pspacerv10b">
<div class="col-sm-6">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div> /-->
<div class="form-group center-block pspacerv10b">
<div class="col-sm-3">
<button type="submit" class="btn btn-success">Sign in</button>
</div>
</div>
</form>
</li>
</ul>
</li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
<div class="tagline col-lg-12">
<p class="taglinealignright pspacerv15t spacerh25r">Search Jobs and Careers: Find Your Ideal Job. 1,000s of New Jobs Daily!</p>
<br />
</div>
</nav>
Demo
Bootstrap Code: http://www.bootply.com/rKAlUVLSTA
I'm trying to create a box below the left sidebar but whatever I do, it is always in the white background zone. I do understand that if i add the "leftbar" class elsewhere, it will work but the width has to remain same as the logo background.
Screenshot:
Here is the solution: http://www.bootply.com/rw2brhxWy7 Basically what you had to do is split up the two into two separate columns within a parent column. I added a margin-top: 20px to be able to distinguish the two.
Relevant code below:
<div class="col-md-2">
<div class="col-md-12 leftbar" style="margin-top:50px;">
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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>
<span class="visible-xs navbar-brand">Sidebar menu</span>
</div><!--/.navbar-header -->
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<div class="text-center">
<p>John Doe</p>
<p>Points</p>
</div>
<ul class="nav navbar-nav sidebar-nav">
<li><span class="glyphicon glyphicon-dashboard"></span> Dashboard</li>
<li><span class="glyphicon glyphicon-flash"></span> Innovation</li>
<li class="active"><span class="glyphicon glyphicon-gift"></span> Redeem</li>
<li><span class="glyphicon glyphicon-cog"></span> Settings</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="col-md-12 leftbar" style="margin-top: 20px;">
I want to free myself from this white box and be in a new box instead.<p></p>
</div>
</div>
Edit: The problem was that now the column did not match the width of the green navbar div. You must remember that bootstrap's CSS will apply a padding of 20px left & right to every column. In order to fix this you should add a custom class to override that. Add the following class:
.noPadding {
padding-left: 0;
padding-right: 0;
}
Add this class to the following div:
<div class="col-md-2 noPadding">
<div class="col-md-12 leftbar" style="margin-top:50px;">
</div>
<div class="col-md-12 leftbar" style="margin-top: 20px;">
</div>
</div>
Edited Solution Bootply: http://www.bootply.com/tLCcdki4uP
I am new to HTML and CSS and have started coding in the last 4 days. I found bootstrap very useful to get things moving quickly.
Here is my attempt at getting a Navbar with transparency and fixed to the top.
http://jsfiddle.net/revanur/mf5wc/4/
<!-- Top-Navigation-Bar -->
<div class="row-fluid">
<div class="navbar navbar-fixed-top">
<div class="navbar-inner" id="topbar">
<div class="container"> <img class = "brand" src="http://placehold.it/269x50" alt="SparkCharger" />
<button id="topbtn" 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>
<div class="nav-collapse">
<ul class="nav pull-right">
<li class="active">
<form class="navbar-search brand">
<input type="text" class="search-query" placeholder="Search">
</form>
</li>
<li> <h5> Discover </h5>
</li>
<li> <h5> Blog </h5>
</li>
<li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#"><h5>Start <span class="caret"></span></h5></a>
<ul class="dropdown-menu">
<li> <h6> Login </h6>
</li>
<li> <h6> Signup </h6>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /Top-Navigation-Bar -->
However, the height of the navbar seems to change based on brand image size. I have no problem with that but I notice significant spacing between the image and the navbar top and bottom. How do I change this. Also, is it possible to fix the navbar size so that the navbar does not have a mind of its own.
There are a few things affecting the height of the navbar:
div class="navbar-inner" (5px padding)
img class="brand" (10px padding)
the size of the image
You can remove the padding by:
img.brand {
padding: 0;
}
And/Or you can specify the height of the navbar:
div.navbar-inner {
height: 10px;
}
Use something like this:
.brand {height: 25px;}
Demo: Fiddle