0

The website I'm building has a menu (i.e. navigation bar). The menu shows up on each page. I will have to edit the menu regularly, and so I wanted to have only one menu.html to edit that would be used on all pages, using jQuery's .load

I used this stackoverflow answer to successfully implement my centralized menu. In my index.html it looks like this:

<div id="menu-placeholder">

</div>

<script>
$(function(){
   $("#menu-placeholder").load("menu.html");
});
</script>

The menu is a standard .html that has CSS to back it up. They all worked perfectly before centralizing my menu.

However, I want my menu to be sticky, and this no longer works. I have a menu.css which implements a grid and makes it sticky. It worked before I changed to a centralized menu. Now the menu scrolls up without sticking. Elements inside the grid can be made sticky, but they are only sticky in relationship to the menu, not the page. My theory is that because the menu is being loaded into menu-placeholder, the menu is sticky in relation to menu-placeholder, and not in relation to the webpage/body. I have tried to make menu-placeholder sticky, but it doesn't seem to do anything. Is my theory correct? And if so what is the solution? If not, what is causing the problem?

Dan Macak
  • 16,109
  • 3
  • 26
  • 43
Pumawesome
  • 21
  • 2
  • 2
    If the HTML structure is identical to what was already in place before you implemented `load()`, it would work as CSS is agnostic of any dynamic HTML. Therefore there must be a discrepancy between the old version and new. Also note that using `load()` as a way to include common content is not a very good solution, as it causes extra requests to the server, and can be slow leading to a [FOUC](https://en.wikipedia.org/wiki/Flash_of_unstyled_content). I'd strongly suggest implementing server-side includes instead. – Rory McCrossan Jul 24 '21 at 18:04
  • Thats a fine suggestion save for the fact that I have no clue what that means or how to do that. Looking into it now and getting some understanding. Unsure how to run an shtml on my local server for testing. – Pumawesome Jul 24 '21 at 20:34
  • 1
    Yes, your new HTML and CSS must differ from the version that worked. Multiple reasons come to mind for why sticky would cease to work. One is that the sticky element sticks to its nearest ancestor with scroll context, which might not be what you want (check `sticky` in https://developer.mozilla.org/en-US/docs/Web/CSS/position). It would be the best if you present your stylesheet and your html markup. – Dan Macak Jul 25 '21 at 05:18
  • I have triple checked. The ONLY difference is the fact that my menu has been moved to its own html file, and that there is a new – Pumawesome Jul 26 '21 at 22:53
  • @Pumawesome well that what we are saying. The extra div of your is a change in HTML, isn't it? But that's not enough information to pinpoint your problem. Please present your markup and css as I asked you to in my last comment, or even better share your public repo, so that we can have a look at the problem and maybe draw conclusions useful to others as well. – Dan Macak Jul 28 '21 at 07:12
  • Btw next time tag my nickname so that I can see your reply. – Dan Macak Jul 28 '21 at 07:13

1 Answers1

1

I have solved it!!! And I am so angry.

<div id="menu-placeholder">

</div>

<script>
$(function(){
   $("#menu-placeholder").load("menu.html");
});
</script>

This code must go inside the html element that you want to make sticky, not outside of it. So it looks like this:

 <menu>
   <div id="menu">

   </div>
        
   <script>
      $.get("menu.html", function(data){
      $("#menu").replaceWith(data);
      });
   </script>
</menu>

and then menu.html would be a copy of your original menu, but with the menu tag removed. I tried everything, including almost this solution, but it never occurred to me to place the div and script inside the menu.

Pumawesome
  • 21
  • 2