I have cloned this template :
http://ironsummitmedia.github.io/startbootstrap-grayscale/
When you scroll-down, notice that the background-color of the header-link(About, Download, contact) on top will change to gray color (depending upon the section where you have scrolled).
I have made some small changes to the header wherien I am including font-awesome icons. The color effect has however stopped working.
<ul class="nav navbar-nav nav-advance-options hide-this-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#flax">
<i class="fa fa-leaf"></i>
</a>
</li>
<li>
<a class="page-scroll" href="#moist">
<i class="fa fa-heart"></i>
</a>
</li>
<li>
<a class="page-scroll" href="#designs">
<i class="fa fa-paw"></i>
</a>
</li>
</ul>
http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav
I can't tell exactly where your javascript has gone wrong by the assets you've provided, but the issue is that on the font awesome icon version of the site (http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav), the active class is not being added to the menu li elements upon scroll, whereas it is being added to the li elements on the demo site (http://ironsummitmedia.github.io/startbootstrap-grayscale/).
solved the issue by removing the following lines from second ul:
<li class="hidden">
</li>
I don't know why this solves the issue yet. If someone understands, kindly explain
Related
I am making a website using HTML and I wanted to put one navigation bar on every page so I created a separate HTML for navigation but I don't know how to put it on every page. this is a small part of my navigation HTML code what do I have to do to put it on every page. and I am not meant to use PHP.
<body>
<div id="nav" class="menu">
<ul>
<li class="active"><i class="fa fa-home" aria-hidden="true"></i>Home </li>
<li> <i class="fa fa-user" aria-hidden="true"></i>Profile
<div class="sub-menu-1">
<ul>
<li>Daniel</li>
<li>Robel</li>
<li>Yohanes</li>
</ul>
</div>
</li>
<li><i class="fa fa-code" aria-hidden="true"></i>Interest
<div class="sub-menu-1">
<ul>
<li>Daniel</li>
<li>Robel</li>
<li>Yohanes</li>
</ul>
</div>
I think you should use iframe (tag of HTML)
which shows one HTML page's O/P on other else change only 2nd iframe's O/P
Take only navigation bar in first iframe and all other HTML pages in 2nd iframe
My project is using a simple toggle menu and I need to exclude the last link (#blog) from the click handler doing scroll animations and URL modifications.
Here is HTML:
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
About
</li>
<li>
Skillset
</li>
<li>
Portfolio
</li>
<li>
Contact
</li>
<li>
<a id="blog" href="#https://anzudev.blogspot.com/" target="_blank" class="nav-links">Blog</a>
</li>
</ul>
</nav>
And here jQuery:
$('nav a[href*="#"]').not("#blog").on("click", function () {
$("html, body").animate({scrollTop: $($(this).attr("href")).offset().top }, 1000);
});
I've added a jQuery click handler to all nav-links to smoothly scroll to that section and modify the URL accordingly. However, I need to exclude the #blog nav-link, since that redirects to an external site. I've tried the following selectors:
- $('nav a[href*="#"]').not("#blog")
- $('nav a[href*="#"]').not(":last")
But upon clicking "#blog" will still attempt to go to myurl.com/#https://anzudev.blogspot.com/ instead of an external link.
I have a simple mockup of my code here on Codepen for testing.
Any advice on what I am doing wrong here? Cheers!
You just have to delete the # from the beginning of the blog link URL:
https://anzudev.blogspot.com/
instead of
#https://anzudev.blogspot.com/
Anything starting with # will be attached to the end of current page URL.
Working edited CodePen: https://codepen.io/liquidmetalrob/pen/gObzvOg?editors=1010
Your href link on your blog should just be:
"https://anzudev.blogspot.com/"
and not
"#https://anzudev.blogspot.com/"
Since I coded the portfolio page with Bootstrap 4, I followed the documentation on Scrollspy in its latest alpha version. But it still doesn't work.
What I want to achieve:
Much like the example in the documentation, as I scroll the page, to have the items changes its color as I scroll down, according to section I am in. Also, the navbar should remain fixed-top as it is.
This is a working example in Bootstrap 4 and it seemingly looks like my code, but I can't get around my head why it doesn't work in mine.
My navbar code:
<a class="navbar-brand navfont" href="/">portfolio.</a>
<div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about"><i class="fa fa-user-circle-o" aria-hidden="true"></i> about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio"><i class="fa fa-picture-o" aria-hidden="true"></i> portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact"><i class="fa fa-envelope-o" aria-hidden="true"></i> contact</a>
</li>
</div>
</ul>
I tried:
Deleting the a stylings in CSS
adding the class "active" and styling it
adding a:focus in CSS
Check the whole thing on CodePen.
Thank you guys!
Looks like you've missed 2 small things, first thing the nav need the id of navbar1, this is from the body data-target="#navbar1" so the nav would become:
<nav class="navbar navbar-toggleable-md fixed-top" style="background-color: #fc7a57;" id="navbar1">
After that this will add a class on a.nav-link called active, on so you will need a class like
.active { color:#fff }
Here a codepen of my working copy of your code
I am doing something similar. You can can look at this fork of your code to see the JS.
All in your HTML was I added class="section" to tell the jQuery when to add those active classes. Let me know if this works for you.
If you go to this dev site (it's a Joomla site using bootstrap) and view on 1023px wide screen or smaller (or any smartphone), there is a hamburger menu. If you click it, it drops down a menu and if you click "Learn More", it jumps to a form (because it's really just an anchor). However, the dropdown menu stays open (because it's not going to a new page I guess).
Is there an easy way to add some code that basically says "any dropdown menu click should CLOSE the dropdown menu"?
Here is the code for the menu when it's expanded (first nav tag is probably all that's important)...
<nav class="t3-navbar-collapse navbar-collapse collapse in"><ul class="nav navbar-nav level0">
<li>
Home
</li>
<li class="dropdown">
Features <b class="caret"></b>
<ul class="level1 dropdown-menu"><li>
Scheduling & Routing
</li><li>
Billing & Invoicing
</li><li>
Mobile Workforce
</li><li>
Office Staff Persona
</li><li>
Owner Persona
</li><li>
Field Worker Persona
</li></ul></li>
<li class="dropdown">
Industries <b class="caret"></b>
<ul class="level1 dropdown-menu"><li>
Cleaning
</li><li>
Lawn
</li><li>
Pest
</li><li>
HVAC
</li></ul></li>
<li>
Pricing
</li>
<li class="active dropdown">
About <b class="caret"></b>
<ul class="level1 dropdown-menu"><li class="current active">
Resources
</li><li>
Support
</li><li>
Security
</li></ul></li>
<li class="">
Learn More
</li>
<li>
Contact
</li>
<li>
Log In
</li>
</ul></nav>
And then when it collapses again, the classes in the nav tag look like this...
<nav class="t3-navbar-collapse navbar-collapse collapse" style="height: 1px;">
So it looks like that class of "in" needs to go away. Therefore, I am trying this jquery, but it isn't working. Shouldn't this work?
jQuery(function($) {
$("li a").click(function() {
$("nav.t3-navbar-collapse").removeClass( "in" );
});
});
Sorry for the bad luck on the first question, I actually just did this recently so I have a snippet on hand for you.
Basically what you want to tell the code to do is close the nav when you click an anchor, so you target the a and use a slideUp property.
$(document).ready(function(){
$("a").click(function(){
$("Your_Nav_ID").slideUp('slow');
});
});
I've created two dropdown using navbar-right.
Here's the fiddle for it.
Issue is... It is working fine in desktop and large screens.
If I resize the browser window. The dropdown gets in a list view with the entire width of the screen when re-sized.
Re-size the result window and you'll come to know my problem.
Help me to overcome this.
Thanks in advance.
This isn't really the way to use a Bootstrap navbar. The idea of the navbar is that it collapses down on mobile, which is what you're seeing happening here. Except, in the Bootstrap navbar, you are supposed to put some containers with specific class names and a <button> etc. You're code just seems to be using navbar-right for the sake of floating it right.
Try this instead. It's 1 list, each <li> has a dropdown. There's no navbar classes. Note that I've added the class nav. This just gives the <a> some padding and colouring on hover etc. You can remove that class and style as required. I also added the class 'pull-right' which is Bootstrap's helper class for floating right.
<div>
<ul class="pull-right nav">
<li class="dropdown">
<i class="glyphicon glyphicon-comment"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="dropdown">
<i class="glyphicon glyphicon-home"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li>One</li>
<li> Two</li>
<li> Three</li>
</ul>
</li>
</ul>
</div>
Some CSS
div > ul > li {
float: left;
}
This won't be responsive like the navbar, but that seemed to be the problem in the first place.
DEMO