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>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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments