Is there a way to show content on a child of an element that is 'overflow: hidden' when th-CodePudding

I'm making a responsive menu and I have a link that when you hover over it a side menu slides from the right on to the screen, but when I do this with 'overflow-x: hidden' all the content that would be on that menu is none existent, though with 'overflow: visible' the whole page can scroll to the right, as the menu is displaying 'transformX: (-100%)' until hover, then 'transformX: (0%)'.

Also, my 'all categories' button doesn't work, this is supposed to remove the class 'opened' from the '#mobile-sub-menu' element, but nothing happens.

CodePudding user response：

I've made a change and I'm sharing code here.

https://codepen.io/_makki/pen/QWqXmgm

    <header style="overflow-x:hidden"  id="mobile-header">
        <nav>
            <div >

                <a  href="mailto:[email protected]">
                    <img src="/wp-content/uploads/2022/01/HSL-email-icon.svg" alt="Email Icon">
                </a>

                <a  href="<?php echo get_site_url(); ?>"><img
                        src="/wp-content/uploads/2021/11/hsl-logo.svg">
                </a>

                <button >
                    <img src="/wp-content/uploads/2022/01/HSL-menu-icon.svg" alt="Menu Icon">
                </button>

                <!--  Use flexbox utility classes to change how the child elements are justified  -->
            </div>
        </nav>
    </header>

 <div id="main-mobile-menu">

                    <button >
                        <img src="/wp-content/uploads/2022/01/HSL-close-menu-icon.svg" alt="Close Menu Icon">
                    </button>

                    <ul id="menu-mobile-menu" >
                        <li >
                            <a href="https://hsl.hyphendemo.co.uk/" >Home</a>
                        </li>

                        <li >
                            <a href="https://hsl.hyphendemo.co.uk/about/" >About Us</a>
                        </li>

                        <li id="menu-item" >
                            <a href="#" >Products</a>
                            <div id="mobile-sub-menu">
                                <button >
                                    All Categories
                                </button>
                                <ul >
                                    <li >
                                        <a>
                                            Products
                                        </a>
                                    </li>
                                    <li >
                                        <a href="https://hsl.hyphendemo.co.uk/departments/ophthalmology/"
                                            >Ophthalmology</a>
                                    </li>
                                    <li >
                                        <a href="https://hsl.hyphendemo.co.uk/departments/diagnostic-imaging/"
                                            >Diagnostic Imaging</a>
                                    </li>
                                    <li >
                                        <a href="https://hsl.hyphendemo.co.uk/surgical-equipment/"
                                            >Surgical
                                            Equipment</a>
                                    </li>
                                    <li >
                                        <a href="https://hsl.hyphendemo.co.uk/departments/healthcare-technology/"
                                            >Healthcare Technology</a>
                                    </li>
                                </ul>
                            </div>
                        </li>

                        <li id="menu-item" >
                            <a href="#" >Services</a>
                        </li>

                        <li id="menu-item-" >
                            <a href="#" >Specialties</a>
                        </li>

                        <li id="menu-item" >
                            <a href="#" >Communications</a>
                        </li>

                        <li >
                            <a href="https://hsl.hyphendemo.co.uk/news/" >News</a>
                        </li>

                        <li >
                            <a href="https://hsl.hyphendemo.co.uk/contact/" >Contact</a>
                        </li>
                    </ul>
                </div>

Also Changed CSS for side menu. ( main-mobile-menu position fixed from absolute )

  #mobile-header {
    display: block;
  }
  header {
    padding: 0;
    padding-top: 8px;
  }
  #desktop-header {
    display: none;
  }

  #main-mobile-menu {
    position: fixed;
    background-color: white;
    z-index: 1000;
    width: 80%;
    height: 100vh;
    top: 0;
    right: 0;
    padding: 75px;
    transform: translateX(100%);
    transition: 0.5s ease-in-out;
  }
  #main-mobile-menu.opened {
    transform: translateX(0);
  }
  #mobile-sub-menu {
    position: absolute;
    background-color: white;
    z-index: 1004;
    left: 0;
    bottom: 0;
    right: 0;
    top: 0;
    padding: 75px;
    transform: translateX(100%);
    transition: 0.5s ease-in-out;
    right: 0;
  }
  .navbar-nav {
    margin-top: 100px;
  }
  #mobile-sub-menu.opened {
    transform: translateX(0);
  }
  #mobile-sub-menu.nav-link {
    padding: 5px 0;
    margin: 5px 0;
  }
  .sub-close {
    position: absolute;
    top: 50px;
    left: 75px;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: 400;
    padding: 0;
    border: none;
    background-color: transparent;
  }
  .nav-link {
    font-size: 22px;
    font-weight: 400;
    color: #535d65;
    padding: 10px 0;
    margin: 10px 0;
    border-bottom: 2px solid transparent;
    transition: 0.3s ease-in-out;
  }
  .nav-link:hover {
    border-bottom-color: #a01c29;
    color: #535d65;
  }
  #mobile-sub-menu .nav-link {
    font-size: 18px;
    padding: 5px 0;
    margin: 5px 0;
  }
  .nav-header a {
    font-size: 22px;
  }
  .nav-header {
    margin-bottom: 30px;
  }
  .nav-header:hover {
    color: #535d65;
  }
  .mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    height: 100px;
  }
  .mobile-email {
    position: absolute;
    top: 50%;
    left: 75px;
    transform: translateY(-50%);
  }
  .mobile-email img,
  .mobile-menu-btn img,
  .mobile-menu-close-btn img {
    width: 50px;
  }
  .mobile-menu-btn {
    padding: 0;
    border: none;
    background-color: transparent;
    position: absolute;
    top: 50%;
    right: 75px;
    transform: translateY(-50%);
  }
  .navbar-brand {
    padding: 0;
    font-size: medium;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .holding > a {
    display: none;
  }
  .mobile-menu-close-btn {
    padding: 0;
    border: none;
    background-color: transparent;
    z-index: 100000;
    position: absolute;
    right: 75px;
    top: 50px;
    transform: translateY(-50%);
  }
  #bigDropdown {
    display: none;
  }