Conflicting CSS in Head Code Section

Design help Custom code
1

Dear Webflow Community,

I’m experiencing some bugs with a current website project, likely related to the custom code in the head section. Due to legal requirements, the website must include an “Age-Gate,” which was implemented using custom code. The code was assembled from various resources and works as intended overall. However, the following issues remain unresolved:

  1. Button Frames: When clicking buttons – whether in the navbar or elsewhere on the page – frames briefly appear around the buttons.
  2. Navbar Resize: When navigating to a subpage, the navbar temporarily changes size – it initially expands and then shrinks back.
  3. Page Transition: While navigating between subpages, different sections of the entire website briefly flash before the new content fully loads.

Does anyone have an idea which part of the custom code might be causing these issues or where the solution could be found?

Thanks a lot for your support! :folded_hands:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hey Sebastian,

  1. Looks like you have a site wide custom code that is adding an shadow to buttons on focus, this is what causes the button outline issue. Edit it by going to Site Settings > Custom Code.
    image
    image492×268 19.5 KB
  2. I don’t see the navbar resize issue.
  3. I dont see the sections flashing, but I do see the age verification popup flashing on the homepage. To fix this, try setting “display: none” on the age gate component & change the JS to set “display: block” after it checks if “age-verified” is false or doesn’t exist.

Hope that helps!

1 Like
3

Hey Luke, perfect! That seems to fix my problems. Thank you so much!