A menu included in multiple pages with an iframe 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 iframe). But when loaded through an iframe, the transform: translate rule of the menu doesn’t work. Here is the demo: http://project-smac.orgfree.com . And this is how the menu behaves when menu is directly on the page (not through iframe): http://project-smac.orgfree.com/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 iframe:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
</head>
<body>
<iframe src="/en/inc/menu.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe><!-- Include code to load navigation menu - - - - - - - - - - - - - - - - - - - - - - - -->
</body>
</html>
And this is the css that doesn't work when menu is loaded through iframe (the transform: translateY:
.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: http://project-smac.orgfree.com/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.
