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 :-)
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! :)
How can I display correctly one existing dropdown-menu near hamburger-menu when it appears?
I tried to find this way, but no success. Can not correctly move it out! Also did not find some examples to do it. To make a new dropdown-menu and hide another is not a problem, but to move this one near hamburger-menu correctly is not so easy. For me, ofcorse :)
But I think after that there will be some other problems. Overlap each other and so on...
Maybe really choose the easiest way and make new one?
Anyway, maybe someone wiser can help and do it if there is nothing to do :)
Maybe for somebody else will be useful...
Here is image how I have imagined
Here is LIVE DEMO
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<ul class="nav navbar-nav" style="display:inline-block;float:right;position:relative;right:70px;">
<li class="dropdown">
Second <span class="caret"></span>
<ul class="dropdown-menu">
<li>Second-1</li>
<li>Second-2</li>
<li>Second-3</li>
</ul>
</li>
</ul>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" style="right:-60px;">
<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" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>First</li>
<li class="dropdown">
Second <span class="caret"></span>
<ul class="dropdown-menu">
<li>Second-1</li>
<li>Second-2</li>
<li>Second-3</li>
</ul>
</li>
<li>Third</li>
<li>Fourth</li>
<li class="dropdown">
Fifth <span class="caret"></span>
<ul class="dropdown-menu">
<li>Fifth-1</li>
<li>Fifth-2</li>
<li>Fifth-3</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
This alignment will be ok as long as button is displayed a better behavior of the dropdown, when click it you could change the width property.
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
The admin bar that appears in top of the window in Django CMS when you log in to make changes on the site overlays the Bootstrap navbar.
This is what it looks like:
As you can see the navbar is being overlapped by the toolbar while the rest of the site moves down to accommodate for the toolbar when it deploys.
Here is the HTML for the navbar:
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<a class="navbar-brand" href="index.html"><img src="img/EPG.jpg"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
APPLY
</li>
<li class="dropdown">
RESOURCES <b class="caret"></b>
<ul class="dropdown-menu">
<li>
Calander
</li>
<li>
People
</li>
<li>
ETC
</li>
<li>
ETC
</li>
<li>
ETC
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
How can I make the navbar adjust like the rest of the page when the django CMS toolbar appears?
Since they're both fixed to the top, they're always going to be fighting for that position. According to the docs, the toolbar attaches a .cms-toolbar-expandedclass to the html tag when it's open. You could add a bit of CSS that pushes down your navbar when the CMS toolbar is opened. Something like:
.cms-toolbar-expanded body, .cms-toolbar-expanded .navbar-fixed-top{
top:30px;
}
Edited to add the body tag, because depending on your layout, pushing the navbar down could mess up the symmetry of the rest of your site. It's minor but it would bother me visually.
So I am trying to change the color of the navbar. I have worked with HTML and CSS, but havent really made design changes before. And for some reason I cannot figure out for the life of me how to make changes to this html/css template I downloaded.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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" href="index.php">CandyCode</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>About
</li>
<li>Services
</li>
<li>Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
I am not really sure what to change in the CSS. Essentially I would like to change the navbars color to #77bbb0. I can show more code, but I think for the sake of clarity, you can check out the code here: http://startbootstrap.com/blog-home.
Thank for helping a design noob!
The easiest way is to give the HTML element in question an id and then add the CSS rule:
#the_id_i_gave_it { background:#77bbb0; }
However, if you can't or don't want to edit the markup, you can chain together the various classes on the element to give your rule high specificity:
.navbar.navbar-inverse.navbar-fixed-top { background:#77bbb0; }
As long as those classes don't change that should be specific enough to get just the div you want and no others.