Twitter Bootstrap Collapsing Menu not in front of other elements - html

I'm using twitter bootstrap 2.3 and when I make my browser smaller it collapses correctly but when I click on the button to do the dropdown it doesn't appear in front of the other items. Here is a working demo: http://www.thehighlightnetwork.com/ I've been trying to fix it in the developer tools in Chrome but to no avail.
Here is the relevant code:
<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="/"><img src="http://i.imgur.com/8dN9Ck1.png" alt="small logo" style="height:50px;"></a>
<div class="nav-collapse collapse" style="height:0px;">
<ul class="nav">
<li>The Highlight Network</li>
<li>Official Blog</li>
<li>Profile</li>
<li>Logout</li>
<li>Sign Up!</li>
<li>Upload</li>
</ul>
<ul class="nav pull-right">
<li>
<div class="center-it">
<form class="form-search" action="/search" method="GET" style="margin:0; margin-top:15px;">
<input type="text" name="search_tag" placeholder="search..." class="input-medium search-query pull-right">
</form>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
In the official demo site it pushes down all the other elements which I would be happy with or if I can simply make it so that it is in front of the other elements.

The static position of your fixed navbar is causing this, the following css will override that and fix your problem (confirmed in chrome)
.navbar-fixed-top, .navbar-fixed-bottom {
position: relative !important;
}

Related

twitter Bootstrap navbar links moves when page resize

My Bootstrap navbar links including search goes away whenever I resize the page anywhere less than about 600px. What would be the cause of this? Only the logo does not move. The navbar is fine and does not resize, so I was surprised that the links went away when the page resize. I do not want any of my links to move from where they are regardless of page resizing.
code is here: HTML
http://jsfiddle.net/Crisp3333/2u0tgh5r/
<div class="menubar">
<nav role="navigation" class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="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>
<img src="yancii_logo.jpg" width="40px" height="50px">
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<form role="search" class="navbar-form navbar-left">
<div class="form-group">
<input type="text" placeholder="Search events, places, contacts......" class="form-control">
</div>
</form>
<ul class="nav navbar-nav">
<li>CreateEvent</li>
<li>MyEvents</li>
<li>Contacts</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Messages <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Inbox</li>
<li>Drafts</li>
<li>Sent Items</li>
<li class="divider"></li>
<li>Trash</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Account</li>
</ul>
</div>
</nav>
The problem is this piece of code: /* min-width: 1400px; */
And you can find it in your class -> .navbar
It basically causes your drop-down menu not to show. And the menu buttons don't resize along as you want them to.
Hope this helps you out!
Cheers

How to make my navbar-brand responsive on low resolution?

My navbar-brand goes down when I resize my browser or either I use it on my low resolution mobile device.
Here's my jsfiddle
My NavBar Code:
<div class="navbar navbar-default" id="page">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php"><img src="img/feueac-logo.png" style="position:absolute; width:30px; height:35px; top:7px; left:5px;" /><span style="padding-left:25px; padding-top:0px;" class="navbar-brand" >FEU - EAC E - Project System</span></a>
</div>
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Client Application</li>
<li>About Us</li>
<li>Contact Us</li>
<li class="dropdown">
Login <b class="caret"></b>
<ul class="dropdown-menu">
<li id="modal_trigger" href="#modal" class="btn_red">Faculty</li>
<li id="modal_trigger2" href="#modal2" class="btn_red">Student</li>
<li class="divider"></li>
<li id="modal_trigger3" href="#modal3" class="btn_red">Guest</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<p style="padding-left:20px; padding-top:4px;">
<input type="text" class="form-control col-lg-8" placeholder="Search" style="width:300px; height:30px;">
</form>
</div>
</div>
Here's some examples:
Good:
Bad:
Worse:
I've had luck using FitText, a jQuery plugin that fits text to it's parent element.
From their website:
FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.
Not exactly an "answer" (which there may be none of for this question), but a decent solution.
Good luck!

Bootstrap When lowering resolution navbar overlaps logo and it gets messed up

When I am moving down to tablet resolution from 991px to the phone resolution, my menu items overlap the logo and everything gets messed up. I am still learning Bootstrap so I would need some help with it, I'd like to fix it and make it actually look good.
The worst part is that I will have to make 2 more list items at the end of the navbar, but this has already messed it up.
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mobile-menu">
<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 hidden-xs" id="logo" href="#"><img src="images/Logo.png" alt="Recipe Website"></a>
<center><a class="navbar-brand visible-xs" id="logo-xs" href="#"><img src="images/Logo-xs.png" alt="Recipe Website"></a></center>
</div>
<div class="collapse navbar-collapse" id="mobile-menu">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
Recipes
<ul class="dropdown-menu">
<li>Appetizers</li>
<li>Beverage</li>
<li>Bread</li>
<li>Fruit</li>
<li>Meat</li>
</ul>
</li>
<li>F.A.Q</li>
<li>Contact Us</li>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</form>
</ul>
</div>
</div>
</nav>
Your HTML pasted here looks fine: http://www.bootply.com/I7jobETm52
You should post your custom CSS too. Without seeing it, it's hard to know for sure, but I would bet is has something to do with #logo and #logo-xs which I am guessing you've customized. Do they have set heights/widths/max/min/etc?
If so, remove those, and let the size of the image itself dictate (presumably, that's why you have two sizes). Also position, top, left, could all contribute to this problem if you're using them. First test would be, kill those IDs from the html and if the problem goes away you know where to focus.
Otherwise, try killing the visible-xs/hidden-xs options for test. And finally, try pulling the visible-xs item out of <center> and just put it in a regular div (with class="center-block" if you must).

Bootstrap navbar height changed on inserting brand image

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

Remove additional space between image and div

How can I remove the additional space between the nav banner and the main banner image below it?
I removed the padding and margin, but nothing is working.
My code is below.
I don't want to set positions. Can anyone tell me what the problem is?
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar collapsed" 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="#" style="padding-top: 0px;">
<img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
</a>
<div class="nav-collapse collapse" style="height: 0px;">
<ul class="nav">
<li class="active">Product</li>
<li>Solutions</li>
<li>Services</li>
<li class="iphonePartnerLink">Partners</li>
<li class="iphoneContactLink">Contact</li>
</ul>
<ul class="nav" id="navSecond">
<li class="">Partners</li>
<li>Contact</li>
</ul>
<form class="navbar-form pull-right">
<input class="span2" type="text" placeholder="Email">
<input class="span2" type="password" placeholder="Password">
<button type="submit" class="btn">Sign in</button>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<header class="hero-unit-product">
<h1>
Defie Cloud Business Solutions
<small>.. changing the way businesses operate.</small>
</h1>
<p><a class="btn btn-green btn-large" href="/signup/" data-link="modal" data-target="#signup-modal">Register</a></p>
</header>
</div>
The space is coming from:
.home article.container {
margin-top: 30px;
}
Change it to:
.home article.container {
margin-top: 0;
}
The main problem is connected with <article class="container"> element - it has margin-top: 30px;.
You also have to change padding-top for .home selector. It's set to 55px now, but has to be 47px instead.