Navbar-spy on BootStrap 3 not allowing external links

Question

Been trying to add external links at the end of my navbar (such as Blog), and an additional dropdown linking to other .html files, but it just won't work.

Here's the code. What should I modify to allow these non #links ?

<div id="navbar-section" class="navbar navbar-static-top">
  <div class="container">

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

    <div id="navbar-spy" class="nav-collapse collapse navbar-responsive-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#home"><i class="icon-home"></i></a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Infos <span class="caret"></span></i></a>
              <ul class="dropdown-menu">
                <li class="nav-header">Menu 1</li>
                <li>
                  <a href="external1.html">external 1</a>
                </li>
                <li>
                  <a href="external2.html">external 2</a>
                </li>
                <li class="nav-header">Menu 2</li>
                <li>
                  <a href="external3.html">external 3</a>
                </li>
                <li>
                  <a href="external4.html">external 4</a>
                </li>
                </li>
              </ul>
        </li> 
    </div>
  </div>
</div>

By the way, Dologan gave a hint (maybe?) on another post dealing with a slight different issue, but I'm not sure how to add this so it can solve my problem.

Link here : How to add smooth scrolling to Bootstrap's scroll spy function

Thanks for your appreciated time !

-- UPDATE --

I found where the problem was coming from, this piece of code in a custom.js file :

$( '#navbar-spy' ).off( 'click' ).on( 'click', 'a', function( e ) {         

            e.preventDefault();

            var elmHash = $( this ).attr( 'href' );
            var elmOffsetTop = Math.ceil( $( this.hash ).offset().top );
            var windowOffsetTop = Math.ceil( $(window).scrollTop() );

            if( elmOffsetTop != 0 ) {
                elmOffsetTop = elmOffsetTop - 70;
                if( windowOffsetTop == 0 ) {
                    elmOffsetTop = elmOffsetTop - 70;
                }
            }

            //console.log( $( this ).attr( 'href' ) );              
            $( 'html:not(:animated), body:not(:animated)' ).animate({ scrollTop: elmOffsetTop }, 1100 );                                              

        });

Commenting the whole section solves my problem, however i'm losing the nice scrolling effect. Tried a few things, but I can't get to make the external link AND the scrolling effect working.

Any ideas ?

score 1 · Accepted Answer · answered Sep 18 '13 at 08:53

Your question don't make clear what your problem is. External links don't have a hash so elmOffsetTop = Math.ceil( $( this.hash ).offset().top ); will give an error.

Add if(!$( this ).attr( 'href' ).match(/^#/)) return; at the start of your javascript to prevent this error:

$( '#navbar-spy' ).off( 'click' ).on( 'click', 'a', function( e ) {         

            if(!$( this ).attr( 'href' ).match(/^#/)) return;  
            e.preventDefault();

            var elmHash = $( this ).attr( 'href' );
            var elmOffsetTop = Math.ceil( $( this.hash ).offset().top );
            var windowOffsetTop = Math.ceil( $(window).scrollTop() );

            if( elmOffsetTop != 0 ) {
                elmOffsetTop = elmOffsetTop - 70;
                if( windowOffsetTop == 0 ) {
                    elmOffsetTop = elmOffsetTop - 70;
                }
            }

            //console.log( $( this ).attr( 'href' ) );              
            $( 'html:not(:animated), body:not(:animated)' ).animate({ scrollTop: elmOffsetTop }, 1100 );                                              

        });

score 0 · Answer 2 · edited Jul 09 '15 at 21:41

0

Don't remove the whole code since you will lose the whole scrolling animation, it is enough to just not call the function e.preventDefault();,remove it and everything will be OK.

edited Jul 09 '15 at 21:41

KAD

10,972
4
31
73

answered Jul 09 '15 at 16:10

Mouajeeb Oman

1
1

Navbar-spy on BootStrap 3 not allowing external links

2 Answers2