Content Under Invisible Header

Hi There, I have an issue that I need assistance with. I have an invisible navbar on my website but can’t access the links and buttons underneath it.

If I set its Z-Index lower then the content behind it none of the links in the navbar / logo work.

Any help would be greatly appreciated. With thanks - Seth

Hi Seth,

Thank you for writing in, I have checked all the site associated on your account but I can see the navbar of each of those sites, please clarify the issue and which site you’re having it.

In the meantime, please try removing all your custom CSS and see that resolves the issue. And also do a Testing for Plugin Conflict.

Cheers!

Hi Friech, thank you for the quick response. The site has a static transparent navbar so the navbar menu and logo are floated above the whole site.

When the Navbar (Which is quite large to accommodate the vertical menu) covers for instance a button or contact form on the site. The users can’t click on the element underneath (That is covered by) the navbar.

Is there way around this? For instance:

Can we make remove the Navbar and keep the Logo / Menu links?

With thanks,

Seth

Hey Seth,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Thank you, the best page to see what I am referring to is: https://raddish.ch/packages/ when the button at the top of the page is under the header you can’t click on it.

Hi @SethVanO,

Thanks for proving your credentials, upon checking your website settings I’ve found some workaround on how to solve your issue.

First, we need to set the z-index settings of your pricing section from 1 to auto

Next, you need to set the z-index of your button row from 1 to 999999

Then the button will now clickable even though it is under the menu when the navigation is on the pricing section.

Hope that helps.

Thank you.

Very cool thank you Cramaton for the quick and efficient help, I imagine that will apply for all elements I want to float above the header.

One other question :slight_smile:

That same button toggles the accordion to change the pricing from monthly to yearly on the section below. Is there any custom css that can target the checkout buttons in the columns below to change the links they go to?

Hi @SethVanO,

Here’s my recommendation on how to change the button URL when you press the toggle button. Put the button inside your accordion element using HTML code, see the example below, just change the URL.

<a class="x-anchor x-anchor-button" tabindex="0" href="https://www.raddish.ch/pick-your-website/?add-to-cart=592">
  <div class="x-anchor-content">
        <div class="x-anchor-text"><span class="x-anchor-text-primary">ORDER IT</span></div>      </div>
</a> 

Apply what you did on your packages header so that it will change your buttons when you click the toggle button.

Then style your button to make it like your current button, to know more how to style the button using CSS please check these resources.

https://www.w3schools.com/css/css3_buttons.asp
https://css-tricks.com/overriding-default-button-styles/
https://www.w3docs.com/snippets/css/how-to-style-buttons-with-css.html

Hope that helps.

Thank you.

That is perfect I have the button css saved already. Thank you again Cramaton. Appreciate the awesome service. :slight_smile:

@SethVanO,

It’s our pleasure to help you.

Thank you.

Hi there,
I am having a similar issue. In my case, I am using sticky nav. The sticky nav is transparent, and the logo and menu are the only visible elements in my sticky nav. I am unable to click links behind the transparent sticky nav.

So when I scroll down on mobile, I cannot click the links at the top (behind the sticky nav)

@fusedigital,

Thanks for reaching out.

The reason why it is not clickable because even though your navbar is transparent but the element of the navbar is still there and that is the reason behind why you can’t click a link on a transparent sticky nav. If you follow the instruction above it will do the trick on how to click links behind on a transparent navbar.

Hope that helps and please let us know how it goes.

Thank you.

Thank you for the quick response.

Do you know of a workaround so that I can click in the transparent area of under my sticky nav, but without having to apply these changes to the z-index individually to every section and element below the header?

@fusedigital,

That’s the best workaround so far while investigating this kind of issues. We will let you know if we found something better on how to fix on this kind of issues.

If you have a follow up question, we kindly ask you to write it on a new thread as this one is getting longer and hard to follow.

Thank you for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.