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).
Related
I'm trying to make dropdown navbar box black, I've been looking for solution for 2 days, but still even templates from bootstrap docs doesn't work properly, I mean that dropdown box.
Here is my html code for navbar:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navcol-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 navbar-link"><img src="/images /logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav navbar-right">
<li role="presentation">Main </li>
<li role="presentation">Main </li>
<li role="presentation">Main </li>
<li role="presentation">Courses </li>
<li role="presentation">Help
<a class="visible-sm-block" href="#"> </a>
</li>
</ul>
</div>
</div>
</nav>
Here is Page hierarchy:
You're correctly using .navbar-inverse, which should already be making your navbar black, as can be seen here.
There are a couple of reasons why this may not be working for you.
You've not referenced Bootstrap correctly.In this case, check for errors in your F12 Developer Tools' console.
You're using CSS for a different version of Bootstrap than the one you've loaded.
You have code that is overriding the defaults with higher specificity.
You have cached outdated CSS. Refresh your stylesheet refrence with CTRL + F5, and hold SHIFT while clicking on the refresh icon to ensure you clear your CSS cache as well.
Hope this helps! :)
I've got a template I'm trying to edit and i've tried every posted solution i've found, specifically this:https://codepen.io/bootstrapped/pen/KwYGwq but everytime it causes a format error.
My logo is 3000x700, transparent background...it has rasterized font so i was just trying to fit it, but if need be, i could put the logo in with html font beside it. I just can't figure out how to get it to fit into the default navbar. The closest I've been able to get is the logo in the right region, but it blows the navbar's size up. This is the default code:
<header>
<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="#"><i class="icon-rocket"></i> Landlr</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li>Home</li>
<li>Project</li>
<li>Features</li>
<li>Specifications</li>
<li>Pricing</li>
<li>Testimonials</li>
<li>Get Started</li>
</ul>
</div>
</div>
</div>
</div><!-- .navbar -->
</header>
On the included example i tried, it actually removed the navbar...other examples wouldn't resize the logo despite my css matching. Help appreciated.
Beginner project - I'm working on something with Bootstrap and have mostly finished building my Navbar. When the Navbar goes into collapsed mode I like the dropdown menu a lot and I want to have it this way at all times.
I cant for the life of me figure out what is even making it change to begin with
The left one is how it looks when it is collapsed, and how I wish to have it at all times (notice how it automatically centers the dropdown here as well):
http://imgur.com/a/yFVaE
I found that if I tweaked the CSS so that the page is always in collapsed mode, the dropdown still has the 2 styles and changes where collapsed mode used to kick in
Apologies - beginner here, new to StackOver flow as well, hope this makes sense to someone :) cheers
<nav class="navbar-fixed-top navbar-default">
<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>
<a class="navbar-brand cornerlogo" href="/">
<img class="logo" alt="Brand" src="/img/Logo1.png">
</a>
<!--<p class="navbar-brand centerme">Current Client Name</p>-->
<ul class="nav navbar-nav navbar-default centerme">
<li class="dropdown">
Current Client Name <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right scrollable-menu">
<li class="newclient">New Client</li>
<li role="separator" class="divider"></li>
<li>client1</li>
<li>client2</li>
<li>client3</li>
</ul>
</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--******************php if statement here to check if client selected-->
<form class="navbar-form navbar-right">
<button type="submit" class="btn btn-default">New SABR</button>
<button type="submit" class="btn btn-default">Edit Client</button>
<!--</form>-->
<!--<form class="navbar-form navbar-right">-->
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I dont know how to properly show my css, but not sure its relevant as even if i disable ALL CSS on the page the behavior is the same
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
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;
}