A menu included in multiple pages with a small JS (following advice from this Stackoverflow post: Include another HTML file in a HTML file) has the following rule: .header_area.navbar_fixed .main_menu {transform: translateY(70px);}. It works perfectly when the menu is put direcly on the page (not through JS). But when loaded through JS, the transform: translate rule of the menu doesn’t work. Here is the demo: https://guardian-angels.glitch.me/. And this is how the menu behaves when menu is directly on the page (not through JS): https://guardian-angels.glitch.me/en/projects-for-future-humanity.html. Can anybody help me please?
I have tried changing the following rule: .header_area {position:absolute;} to position: fixed; but it didn’t do the trick. I have searched in Google but haven’t found anything that can help me. I also tried changing .header_area.navbar_fixed .main_menu {position: fixed;} to position: absolute (following some advice I found in Google) and it didn't do the trick either.
This is the html for the menu:
<header class="header_area">
<div class="main_menu">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav ml-auto">
<li class="nav-item"><a class="nav-link mn_home" href="">Home</a></li>
<li class="nav-item"><a class="nav-link mn_projects" href="">Projects</a></li>
<li class="nav-item"><a class="nav-link mn_about" href="">About</a></li>
<li class="nav-item"><a class="nav-link mn_communiques" href="">Communiqués</a></li>
<li class="nav-item"><a class="nav-link mn_donate" href="">Donate</a></li>
<li class="nav-item submenu dropdown">
<a href="" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Languages</a>
<ul class="dropdown-menu">
<li class="nav-item mn_english"><a class="nav-link" href="">English</a></li>
<li class="nav-item"><a class="nav-link" href="">Spanish</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link mn_contact" href="">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
Menu is loaded through an include with small JS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Some Title Here</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function(){
var includes = $('[data-include]');
jQuery.each(includes, function(){
var file = '/en/inc/' + $(this).data('include') + '.html';
$(this).load(file);
});
});
</script>
</head>
<body>
<div data-include="menu"></div><!-- Include code to load navigation menu - - - - - - - - - - - - - - - - - - - - - - - -->
</body>
</html>
And this is the css that doesn't work when menu is loaded through small JS (the transform: translate rule:
.header_area.navbar_fixed .main_menu {
position: fixed;
width: 100%;
top: -70px;
left: 0;
right: 0;
background: #222222;
transform: translateY(70px);
transition: transform 500ms ease, background 500ms ease;
-webkit-transition: transform 500ms ease, background 500ms ease;
box-shadow: 0px 3px 16px 0px rgba(0, 0, 0, 0.1);
}
The expected behavior is that the menu should go up with the page (as shown in: https://guardian-angels.glitch.me/en/projects-for-future-humanity.html) and then come back as position: fixed; to the top of the page, but it just goes up and doesn't come back.
