CODEWITHSUNDEEP
twitter-bootstraplaravel
Hondaman900
Hondaman900

Reputation: 139

Bootstrap navbar off-page (non-anchor) links not working, but href in text is fine

This is driving me nuts. I'm using a Bootstrap template (in Laravel) and the navbar has some menu items linked to other pages and some linked to targets down the same page.

For some reason the links to outside the page are "disabled" i.e., clicking them does nothing (no error, no broken link, nothing). Using the same href in the content of the page works perfectly fine so the link/routing is fine. The page status bar shows a correctly formed link when the menu item is moused-over, but still it doesn't respond.

I can't find anything blocking them. I've tried several similar post suggestions, such as removing all class references to cnavbar-collapse, to no avail.

Any feedback or suggestions are very welcome. The "dashboard" menu item should link to Google, but it does nothing. The only links that work are to "#" anchors - they work. Here's the code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- 
        Boxer Template
        http://www.templatemo.com/tm-446-boxer
        -->
        <meta charset="utf-8">
        <title>MyNewSite</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="">
        <meta name="description" content="">

        <!-- animate css -->
        <link rel="stylesheet" href="css/animate.min.css">
        <!-- bootstrap css -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- font-awesome -->
        <link rel="stylesheet" href="css/font-awesome.min.css">
        <!-- google font -->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic,700,800' rel='stylesheet' type='text/css'>

        <!-- custom css -->
        <link rel="stylesheet" href="css/templatemo-style.css">

    </head>
    <body>
        <!-- start preloader -->
        <div class="preloader">
            <div class="sk-spinner sk-spinner-rotating-plane"></div>
         </div>
        <!-- end preloader -->
        <!-- start navigation -->
        <nav class="navbar navbar-default navbar-fixed-top templatemo-nav" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon icon-bar"></span>
                        <span class="icon icon-bar"></span>
                        <span class="icon icon-bar"></span>
                    </button>
                    <a href="#" class="navbar-brand">Divorce|Split</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right text-uppercase">
                                        <!-- ADDED BY ME  -->
                    @if (Route::has('login'))
                    <!-- <div class="top-right links">  -->
                        @auth
                            <li><a href="#home">Home</a></li>
                        @else
                            <li><a href="{{ route('login') }}">Login</a></li>
                            <li><a href="{{ route('register') }}">Register</a></li>
                        @endauth
                    <!-- </div> -->
                    @endif  
                        <li><a href="#feature">Features</a></li>
                        <li><a href="#pricing">Pricing</a></li>
                        <li><a href="#download">Get Started</a></li>
                        <li><a href="#contact">Contact</a></li>
                        <li>
                            <a href="http://www.google.com">Dashboard</a>
                        </li>
                        <li><a href="{{ url('/logout') }}"> Logout </a></li>
                    </ul>

                </div>
            </div>
        </nav>
        <!-- end navigation -->

Upvotes: 0

Views: 778

Answers (2)

Hondaman900
Hondaman900

Reputation: 139

After a lot of tedious dissection of the above code I found that the templatemo-nav class reference in the <nav> tag was to blame.

I stripped all css class references from all the tags and the links worked. I then put them back one at a time from the center-nested tag outwards until it broke again, and then by a process of elimination found the offending class reference. No idea what it does but the page looks and functions fine without it and the HREF links now work as expected.

Thanks Pravin for pointing me in the right direction.

Upvotes: 0

Pravin Poudel
Pravin Poudel

Reputation: 1536

I am writing here beacuse i dont have enough reputation to comment .

Your code is working for me ..

There must be something that is breaking this action ..

Please check if it is disabled by css or jquery .. externally by any plugin or externall css

Upvotes: 1

Related Questions