Title: ok11's Replies | WordPress.org

---

# ok11

  [  ](https://wordpress.org/support/users/ok11/)

 *   [Profile](https://wordpress.org/support/users/ok11/)
 *   [Topics Started](https://wordpress.org/support/users/ok11/topics/)
 *   [Replies Created](https://wordpress.org/support/users/ok11/replies/)
 *   [Reviews Written](https://wordpress.org/support/users/ok11/reviews/)
 *   [Topics Replied To](https://wordpress.org/support/users/ok11/replied-to/)
 *   [Engagements](https://wordpress.org/support/users/ok11/engagements/)
 *   [Favorites](https://wordpress.org/support/users/ok11/favorites/)

 Search replies:

## Forum Replies Created

Viewing 6 replies - 1 through 6 (of 6 total)

 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [Different menu on fixed header vs. sticky header](https://wordpress.org/support/topic/different-menu-on-fixed-header-vs-sticky-header/)
 *  Thread Starter [ok11](https://wordpress.org/support/users/ok11/)
 * (@ok11)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/different-menu-on-fixed-header-vs-sticky-header/#post-15474546)
 * I was able to achieve what I wanted through a different solution:
    1. I set the
   page template to “Page – Full Width – Header on scroll” (I am sure there are 
   other themes that have similar templates to Flatsome) which basically means that
   on that page, the header will appear only after scroll
 * 2. I identified the HTML code for the Nav Icon type menu, which in my case is:
 *     ```
       <a href="#" data-open="#main-menu" data-pos="center" data-bg="main-menu-overlay" data-color="" class="is-small" aria-label="Menu" aria-controls="main-menu" aria-expanded="false">
       	<i class="icon-menu" ></i>
       	<span class="menu-title uppercase hide-for-small">Meniu</span>
       </a>
       ```
   
 * 3. I added the code as an HTML block in the place I wanted it on my page (top
   left corner)
 * I hope this solution might help others in the future!
 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [Different menu on fixed header vs. sticky header](https://wordpress.org/support/topic/different-menu-on-fixed-header-vs-sticky-header/)
 *  Thread Starter [ok11](https://wordpress.org/support/users/ok11/)
 * (@ok11)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/different-menu-on-fixed-header-vs-sticky-header/#post-15474487)
 * I see, well the folks at Flatsome didn’t help me either because I bought this
   license a while ago and the 6-month support has ended
 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [Different menu on fixed header vs. sticky header](https://wordpress.org/support/topic/different-menu-on-fixed-header-vs-sticky-header/)
 *  Thread Starter [ok11](https://wordpress.org/support/users/ok11/)
 * (@ok11)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/different-menu-on-fixed-header-vs-sticky-header/#post-15466250)
 * From my testing, using the class “.header-nav-main” makes the menu disappear,
   but I can’t make the code work to make it appear again. Can you spot any issues
   with the code I posted above? Maybe the answer lies there.
 * I will try asking flatsome support for their help too.
 * Thank you!
 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [Different menu on fixed header vs. sticky header](https://wordpress.org/support/topic/different-menu-on-fixed-header-vs-sticky-header/)
 *  Thread Starter [ok11](https://wordpress.org/support/users/ok11/)
 * (@ok11)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/different-menu-on-fixed-header-vs-sticky-header/#post-15462280)
 * Sure, the website is under construction, so I password-protected it. The URL 
   is drmike.ro and the password is “drmike”.
 * Thank you!
 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [Different menu on fixed header vs. sticky header](https://wordpress.org/support/topic/different-menu-on-fixed-header-vs-sticky-header/)
 *  Thread Starter [ok11](https://wordpress.org/support/users/ok11/)
 * (@ok11)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/different-menu-on-fixed-header-vs-sticky-header/#post-15459019)
 * I also tried the following CSS and it will hide the menu, but it won’t make it
   visible again, for some reason:
 *     ```
       .header-nav-main {
           scale: 0;
       }
   
       .header-nav-main.is-hidden {
           Transform: scale(0);
       }
       .header-nav-main.is-visible {
           Transform: scale(1);
       }
       ```
   
 * Again, I am not good with code, so any help is greatly appreciated.
 *   Forum: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
   
   In reply to: [Different menu on fixed header vs. sticky header](https://wordpress.org/support/topic/different-menu-on-fixed-header-vs-sticky-header/)
 *  Thread Starter [ok11](https://wordpress.org/support/users/ok11/)
 * (@ok11)
 * [4 years, 5 months ago](https://wordpress.org/support/topic/different-menu-on-fixed-header-vs-sticky-header/#post-15458994)
 * Thank you for the response! The idea you gave me should e a good solution, unfortunately,
   I can’t seem to make the code work. I did some digging and I found something 
   promising, but I can’t make it work for the life of me.
    The code that I am trying
   to use is copied from here: [https://dev.to/changoman/showhide-element-on-scroll-w-vanilla-js-3odm](https://dev.to/changoman/showhide-element-on-scroll-w-vanilla-js-3odm)
 * I am not a programmer, so I don’t really know how to write code. The code I am
   trying to use looks like this:
    JS:
 *     ```
       <script type="text/javascript">
       let scrollPos = 0;
       const nav = document.querySelector('.header-nav-main');
   
       function checkPosition() {
         let windowY = window.scrollY;
         if (windowY < scrollPos) {
           // Scrolling UP
           nav.classList.add('is-visible');
           nav.classList.remove('is-hidden');
         } else {
           // Scrolling DOWN
           nav.classList.add('is-hidden');
           nav.classList.remove('is-visible');
         }
         scrollPos = windowY;
       }
   
       window.addEventListener('scroll', checkPosition);
       </script>
       ```
   
 * CSS:
 *     ```
       .header-nav-main {
           visibility: hidden;
       }
   
       .header-nav-main.is-hidden {
           visibility: hidden;
       }
       .header-nav-main.is-visible {
           visibility: visible;
       }
       ```
   
 * The CSS they gave as an example in the post doesn’t do what I need it to do, 
   but, the JS seems to be working, so I tried finding a solution for the CSS part
   myself, but to no avail.
    Can anyone point out what is wrong with the CSS part
   of the code I am trying to use? It hides the menu, but it won’t make it visible
   again.
 * Thank you!

Viewing 6 replies - 1 through 6 (of 6 total)