Top Menu Not Working

HTML & CSS
1

The template I downloaded has a top menu but this is not working. The code is quite different that what I am use to, so I have been unable to resolve. Any ideas welcome.

Original menu code:

  <body data-spy="scroll" data-target="#navbar" data-offset="120">
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>    <![endif]-->
    <div id="header">
      <div class="bg-overlay"></div>
      <div id="menu" class="navbar navbar-inverse navbar-fixed-top" 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> <i class="ion-navicon"></i>
            </button> <a class="navbar-brand" href="#">
              <h2>PilatEs</h2>
            </a> </div>
          <!-- navbar-header -->
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#header">Home</a></li>
              <li><a href="#video">Video</a></li>
              <li><a href="#story">Story</a></li>
              <li><a href="#gallery">Gallery</a></li>
              <li><a href="#footer">Footer</a></li>
            </ul>
          </div>
          <!--/.navbar-collapse --> </div>
        <!-- container --> </div>
      <!-- menu -->

The link is: https://www.thepowersofcreation.com/index2.html
My modified page is: https://www.thepowersofcreation.com

The menu becomes a drop down on a mobile, but this also doesn’t work.

Any ideas for what I’m missing would be most welcome. Thank you

2

Clicking any menu item produces the following error in the console:

Error: Syntax error, unrecognized expression: https://www.youtube.com/channel/UCxrj8X9BqxgCB_mTB4qPufQ

Apparently the script is trying to use the href attribute as a selector to find the target element and scroll it into view. So you’ll have to link to an element on the same page, e.g. #video (like in the snippet you posted here).

1 Like
3

I really appreciate your reply, thank you so much.
I guessed what you explained is what the original template menu was trying to do, but that wouldn’t work either. That is index2.html.
How can I change the format to link to external pages? I tried deleting various commands without success in achieving that. index.html was what I tried.

 <body data-spy="scroll" data-target="#navbar" data-offset="120">
    <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>    <![endif]-->
    <div id="header">
      <div class="bg-overlay"></div>
      <div id="menu" class="navbar navbar-inverse navbar-fixed-top" 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> <i class="ion-navicon"></i>
            </button> <a class="navbar-brand" href="https://www.powersofcreation.com/"
              target="_blank">
              <h2>The Powers Of Creation</h2>
            </a> </div>
          <!-- navbar-header -->
          <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="https://www.youtube.com/channel/UCxrj8X9BqxgCB_mTB4qPufQ"
                  target="_blank">Videos</a></li>
              <li><a href="Links.html">Links</a></li>
              <li><a href="Legal.html">Legal</a></li>
              <li><a href="Contact.html">Contact</a></li>
            </ul>
          </div>
          <!--/.navbar-collapse --> </div>
        <!-- container --> </div>
      <!-- menu -->

I am not sure what will affect the drop-down menu on mobiles.

4

Well it seems that this menu is designed as a mere in-page navigation. The part responsible for this is in your main.js ll. 88 - 95; you might either delete that block altogether, or modify it in the following way so that you can follow external links too while still doing that scrolling thing when navigating within the same document:

jQuery('.nav > li > a, #logo a').click(function(e) {
  var href = e.target.getAttribute('href');

  // If the href doesn't start with a hash, do nothing
  if (href[0] !== '#') {
    return;
  }
  
  // Otherwise prevent following the link and scroll
  // to the corresponding element instead
  e.preventDefault();

  jQuery.scrollTo(href, 400, {
    offset:-(jQuery('#header #menu').height()), axis:'y'
  });
});
2 Likes
5

Thank you m3g4p0p your advice is really welcome, I had no idea how to resolve the issues with the original menu.
I have replaced the lines in the main.js as you recommended.
Everything is working well know.

1 Like
6

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