ok11

Forum Replies Created

Viewing 6 replies - 1 through 6 (of 6 total)
  • Forum: Fixing WordPress
    In reply to: Different menu on fixed header vs. sticky header
    Thread Starter ok11

    (@ok11)

    4 years, 2 months ago

    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
    In reply to: Different menu on fixed header vs. sticky header
    Thread Starter ok11

    (@ok11)

    4 years, 2 months ago

    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
    In reply to: Different menu on fixed header vs. sticky header
    Thread Starter ok11

    (@ok11)

    4 years, 2 months ago

    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
    In reply to: Different menu on fixed header vs. sticky header
    Thread Starter ok11

    (@ok11)

    4 years, 2 months ago

    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
    In reply to: Different menu on fixed header vs. sticky header
    Thread Starter ok11

    (@ok11)

    4 years, 2 months ago

    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
    In reply to: Different menu on fixed header vs. sticky header
    Thread Starter ok11

    (@ok11)

    4 years, 2 months ago

    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

    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)