Results 1 to 2 of 2

Thread: Links not working in navbar (but working everywhere else on page!!)

  1. #1
    Join Date
    Aug 2015
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default 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!!!
    Last edited by Beverleyh; 08-03-2015 at 05:17 AM. Reason: format

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    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.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

Similar Threads

  1. Links not working
    By jickpictures in forum HTML
    Replies: 6
    Last Post: 07-29-2010, 08:28 PM
  2. Php Photo Album page links not working
    By breagan1 in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 12-19-2008, 12:53 AM
  3. Links Not Working?
    By monet1369 in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 05-03-2007, 06:25 PM
  4. CSS IE LINKs not working
    By learncss in forum CSS
    Replies: 3
    Last Post: 03-21-2006, 03:45 PM
  5. links not working in script
    By mike444 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-26-2006, 10:55 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •