Links not working in navbar (but working everywhere else on page!!) [Archive]

MCon

08-02-2015, 10:38 PM

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:

<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">

<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>


<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>
</div>
</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:

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!!!

Beverleyh

08-03-2015, 05:42 AM

for some reason my main links will only work if set up for anchor tags - not links to other pages within my site.Links ARE anchor tags. Anchor tags are sometimes called 'a' tags. They look like this: <a>, and (most of the time) have an href attribute - the value of which can be an URL or a hash (or a combination of both, amongst other things). What do you mean exactly?

If a hyperlink doesn't work, please describe in what way it doesn't work: maybe the page cannot be found (404 error)? Maybe a CSS issue where a style isn't being applied? A JavaScript issue where a smoothscroll isn't working upon navigation to a new page? Please be more specific.

if I change it to a div class like the logo image, it starts working.
What div class are you referring to? "header-logo" or one of the others? CSS alone shouldnt affect the behaviour of a hyperlink - well, only pointer-events, but I don't see any of those in the CSS you posted. Is that ALL the CSS? Maybe there is something else higher up in the cascade which is affecting things. We'd need to see the whole page to assess that.

Could be a JavaScript issue? If the addition of a class is changing behaviour (and bear in mind that we still don't know what behaviour that is because "works" is too vague), it could be something in a JavaScript file that is causing conflicts.

Please provide a link to your actual page or a reduced case example that exhibits said behaviour in something like JSBin, Codepen or JSFiddle.