Bootstrap navbar: Adding link and preventDefault() workaround.

[Emil]

Hello,

I am working on a Bootstrap site with the Navbar component. One section has three subnav items that are always exposed on large viewports (in a separate container below .navbar), so there is no need to show the dropdown. Instead, a click on the main item should bring the user to the first subnav page.
On small (mobile) screens, when the hamburger nav shows, those subnav items are hidden; therefore they need to be part of the dropdown.

I have worked out the part of showing/hiding the items, but have trouble with the main link because Bootstrap.js (actually I think dropdown.js) runs an event.preventDefault() on the main nav item.

Not sure how to describe the problem… just have a look at this code sample on CodePen.
on line 53 you will see my attempt to use window.location, but unfortunately this persists when the subnav shows for small screens.

Help is greatly appreciated.
-Emil

edit: Changed post title to be more descriptive for the issue

[Emil]

Nobody? Maybe this question works better:

First I am calling window.location like this

dropdownToggle.click( function(){
  window.location.href = aboutLink;
});

Later (in my case when the browser window is small) I do not want to navigate away when clicking on dropdownToggle. Is there a way to prevent window.location.href?

[Author]

Posts