How to make dropdown navbar black? - html

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! :)

Related

How do I get the html list to render in my header?

Here's my html:
<div class="container">
<div class="navbar-header">
<button
class="navbar-toggle"
type="button"
data-toggle="collapse"
data-target=".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>
Home
</div>
<nav class="collapse navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li>
Category
</li>
<li>
Category
</li>
<li>
Category
</li>
<li>
Category
</li>
</ul>
...
</li>
</ul>
</nav>
And the render:
It should be showing the 4 "Category" elements across the top but it's not. Any ideas on why these elements are acting like they're hidden? I was originally trying to render as an ejs template but even reverting back to html doesn't seem to be working. This template can be found here: https://www.bootstrapzero.com/bootstrap-template/storystrap
The reason the "Category" elements are not showing across the top has to do with your version of bootstrap.
If you use install and use Bootstrap version 3.3.7, then the "Category" elements will be shown across the top, and they won't be collapsed.

Navigation bar won't toggle

The button to toggle the nav bar won't function. I've checked through the answers to similar questions and can't see anything wrong with my html. Help much appreciated!
I can see all the li items in my navbar but cannot hide them.
Here's the relevant html:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" id="home">Simmo Simpson</a>
</div>
<div class="pull-right">
<ul class="nav navbar-nav">
<li>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</li>
</ul>
</div>
<div id="#myNavbar" class="collapse navbar-collapse" >
<ul class="nav navbar-nav pull-left">
<li id="navbar" class="active">Home</li>
<li id="navbar" class="active">About</li>
<li id="navbar" class="active">Portfolio</li>
<li id="navbar" class="active"><a href="#contact" >Contact</a></li>
</ul>
</div>
</div>
</nav>
I've also included this at the bottom (and stylesheets etc in the meta section):
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
First off, add type="text/javascript" to the script tags for jquery/javascript includes.
Thirdly, check your server/site/browser configuration in terms of 'cross-site scripting'. I believe this may be your issue here. When you call a script with cross-origin, you are trying to execute the script remotely and for security purposes this tends to be disabled by default for a lot of web sites and/or servers. To get around this, I would recommend downloading the bootstrap CSS/JS files and referencing them from your sites director as apposed to a CDN.
I also see that you had an issue where by you included a '#' in an element id;
<div id="#myNavbar" class="collapse navbar-collapse" > - Upon fixing this the code stopped working, this is because you may not have changed the target ID of the bootstrap toggle button, see; <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNavbar">.
In both of these lines the ID's need to match, that being the ID of the navbar element to be toggled, and the button that does the toggling.

Bootstrap Navbar Dropdown style when collapsed/not

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

Toggle navigation isn't working

I have tried just about everything to get the toggle navigation to work and I have had no luck. Is it just a simple mistake or piece of code I'm missing? I have tried loading different scripts but still nothing.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #f2f2f2">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#nav-collapse" style="margin-top: 20px;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#/home" class="navbar-brand">
<img src="img/evodent-logo.png" alt="evodent-logo" style="width:190px;">
</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
It seems like the code is working just fine as is. Make sure that you are including the bootstrap.min.js file on your page as well. As the collapsible components in bootstrap require this plugin/file.
Here is the official documentation on the Bootstrap Navbar that mentions that the plugin is required: http://getbootstrap.com/components/#navbar
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.

Scrollspy only applying to dropdown menu

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 :-)