Link not working

HTML & CSS
1

Hey guys. This is driving me nuts, and I know it must be something trivial. Just need a second pair of eyes. When I click on the “Products” link; it stays on the home page. Not sure why. Here is my code…

<div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="index.html">Home</a></li>
                <li id="active"><a href="products.html">Products</a></li>
                <li><a href="#">Textures</a></li>
                <li><a href="#">Application</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div><!--/.navbar-collapse -->
2

Are you clicking that link while on the products page? (Sorry… I have to ask…)

V/r,

:slight_smile:

AH… I just saw “home page”… nevermind… :smile:

It all looks correct, to me. Check your console for error messages.

3

@WolfShade Lol. Yeah, I tried it from the home page, it doesn’t work. I can manually open it from the file and view it just fine, and I can even jump from my products page to my home page just not vice versa.

4

Check console for messages. There might be an issue that isn’t immediately clear. Also, are you using any JavaScript or jQuery? Could there be something in a .js or .css file that might be preventing the default?? ( I ask because you give that LI an id of “active”. Should that be a class?? )

V/r,

:slight_smile:

5

Same here. I just dropped it into codepen and it looked fine, with the products link pointing at products.html as you’d expect. Do you have a products.html file created yet? It should either go to that file, or throw a 404 error.

6

@WolfShade I checked the console as I clicked the link and there was no message. My .js file is empty, and I don’t see anything in my css file that would effect my links. “active” is an ID, I double checked the css file.

7

I do have a products.html file created. I can manually pull up the webpage, I just cant link to it for some reason

8

For something as basic as that, I’m not sure it’ll make any difference, but have you tried it in any other browsers?

9

yes it still doesn’t work… Here is all the code…

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Custom Moulding | Products</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-theme.min.css">
        <link rel="stylesheet" href="css/main.css">

        <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
    </head>
    <body>
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="navbar-header">
              <a class="navbar-brand" href="#"><h1>Custom Moulding</h1> <span class="subhead">Architectual Shapes &amp; Coatings</span></a>
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <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>
          <div class="col-md-6">
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav navbar-right">
                <li><a href="index.html">Home</a></li>
                <li id="active"><a href="products.html">Products</a></li>
                <li><a href="textures.html">Textures</a></li>
                <li><a href="application.html">Application</a></li>
                <li><a href="contact.html">Contact</a></li>
              </ul>
            </div><!--/.navbar-collapse -->
          </div>
        </div> <!-- row -->
      </div> <!-- container -->
    </nav>

    <section class="container" id="products-page">
      <h2>Products</h2>
      <div class="row">
        <div class="col-md-3">
          <a href="#"><img src="img/window-trims.jpe" alt="Picture of Window Trims"></a>
          <h3>Window Trims</h3>
          <button class="btn btn-default" type="submit" id="trims-btn">Enter</button>
        </div>
        <div class="col-md-3">
          <a href="#"><img src="img/columns.jpe" alt="Picture of Columns"></a>
          <h3>Columns</h3>
          <button class="btn btn-default" type="submit" id="columns-btn">Enter</button>
        </div>
      </div> <!-- row -->
    </section> <!-- products page -->
    
    <footer class="container">
      <div class="row">
        <div class="col-md-12 text-center">
          <p>Copyright &copy; 2015 CUSTOM MOULDING INC, All Rights Reserved</p>
          <a href=""><img src="img/facebook-icon.png" alt="Link to Facebook" width="50px" height="50px"></a>
          <a href=""><img src="img/twitter.jpe" alt="Link to Twitter" width="50px" height="50px"></a>
          <a href=""><img src="img/GooglePlusLogo.png" width="50px" height="50px" alt="Link to Google"></a>
        </div>
      </div> <!-- row -->
    </footer> <!-- container -->       
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

        <script src="js/vendor/bootstrap.min.js"></script>

        <script src="js/main.js"></script>
    </body>
</html>

Here is the css


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@import url(https://fonts.googleapis.com/css?family=Ubuntu|Roboto+Slab:400,700);

body {
    font-family: "Roboto Slab", serif;
    line-height: 200%;
}

nav .navbar {
    background: rgb(234, 234, 234);
    margin-bottom: 50px;
}
.navbar {
    min-height: 100px;
    margin-bottom: 0;
}

nav  {
    height: auto;
    min-height: 100px;
}

.navbar .navbar-brand {
    color: #fff;
    height: auto;
}

.navbar-fixed-top {
    position: static;
}

.navbar .navbar-brand .subhead {
    font-family: "Ubuntu", sans-serif;
}

.navbar .navbar-brand:hover {
    color: #9d9d9d;
}

.navbar .navbar-nav li a {
    color: #fff;
}

.navbar .navbar-nav li a:hover {
    color: #9d9d9d;
}

.navbar-inverse .navbar-nav #active a {
    color: #9d9d9d;
}

ul.nav.navbar-nav.navbar-right {
    margin-top: 20px;
    font-family: "Times New Roman", sans-serif;
    font-size: 18px;
}

@media only screen and (max-width: 760px){
    .navbar-brand {
        padding: 15px 0 0;
    }
}

#featured {
    margin-top: 0;
}

h1 {
    margin-top: 0;
    margin-bottom:0;
    font-size: 1.8em;
    font-family: "Times New Roman", sans-serif;
}

h2 {
    font-family: "Times New Roman", sans-serif;
}


#about-page {
    margin-top: 30px;
}

footer {
    margin-top: 30px;
    margin-bottom: 20px;
}
10

what’s in main.js?

11

@DaveMaxwell Nothing. The file is empty.

12

I’ve just recreated the files, and mocked up a products.html, and for me the navigation is working as expected. It’s a bit slow getting there, but I’m pretty sure that’s down to the browser looking for some of the other (non-existent) assets, such as the Bootstrap files.

1 Like
13

@chrisofarabia Okay thank you. Maybe it’s just my computer. That is weird.

14

It’s not just your computer acting weird. We are not picking up on some other part of the picture. Are you using a copy of one page (the index page, perhaps) to simulate the “products” page? If so, is the menu code different on those two pages?.. Is #active assigned to different list items.

15

@ronpat Yes, I used a copy of my index.html file and just edited my products page. My #active is assigned to different li elements on the two pages though.

16

Do you have a link to a test site that we can use?

When I set up the index and product files with main.css in common, the links on both pages work as expected. In other words, I open both pages individually in separate tabs, observe that the title and menu highlighting look correct, then in the left tab (initially holding the index page) click the products menu item and am taken to the products page. Likewise, in the right tab (initially holding the products page) click on the index page and go there. I can then travel back to the original page by clicking the appropriate menu item. The links work for me.

Do you have a link to a test site that we can use?

It is a bit cumbersome to download the individual files from GitHub and build your site on my PC, especially if I include the bootstrap files (stuff that should probably be provided via a link to a CDN source for convenience during development rather than a local location).

If you do not have or cannot provide a test site, then drag and drop the HTML files that you are using for both pages and main.css into your next post. We need to be sure we are using the same files that you are and that our directory structures are the same.

17

Sorry, I dont have a link to the page. It is not live yet. Here is the index.html file…

<!doctype html>

Custom Moulding | Trims 
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/main.css">

    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"><h1>Custom Moulding</h1> <span class="subhead">Architectual Shapes &amp; Coatings</span></a>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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>
      <div class="col-md-6">
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">Home</a></li>
            <li><a href="products.html">Products</a></li>
            <li><a href="textures.html">Textures</a></li>
            <li><a href="application.html">Application</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div><!--/.navbar-collapse -->
      </div>
    </div> <!-- row -->
  </div> <!-- container -->
</nav>

<section class="container" id="trims-page">
  <h2>Trims</h2>
  <h4 class="text-center">Click on profile to view image in 3D</h4>
  <div class="row">
    <div class="col-md-2">
      <a data-toggle="modal" href="#myModal"><img src="img/trims/tr112.png" alt="Picture of Trim"></a>
    </div>
  </div> <!-- row -->
</section> <!-- products page -->

<footer class="container">
  <div class="row">
    <div class="col-md-12 text-center">
      <p>Copyright &copy; 2015 CUSTOM MOULDING INC, All Rights Reserved</p>
      <a href=""><img src="img/facebook-icon.png" alt="Link to Facebook" width="50px" height="50px"></a>
      <a href=""><img src="img/twitter.jpe" alt="Link to Twitter" width="50px" height="50px"></a>
      <a href=""><img src="img/GooglePlusLogo.png" width="50px" height="50px" alt="Link to Google"></a>
    </div>
  </div> <!-- row -->

  <div class="modal fade modal-lg center-block" id="myModal">
    <div class="modal-content">
      
    <div class="modal-body">
        <img src="img/trims/tr112-lg.png" alt="Picture of Trim" class="center-block img-responsive">
    </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

</footer> <!-- container -->       
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

    <script src="js/vendor/bootstrap.min.js"></script>

    <script src="js/main.js"></script>
</body>

here is the products.html file…

<!doctype html>

Custom Moulding | Products 
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/main.css">

    <script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"><h1>Custom Moulding</h1> <span class="subhead">Architectual Shapes &amp; Coatings</span></a>
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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>
      <div class="col-md-6">
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">Home</a></li>
            <li id="active"><a href="products.html">Products</a></li>
            <li><a href="textures.html">Textures</a></li>
            <li><a href="application.html">Application</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div><!--/.navbar-collapse -->
      </div>
    </div> <!-- row -->
  </div> <!-- container -->
</nav>

<section class="container" id="products-page">
  <h2>Products</h2>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam feugiat ante sit amet pellentesque facilisis. Integer blandit facilisis nisi, at cursus libero varius eget. Etiam sodales arcu ex, in rutrum nisi varius eu. Maecenas a bibendum risus. Pellentesque at luctus ante. Sed eleifend urna sit amet leo ultricies convallis. Sed eu accumsan massa, nec mattis turpis. Cras id blandit nisi. Cras porttitor, ligula id feugiat tincidunt, tortor nisi pharetra ligula, luctus aliquam ante massa viverra nisi. Suspendisse potenti. Praesent feugiat, mauris eu accumsan gravida, dolor velit efficitur magna, vel maximus libero sem eu leo. Vivamus porta viverra blandit. Fusce sodales, augue quis ornare scelerisque, ante tellus mollis massa, vitae ullamcorper nunc dui et justo. Integer imperdiet, arcu quis malesuada tincidunt, nulla urna gravida risus, non hendrerit tortor libero in sapien. Nulla tincidunt commodo risus. Ut ac ante vitae sem fermentum hendrerit.
  </p>
  <div class="row" id="products-grid">
    <div class="col-md-3 picture-spacing">
      <a href="#"><img src="img/window-trims.jpe" alt="Picture of Window Trims"></a>
      <h3>Window Trims</h3>
      <a class="btn btn-default btn-primary" href="trims.html" role="button" id="trims-btn">Enter</a>
    </div>
    <div class="col-md-3 picture-spacing">
      <a href="#"><img src="img/columns.jpe" alt="Picture of Columns"></a>
      <h3>Columns</h3>
      <a class="btn btn-default btn-primary" href="#" role="button" id="columns-btn">Enter</a>
    </div>
    <div class="col-md-3 picture-spacing">
      <a href="#"><img src="img/balusters.jpe" alt="Picture of Balusters"></a>
      <h3>Balusters</h3>
      <a class="btn btn-default btn-primary" href="#" role="button" id="columns-btn">Enter</a>
    </div>
    <div class="col-md-3 picture-spacing">
      <a href="#"><img src="img/brackets.jpe" alt="Picture of Brackets"></a>
      <h3>Brackets</h3>
      <a class="btn btn-default btn-primary" href="#" role="button" id="columns-btn">Enter</a>
    </div>
  </div> <!-- row -->
</section> <!-- products page -->

<footer class="container">
  <div class="row">
    <div class="col-md-12 text-center">
      <p>Copyright &copy; 2015 CUSTOM MOULDING INC, All Rights Reserved</p>
      <a href=""><img src="img/facebook-icon.png" alt="Link to Facebook" width="50px" height="50px"></a>
      <a href=""><img src="img/twitter.jpe" alt="Link to Twitter" width="50px" height="50px"></a>
      <a href=""><img src="img/GooglePlusLogo.png" width="50px" height="50px" alt="Link to Google"></a>
    </div>
  </div> <!-- row -->
</footer> <!-- container -->       
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

    <script src="js/vendor/bootstrap.min.js"></script>

    <script src="js/main.js"></script>
</body>

and here is the css file…

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@import url(https://fonts.googleapis.com/css?family=Ubuntu|Roboto+Slab:400,700);

body {
    font-family: "Roboto Slab", serif;
    line-height: 200%;
}

nav .navbar {
    background: rgb(234, 234, 234);
    margin-bottom: 50px;
}
.navbar {
    min-height: 100px;
    margin-bottom: 0;
}

nav  {
    height: auto;
    min-height: 100px;
}

.navbar .navbar-brand {
    color: #fff;
    height: auto;
}

.navbar-fixed-top {
    position: static;
}

.navbar .navbar-brand .subhead {
    font-family: "Ubuntu", sans-serif;
}

.navbar .navbar-brand:hover {
    color: #9d9d9d;
}

.navbar .navbar-nav li a {
    color: #fff;
}

.navbar .navbar-nav li a:hover {
    color: #9d9d9d;
}

.navbar-inverse .navbar-nav #active a {
    color: #9d9d9d;
}

ul.nav.navbar-nav.navbar-right {
    margin-top: 20px;
    font-family: "Times New Roman", sans-serif;
    font-size: 18px;
}

@media only screen and (max-width: 760px){
    .navbar-brand {
        padding: 15px 0 0;
    }
}

#featured {
    margin-top: 0;
}

h1 {
    margin-top: 0;
    margin-bottom:0;
    font-size: 1.8em;
    font-family: "Times New Roman", sans-serif;
}

h2 {
    font-family: "Times New Roman", sans-serif;
    margin-bottom: 20px;
}


#about-page {
    margin-top: 30px;
}

footer {
    margin-top: 30px;
    margin-bottom: 20px;
}

#products-page {
    margin-top: 30px;
}

#products-grid {
    margin-top: 20px;
}

.picture-spacing {
    margin-bottom: 30px;
}
18

Is that the code for the ‘home page’.

If so then why is there an active id on the products page link?

<li id="active"><a href="products.html">Products</a></li>

That would assume that you are already on the products page and I would usually disable the link on the current (active) page so that you don’t load the same page again and waste the users time and resources. Maybe you have a script that checks for the current id and disables the link (I use a css method to shim an element on top so it can’t be clicked).

Just a guess :smile:

20

@Jason_Delgado can you please share complete URL so that we can test that and will let you know. Because with this coding it is hard to understand the bug…

Thanks

21

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.