The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Bootstrap navbar: Adding link and preventDefault() workaround.

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #171164


    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.

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


    Nobody? Maybe this question works better:

    First I am calling window.location like this 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?

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.