Links not working in navbar (but working everywhere else on page!!)
Okay so help help help! I'm a designer, not a coder, and for some reason my main links will only work if set up for anchor tags - not links to other pages within my site. This is ONLY an issue in the header - and not even for the logo link within the header. Here is the html code:
Code:
<body id="wrapper">
<header class="top-header">
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-5 col-sm-4 header-logo">
<br>
<a href="index.html"> <h1 class="logo"><img src="assets/images/RHSLogotype.png"></h1></a>
</div>
<div class="col-md-8 col-md-offset-1 col-xs-7">
<nav class="navbar navbar-default">
<div class="container-fluid nav-bar">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-def" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#eas"> equine assisted services</a>
</li>
<li>
<a href="#other"> other services</a>
</li>
<li>
<a href="#team"> meet our team</a>
</li>
<li>
<a href="#community"> community + events</a>
</li>
<li>
<a href="#contact"> contact</a>
</li>
</ul>
</div><!-- /navbar-collapse -->
</div><!-- / .container-fluid -->
</nav>
</div>
</div>
</div>
</header>
I know that the issue lies somewhere in the <ul> tag, because if I change it to a div class like the logo image, it starts working. CSS is as follows:
Code:
header.top-header {
position: fixed;
z-index: 999;
width: 100%;
}
header.top-header2 {
position: fixed;
z-index: 1000;
width: 100%;
background: #490000;
}
.shows {
background: #490000;
transition: all .6s;
}
.shows .navbar-default {
/* background-color: #f8f8f8; */
/* border-color: #e7e7e7; */
padding-top: 20px;
transition: all .6s;
}
.shows .navbar-nav {
float: right;
margin: 15px 0 0;
color: white;
}
.shows h1.logo {
margin-top: 0px;
color: white;
}
h1.logo {
margin-top: 11px;
color: white;
display: inline-flex;
}
#header{
position: relative;
text-align: center;
padding: 0 !important;
}
.navbar-nav {
float: right;
margin: 50px 0 0;
color: white;
}
#header .top {
position:fixed;
top:0;
width: 100%;
padding: 30px;
height: auto;
z-index: 500;
-o-transition: all .5s;
-ms-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
transition: all .5s;
}
#header .top.solid {
background: #565555;
padding-top: 15px;
padding-bottom: 15px;
}
#header .top h1{
margin-bottom: 0;
}
#header .top.solid .toggleDrawer i {
padding-top: 8px;
}
#header .logo, #header .toggleDrawer{
font-family: 'Raleway', sans-serif;
color: white;
}
.logo-head{
font-family: 'Raleway', sans-serif;
font-size: 12px;
font-weight: 300;
}
.logo:hover{
text-decoration: none;
}
#header > .bottom {
position: absolute;
bottom: 75px;
text-align: center;
width: 100%;
}
#header > .bottom a img {
width: 50px;
}
#header > .bottom a {
opacity: 0.7;
}
#header > .bottom a:hover {
opacity: 1;
}
Any help would be greatly appreciated!!!
