Nav URL&#38;#039;s

Topic: Nav URL's

rrrankin pro asked 6 years ago

When using anchor tags in nav like this all is well

<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav smooth-scroll mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#blog">Blog</a>
         </li>
    </ul>
</div>

When using urls in nav like this:

<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav smooth-scroll mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/blog">Blog</a>
         </li>
    </ul>
</div>

I receive the following error in console:

Uncaught Error: Syntax error, unrecognized expression: https://mysite.dev/blog
    at Function.Sizzle.error (jquery-3.1.1.js:1586)
    at Sizzle.tokenize (jquery-3.1.1.js:2238)
    at Sizzle.select (jquery-3.1.1.js:2665)
    at Function.Sizzle [as find] (jquery-3.1.1.js:890)
    at jQuery.fn.init.find (jquery-3.1.1.js:2921)
    at jQuery.fn.init (jquery-3.1.1.js:3031)
    at jQuery (jquery-3.1.1.js:98)
    at HTMLAnchorElement.<anonymous> (mdb.js:5738)
    at HTMLUListElement.dispatch (jquery-3.1.1.js:5201)
    at HTMLUListElement.elemData.handle (jquery-3.1.1.js:5009)

Add comment

Kamil Paciepnik free answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

Hi rrrankin, If you want to get the effect of redirecting to another page you should use class .smooth-scroll only to a exact link. Example:

<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav mr-auto">
        <li class="nav-item">
            <a class="nav-link" href="/blog">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link smooth-scroll" href="#blog">Blog</a>
         </li>
    </ul>
</div>

Regards

Add comment

rrrankin pro answered 6 years ago

0 0 Best answer

Removing smooth-scroll from from the <ul> class corrects the issue - even though it wasn't really an issue and was working as designed.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

User: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

rrrankin

Pro User 12Support score
4Questions 2Answers 0Snippets