0

There’s this menu that needs to be included in webpage with an iframe. It works perfectly when it’s not an include but when loaded through an iframe, the fixed positioning of the menu doesn’t work. Can anybody help me please?

I'm very new to learning web develpment, so the only thing I've tried is to load the menu directly on the page without iframe. And it stays fixed to top. I' ve searched in Google and in StackOverflow, but there is no answer for this.

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&eacute;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>

And this is the css that doesn't work when menu is loaded through iframe:

.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 menu should stay on top when scrolling down, but it just goes up with the page when loaded through iframe. Here is the demo: http://project-smac.orgfree.com

Ramon D Marin
  • 83
  • 10
  • I asked the new question @Amaresh S M stating the problem as it ultimately ended up being: https://stackoverflow.com/questions/57595521/rule-transform-translatey-in-menu-doesn-t-work-properly-when-menu-is-loaded-i – Ramon D Marin Aug 21 '19 at 16:55

1 Answers1

0

change the position of header position:absolute to position:fixed

.header_area {
    position: fixed;  /*change this */
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99990;
    transition: background 0.4s, all 0.3s linear;
}
Amaresh S M
  • 2,936
  • 2
  • 13
  • 25