CODEWITHSUNDEEP
htmltwitter-bootstrapnavigationnavbar
Gina
Gina

Reputation: 13

Nav bar links to internal html pages not working

I built a site for one of my clients with this template - http://www.templatemo.com/tm-395-urbanic

The site is http://www.southholstonriverlodge.com

They recently wanted me to change up the nav bar. It previously was only linked to anchors within the template which worked fine. I tried changing it to link to other pages ex. 

<li class="active"><a href="index.html" title="Home">HOME</a></li>

and they are no longer working. The nav links that go to anchors still work and the links that go to external pages work. And I can right click and open the pages in new tabs, but directly clicking does nothing. I've tried so much to fix this and just can't get anywhere. Ideas? I'm at a point of not even knowing where to look. I'm fairly new with bootstrap and I was working on implementing a dropdown, thinking that was the issue, removed it. I'll include some code snippets but I'm not even sure where to begin. 

.nav > li > a {
    padding: 10px 10px;
}

.nav > li > a:hover,
.nav > li > a:focus {
    background-color: #648c33;
    color:#fff;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    background-color: #648c33;
    color:#fff;
}


.nav > li > a {
    color: #929292;
}
.navbar-default {
    background-color:#fff;
    border:none;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: #005200;
    color: #fff;
}

.navbar {
    margin-bottom: 0px;
}
<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="/Templates/SHRL Template.dwt" codeOutsideHTMLIsLocked="false" --><head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>South Holston River Lodge | World Class Fishing | Luxury Lodging</title>
<!-- InstanceEndEditable -->
<meta name="keywords" content="south holston river lodge, lodge, soho, tennessee fly fishing, tennessee lodge, south holston, fly fishing, float, wade, guide, all inclusive, lodging, vacation, trips, cabins, home, bristol, tennessee, tn, destination, eastern tennessee" />
<meta name="description" content="South Holston River Lodge is located in Eastern Tennessee. It is a destination fly fishing lodge with excellent year round fishing." />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-51645845-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-51645845-1');
</script>
<!--

Urbanic Template

http://www.templatemo.com/tm-395-urbanic

-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link rel="shortcut icon" href="PUT YOUR FAVICON HERE">-->
<link rel="shortcut icon" href="images/favicon.ico?v1.ico">
<!-- Google Web Font Embed -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="js/colorbox/colorbox.css"  rel="stylesheet" type='text/css'>
<link href="css/templatemo_style.css"  rel="stylesheet" type='text/css'>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<!-- InstanceParam name="OptionalRegion1" type="boolean" value="true" -->
</head>
    
    <body>

        <div class="templatemo-top-bar" id="templatemo-top">
            <div class="container">
                <subheader>
                    <div id="phone" class="pull-left">
                            <img src="images/phone.png" alt="phone">
                             877.767.7875
                    </div>
					<div id="email" class="pull-right">
                            <img src="images/email.png" alt="email" title="Email Icon"> [email protected]
                    </div>
                </subheader>
            </div>
        </div>
        <div class="templatemo-top-menu">
            <div class="container">
                <!-- Static navbar -->
                <div class="navbar navbar-default" role="navigation">
                    <div class="container">
                        <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                </button>
                                <a href="index.html" class="navbar-brand"><img src="images/sohorl.png" alt="SHRL Logo" width="200" title="South Holston River Lodge" /></a>
                        </div>
						
                        <div class="navbar-collapse collapse" id="templatemo-nav-bar">
                            <ul class="nav navbar-nav navbar-right" style="margin-top: 40px;">
                              <li class="active"><a href="index.html" title="Home">HOME</a></li>
                              <li><a href="about.html">ABOUT US</a></li>
                                <li><a href="#templatemo-blog" title="Services">SERVICES</a></li>
                                <li><a rel="nofollow" href="https://www.flickr.com/photos/138605916@N04/albums" class="external-link" title="Photo Gallery" target="_blank">GALLERY</a></li>
								<li><a rel="nofollow" href="https://southholstonriverlodge.wordpress.com/" class="external-link" title="Fishing Report" target="_blank">FISHING REPORT</a></li>
                                <li><a href="#templatemo-contact" title="Contact">CONTACT</a></li>
                            </ul>
                        </div>
						
                     
						<!--/.nav-collapse -->
                    </div><!--/.container-fluid -->
                </div><!--/.navbar -->
            </div> <!-- /container -->
        </div>

Upvotes: 1

Views: 3473

Answers (2)

sn3p
sn3p

Reputation: 746

I noticed id="templatemo-nav-bar" in your template, and when I search the web for this I find people suggesting adding class="external" to the link:

<a href="index.html" title="Home" class="external">HOME</a>

I can't test this myself because your example is probably missing some javascript. Hope it helps :)

EDIT

Looking at the template script, it might actually be class="external-link":

<a href="index.html" title="Home" class="external-link">HOME</a>

This should unbind the click event handler, allowing the link to work as expected.

Upvotes: 0

M. Aho
M. Aho

Reputation: 343

Looking at the template you linked, it looks like clicking on the links does a smooth scroll down the page instead of using the browser's native anchor link functionality. This means there's some javascript handling this and overriding the browser's default behavior. In the template's javascript here we see this section:

// scroll to specific id when click on menu
$('.templatemo-top-menu .navbar-nav a').click(function(e){
  e.preventDefault(); 
  var linkId = $(this).attr('href');
  scrollTo(linkId);
  if($('.navbar-toggle').is(":visible") == true){
    $('.navbar-collapse').collapse('toggle');
  }
  $(this).blur();
  return false;
});

It's overriding the browser's default link behavior using e.preventDefault() and then using scrollTo() to move the page. Unfortunately I think this means you're pretty much stuck with this behavior unless you can modify the javascript or modify the template extensively.

Upvotes: 0

Related Questions