Bootstrap clickable menu on hover

I have customized using jquery the bootstrap navigation whereby instead of clicking to enable the dropdown menu you can simply hover. However, I am trying to get it so the first menu is clickable as currently it is not. For example currently BLOG isn't clickable but I would like it to be. The other categories are clickable.

Does anyone have any experience in this on bootstrap? It is being built on wordpress. The jquery I used to allow the menu to show on hover is:

jQuery(document).ready(function() {

    var mq = window.matchMedia('(min-width: 768px)');
  if (mq.matches) {
    jQuery('ul.navbar-nav li').addClass('hovernav');
  } else {
    jQuery('ul.navbar-nav li').removeClass('hovernav');
  };
    /*
    The addClass/removeClass also needs to be triggered
  on page resize <=> 768px
    */
  if (matchMedia) {
    var mq = window.matchMedia('(min-width: 768px)');
    mq.addListener(WidthChange);
    WidthChange(mq);
  }
    function WidthChange(mq) {
    if (mq.matches) {
      jQuery('ul.navbar-nav li').addClass('hovernav');
    } else {
      jQuery('ul.navbar-nav li').removeClass('hovernav');
    }
  };


});

The css is:

@media (min-width: 768px) {
    .navbar-nav .caret {
        display:none;
    }

    .navbar-nav .open ul {
        display:none;
    }

    .navbar-default .navbar-nav > .open > a,.navbar-default .navbar-nav > .open > a:hover,.navbar-default .navbar-nav > .open > a:focus,.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:hover,.navbar-default .navbar-nav > .active > a:focus {
        color:#555;
        background:none;
    }

    .navbar-inverse .navbar-nav > .open > a,.navbar-inverse .navbar-nav > .open > a:hover,.navbar-inverse .navbar-nav > .open > a:focus,.navbar-inverse .navbar-nav > .active > a,.navbar-inverse .navbar-nav > .active > a:hover,.navbar-inverse .navbar-nav > .active > a:focus {
        color:#969696;
        background:none;
    }

    .navbar-default .navbar-nav > .hovernav > a {
        color:#555;
    }

    .navbar-inverse .navbar-nav > .hovernav > a {
        color:#969696;
    }

    .navbar-default .navbar-nav > .hovernav:hover > a,.navbar-default .navbar-nav > .hovernav:hover > a:hover,.navbar-default .navbar-nav > .hovernav:hover > a:focus {
        color:#333;
        background:transparent;
    }

    .navbar-inverse .navbar-nav > .hovernav:hover > a,.navbar-inverse .navbar-nav > .hovernav:hover > a:hover,.navbar-inverse .navbar-nav > .hovernav:hover > a:focus {
        color:#F7F7F7;
        background:transparent;
    }

    .navbar-default .navbar-nav > li:hover {
        background:#e7e7e7;
    }

    .navbar-inverse .navbar-nav > li:hover {
        background:#080808;
    }

    .navbar-nav .hovernav:hover > .dropdown-menu {
        display:block;
    }
}