My bootstrap navbar is loaded through a function call in $(document).ready. This function loads the navbar (in header.html) something like this:
function loadHeader(callback){
$.ajax({
url: "/resources/"+language+"/header.html",
async: true,
success: function (data) {
$('body').append(data);
if(callback){
callback();
}
},
dataType: 'html'
});
}
I've tried setting async=false, but the crawlers will still not pick up the links in the navbar (I've tried with fetch+render through Google search console, as well as through the crawler program Screaming Frog).
The strangest thing is that the navbar is loaded BEFORE several other dynamic page elements, which Google search console has no problem rendering.
Here is a preview of what my navbar (in header.html) looks like:
<nav class="navbar navbar-default navbar-fixed-top index-nav">
<div class="container" style="width:100%;">
<div class="navbrand">
<a class="navbar-brand page-scroll" href="/en/">
<img class="homelogo" src="/logos/company-Logo.png"/>
</a>
</div>
<ul class="nav navbar-nav navbar-left">
<li class="dropdown resourcesLI">
<a class="dropdown-toggle mousePointer" data-toggle="dropdown">Resources</a>
<ul class="dropdown-menu" role="menu">
<li class="Link">Page 1</li>
<li class="Link">Page 2</li>
</ul>
</li>
</ul>
</div>
</nav>
Why aren't my navbar links being picked up by crawlers?
Edit: it should be noted that I'm very new to SEO
Generally I've answered your question in other way in this post:
https://stackoverflow.com/a/38948082/6715875
But if I wana elaborate more for you, I would say to you in a briefly:
All contents which have been updated partially after that DOM loaded, won't be indexed by the search engine crawlers. In these case you can pick some soloutions up which I've mentioned in above link.
Regards.
Related
I am new to this area.
I build a navbar with bootstrap 3 and the "load"-function. If I want to use the back button of the browser, it does not work.
What do I have to do to make it work?
Here my simplified code:
index.html:
<nav class="navbar navbar-inverse navbar-fixed-top text-center">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
</div>
</nav>
Thanks Schulz
There is no easy way to do this. You would have to use the history object and change the URL every time you click on something that you want to come back to later.
Basically on click you don't only load the remote content but also update the URL. You would also have to use a hash (#) in URL so the page won't refresh. This implies creating a routing mechanism for your app.
I've following Bootstrap HTML code :
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="projects" class="dropdown"><a class="dropdown-toggle projects" data-toggle="dropdown" href="#"><span class="projects">Projects</span></a>
<ul class="dropdown-menu">
<li>List</li>
<li>Add new project</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Now I want to hide the drop-down menu using jQuery code i.e. I want to hide the drop-down menus List and Add new project.
I want this to be done in document-ready function. You can add the specific ids to the suitable tag to make the thing work.
Thanks.
$( document ).ready(function() {
$("ul.dropdown-menu").children().hide();
});
I'm using Bootstrap 3.3.4
I've following HTML code.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<ul class="nav navbar-nav">
<li class="projects" class="dropdown"><a class="dropdown-toggle projects" data-toggle="dropdown" href="#"><span class="projects">Projects</span></a>
<ul id="projects-menu" class="dropdown-menu">
<li>List</li>
<li>Add new project</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Now using jQuery I'm hiding the sub-menus coming under main-menu 'Projects' as follows :
$(document).ready(function() {
$("ul#projects-menu").children().hide();
});
The menu gets hide but a small white background appears beneath the menu which I don't want. For better understanding of my issue please refer below image. In this image you can see the white background appearing beneath the 'Projects' menu.
Can someone please help me in this regard?
Thanks.
Try the following:
$(document).ready(function() {
$("ul#projects-menu").hide();
});
hide the meniu not the li's
$('#projects-menu > li > a').on('click', function() {
$(this).children('#projects-menu').hide();
});
also you can like this
$(this).find("#projects-menu > li").hide();
I've been trying for hours to get this working. Looked at several examples on starkoverflow. But I can't solve it. Some suggested that this should be added:
$(document).on('click','.navbar-collapse.in',function(e) {
if( $(e.target).is('a') && $(e.target).attr('class') != 'dropdown-toggle' ) {
$(this).collapse('hide');
}
});
But I have no idea where to add it. I tried adding it to bootstrap.js but it didn't work. I'm a novice, trying to put up a first website by learning to piece together one. This is the website that I'm editing: fotroviciliji.si. The bootstrap menu that appears on smaller devices won't close after a link has been clicked. I've looked at examples, even at those here that should be working, but don't. It stil doesn't close after clicking on a link in the menu. A user posted this fiddle of it supposedly working but when I try in Chrome, it just doesn't. The menu does not collapse after something has been selected. What am I doing wrong? This fiddle works but I'm too stupid to apply it to my website.
Please help!
It may not have worked because you included it in bootstrap.js but not in bootstrap.min.js which seems to take over on small screen sizes like mobile phones. Include your code at the bottom of the bootstrap.js and bootstrap.min.js files and the navbar should collapse after clicking/pressing a link to an internal anchor (whether you perform the action on a phone (bootstrap.min.js) or reduced window size on a tablet/desktop (bootstrap.js).
+function ($) {
'use strict';
$(document).on('click', 'navbar-collapse.in', function (e) {
if ($(e.target).is('a')) {
$(this).collapse('toggle');
}
});
}(jQuery);
The above code worked for me. I retrieved lines 2-7 from another forum and I can't remember where. The premise, as far as I understand from searching the net, is that the internal links don't refresh the page (in a one page website, for example) and the navbar will only collapse when it arrives at a new page. The above javascript code was created to fix the issue.
I've honesly been trying for a couple of hours. This is what works for me now, I added:
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a class="scroll hidden" href="#home" data-toggle="collapse" data-target=".navbar-collapse"></a></li>
<li class="dropdown">
PONUDBA<i class="fa fa-caret-down"></i>
<ul class="dropdown-menu">
<li><a class="scroll" href="#ponudba" data-toggle="collapse" data-target=".navbar-collapse">Čili omake</a></li>
<li><a class="scroll" href="#paste" data-toggle="collapse" data-target=".navbar-collapse">Čili paste</a></li>
<li><a class="scroll" href="#vlozeni" data-toggle="collapse" data-target=".navbar-collapse">Vloženi čiliji</a></li>
<li><a class="scroll" href="#ostalo" data-toggle="collapse" data-target=".navbar-collapse">Ostalo</a></li>
</ul>
</li>
<li><a class="scroll" href="#cenik" data-toggle="collapse" data-target=".navbar-collapse">CENIK</a></li>
<li><a class="scroll" href="#mesta" data-toggle="collapse" data-target=".navbar-collapse">PRODAJNA MESTA</a></li>
<li><a class="scroll" href="#kontakt" data-toggle="collapse" data-target=".navbar-collapse">KONTAKT</a></li>
<!-- <li><a class="scroll" href="#obrazec">OBRAZEC</a></li> -->
</ul>
</div><!--/.nav-collapse -->
To each menu item. The menu now colapses back on it's own after something is selected.
Is there a simple way to toggle the active link in a basic bootstrap navbar without writing any javascript?
Here's my navbar
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container">
<div>
<ul class="nav" ng-show="isAuthenticated">
<li class="active">Create Activity</li>
<li>Manage Activities</li>
<li>Super User</li>
</ul>
</div>
</div>
</div>
</div>
Well, im not 100% sure (im not that good with javascript), but you could do a few if statements.
if($url=="/activity/create") {echo "class='active'";}
This is the php syntax. Try something out with JS.
BTW you are using node.js which is JS, so you wouldnt be able to do it without JS.
You can set the class attribute to "active" via JS. I do this with an external script, here's a snippet:
setActive();
function setActive() {
activePath = document.location.pathname; //get the url of current page
switch(activePath) {
//evaluate activePath (more efficient than nested IFs)
case "/uptime/":
//if current page path is /uptime/
document.getElementById('navuptime').className = "active";
//set class of element with ID='navuptime' to "active"
break;
//break out of switch statement, we're all done
case "/uptime/domain/":
//if current page path is /uptime/domain/
document.getElementById('navuptime').className = "active";
//just like above, set class of element with ID='navuptime' to "active"
document.getElementById('navdomain').className = "active";
//also set the nested navbar element class attribute to "active"
break;
//break out of switch statement, we're all done
default:
//used if no match was found
break;
//i don't do anything if no match was found
}
When adding a page to the site you have to update the script as well, but it's just one more case inside the switch statement.
Here is a snippet of my navbar HTML:
<div class="collapse navbar-collapse navbar-ex1-collapse nudge-left">
<ul class="nav navbar-nav navbar-right">
<li><a id="navwifi" href="/wifi">Guest WiFi</a></li>
<li class="dropdown"><a id="navuptime" class="dropdown-toggle" data-toggle="dropdown" href="#">Uptime Monitoring<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a id="navwan1" href="/uptime/wan1">WAN 1 Connection</a></li>
<li><a id="navwan2" href="/uptime/wan2">WAN 2 Connection</a></li>
<li><a id="navdomain" href="/uptime/domain">Domain</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
You can see each navbar element has a unique ID for the JS to update. This method is manageable for my small site (less than 50 pages).
If page urls such as domain.com/uptime/page.html are used the switch statement won't find a match as it's written above... document.location.pathname would return /uptime/page.html.
I always use an index.html file in each directory to keep the URL clean and my visitors only have to type domain.com/uptime.