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
Related
Need help to resolve the bootstrap dropdown navigation issue. I followed all the rules available but I am missing something. Please help.
The service tab has two drop down li which should open when click on the caret. But the website css is not allowing to do so.
<!-- navbar-header -->
<div class="header-nav">
<nav class="navbar navbar-default">
<div class="navbar-header logo">
<button type="button" class="navbar-toggle collapsed" 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>
<h1>
<a class="navbar-brand" href="http://www.example.com/">Brand Name</a>
</h1>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>SEO Service</li>
<li>Digital Marketing</li>
</ul>
</li>
<li>Projects</li>
<li>Timeline</li>
<li>Contact</li>
</ul>
</div>
<div class="contact-bnr-w3-agile">
<ul>
<!--<li><i class="fa fa-envelope" aria-hidden="true"></i>info#example.com</li>-->
<li><i class="fa fa-phone" aria-hidden="true"></i>000000000 </li>
</ul>
</div>
<div class="clearfix"> </div>
</nav>
<div class="clearfix"> </div>
</div>
You have a typo in your code:
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
Here, data-target represents the div that is being targeted for toggling when you click the button. So, it is looking for the div with the ID "bs-example-navbar-collapse-1". This line is fine, though I'd recommend renaming it to something more useful, like "site-nav" or something.
Now, here is where the problem occurs:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 navis">
This is the div that you are (correctly) trying to expand/collapse. But you have given it the id "bs-example-navbar-collapse-1 navis", which is not the same as "bs-example-navbar-collapse-1". So, you are clicking the button, but no div is being found with a matching ID.
To solve this, set the ID to "bs-example-navbar-collapse-1" instead (remove "navis"):
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
Now, all should be right in the world.
Also, far as the jQuery warnings mentioned above, it seems you are loading jQuery 2 already, so you don't need to include 1.12 as well. So make sure you are including the jQuery lib that you want.
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! :)
ever since I entered the code for a dropdown menu, scrollspy only hovers over the work items in the drop-down. It does not apply to the other a elements. I'm pretty sure I have the right data target. Thoughts? (I've tried referencing the code on the bootstrap documentation, w3, and another person's site. I must be missing something.)
<body data-spy="scroll" data-target=".navbar">
<div class="container-fluid">
<nav class="navbar navbar-inverse, navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="home navbar-brand">
Home
</div><!-- end home -->
</div><!-- end navbar-header -->
<div class="collapse navbar-collapse" id="mynavbar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
"Work"
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Work 1</li>
<li>Work 2</li>
</ul>
</li>
<li>FAQ</li>
<li>Contact
</li>
</ul>
</div><!-- nav -->
</div><!-- / nav container -->
</nav><!-- / navbar -->
This is probably too late for the original poster - but in case anybody else comes across this, the problem was probably because the target divs (or etc elements) of the dropdown links were hidden. According to Bootstrap's official documentation for ScrollSpy:
"Non-:visible target elements ignored
Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted."
(http://getbootstrap.com/javascript/#scrollspy)
This means if your dropdown link targets are invisible (i.e. hidden), the SpyScroll plugin won't work on them.
A workaround would be to add some hidden menus to the dropdown with the href id of some other empty elements just above and below your desired section. It may not be clear to understand my point, if anyone needs further clarification, please let me know and I'll be happy to elaborate :-)
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 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