How to make a certain element disappear FIRST on the event of clicking the main navigation

Hi Guys,

I'm working on this website:

https://dr-kwaks-clinic.squarespace.com

The issue I am seeing is that:

on Safari browser only,

when an user clicks a menu on the main navigation or the button on top of video clip (in order to move to another page),

the text on top of video clip remains a tad longer than other elements of the page.

So, it looks like:

when clicking a menu on the main navigation or the button on top of video clip,

the page disappear except the text on top of video clip,

and about a half-second later the text disappear,

then we see the new page is loading.

This is not happening on Chrome browser or FireFox. -- It's happening only on Safari.

So, my objective is

to make the text on top of the video clip disappear FIRST

when the main navigation or the button on top of video clip is clicked 

or at least, to make the text disappear at the same time as other elements of the page.

As a desperate measure,

I wrote half-assed jQuery below to make the text disappear first in the event of clicking the main navigation.
 

Quote

 

<script>

$(document).ready(function() {

 $("#.header-nav.header-nav-item").click(function() {

   $("#block-27a387bf1953411cbeb1.sqs-block-content").hide();

 });

});

</script>

 

But obviously it's not working.

Any help on resolving this issue would be genuinely appreciated.

Thank you.

Use this new code to bottom of Code Injection

<script>
$(document).ready(function() {
 $("div.header-nav-item:nth-child(1)").click(function() {
   $(".fe-block-27a387bf1953411cbeb1").hide();
 });
});

</script>

On 2/21/2023 at 1:46 AM, tuanphan said:

Use this new code to bottom of Code Injection

<script>
$(document).ready(function() {
 $("div.header-nav-item:nth-child(1)").click(function() {
   $(".fe-block-27a387bf1953411cbeb1").hide();
 });
});

</script>

 

Thanks for the reply!

I tried your code (placing it on the head and the (markdown) button), but unfortunately it doesn't seem working. 

-_-;

I know it's not relevant at all but,

if you see this reply,

can I bother you with two other questions? 😔 😔 😔

1.

What I am trying to do with the CSS below (for the website https://dr-kwaks-clinic.squarespace.com) is that

trying to force Hamburger menu nav button on iPad 11in vertical ratio

(because on iPad 11in when it's vertically viewed, the main navigation is two lined).
 

Quote

 

@media screen and (min-width:834px) and (max-width:1122px) {

/* hide navigation */

 .header-nav {

  display: none !important;

 }

/* Hide header button */

 .header-actions {

  display: none !important;

 }

/* show burger */

 .header-burger {

  display: flex !important;

 }

/* Show overlay mobile menu */

 .header--menu-open .header-menu a {

  visibility: visible !important;

 }

.burger-inner {
  
  opacity: 1!important;
  visibility: visible !important;  
  
}

}

 

So, when I use the CSS above, 

the Hamburger button shows up on iPad 11in vertically viewed.

BUT

a strange thing happened:

When I click the Hamburger button, nothing or no navigation menu shows up. ^^;

2.

On iPad 11in  and iPad Mini are horizontally viewed (1194 x 762 px and 1133 x 672 px respectively),

the right-end of main navigation menu goes out of the right side of the window/screen.

Would you be so kind to suggest a CSS to fix this issue?

Thank you, tuanphan!

(Not much changed but) I tried the edited version of CSS (please see below) but still the issues #1 and #2 are happening. 🥲
 

Quote

 

@media screen and (orientation: portrait) {

/* hide navigation */

 .header-nav {

  display: none !important;

 }

/* Hide header button */

 .header-actions {

  display: none !important;

 }

/* show burger */

 .header-burger {

  display: flex !important;

 }

/* Show overlay mobile menu */

 .header--menu-open .header-menu a {

  opacity: 1 !important;
  visibility: visible !important;

 }

.burger-inner {
  
  opacity: 1 !important;
  visibility: visible !important;  
  
}

.burger-inner > div {
  
  opacity: 1 !important;
  visibility: visible !important; 
  
}

.header--menu-open .header-menu-nav-folder-content a {

  opacity: 1 !important;
  visibility: visible !important; 

}

}

 

@tuanphan

UPDATE

I am updating regarding the subject "How to make a certain element disappear FIRST on the event of clicking the main navigation."

1.

I can see you wrote the code for that clicking the first menu item on the main navigation makes the text on the splash video disappear first then the page moves to another page.

I edited your code like below,

so, it would be intended for all the menu items on the navigation: When any of the menu item gets clicked, the text would be disappeared first.

Quote

 

<script>

$(document).ready(function() {

 $("#.header-nav.header-nav-item").click(function() {

   $("#block-27a387bf1953411cbeb1.sqs-block-content").hide();

 });

});

</script>

 

2.

I place the code on the head section (Settings > Advanced > Code Injection).

and I also place another edited code (below) in the markdown button (the square-shaped button below the text on the video).

For your information, fe-block-yui_3_17_2_1_1671955442710_37332 is the block number of the markdown button.

Quote

 

<script>

$(document).ready(function() {

 $(".fe-block-yui_3_17_2_1_1671955442710_37332").click(function() {

   $(".fe-block-27a387bf1953411cbeb1").hide();

 });

});

</script>

 

3.

I can see that the code is working on Google Chrome browser.

But I'm afraid to report that it seems not working on Safari browser. -_-'

4.

With the coding, after having moved to another page from Home page (by clicking a menu item on the main navigation or by clicking the markdown button),

if you click "go back" button/arrow on the browser in order to go back to previous page (Home page),

you can see the text on the video stayed disappeared.

So, my guess is that we need to edit the code in some way, so the text would comes back after disappeared for awhile (like 2~3 seconds, maybe?).

5.

I would like to note that this "How to make a certain element disappear FIRST on the event of clicking the main navigation" subject is considered a lot less 'necessary-to-fix' than the other two issues that I have mentioned above (and I quoted them below just in case).

So, if you have moments to spare, please be kind to help me with those two issues first.

Thank you.

More important two issues:

1.

What I am trying to do with the CSS below (for the website https://dr-kwaks-clinic.squarespace.com) is that

trying to force Hamburger menu nav button on iPad 11in vertical ratio

(because on iPad 11in when it's vertically viewed, the main navigation is two lined).

Quote

 

@media screen and (min-width:834px) and (max-width:1122px) {

/* hide navigation */

 .header-nav {

  display: none !important;

 }

/* Hide header button */

 .header-actions {

  display: none !important;

 }

/* show burger */

 .header-burger {

  display: flex !important;

 }

/* Show overlay mobile menu */

 .header--menu-open .header-menu a {

  visibility: visible !important;

 }

.burger-inner {
  
  opacity: 1!important;
  visibility: visible !important;  
  
}

}

 

2.

On iPad 11in  and iPad Mini are horizontally viewed (1194 x 762 px and 1133 x 672 px respectively),

the right-end of main navigation menu goes out of the right side of the window/screen.

@tuanphan

UPDATE #2

Happily reporting that I think I have fixed those 2 issues related to the Hamburger button on the iPad navigation (Quoted those issues below just in case).

Quote

 

1.

What I am trying to do with the CSS below (for the website https://dr-kwaks-clinic.squarespace.com) is that

trying to force Hamburger menu nav button on iPad 11in vertical ratio

(because on iPad 11in when it's vertically viewed, the main navigation is two lined).

--- CSS ---

So, when I use the CSS above, 

the Hamburger button shows up on iPad 11in vertically viewed.

BUT

a strange thing happened:

When I click the Hamburger button, nothing or no navigation menu shows up. ^^;

2.

On iPad 11in  and iPad Mini are horizontally viewed (1194 x 762 px and 1133 x 672 px respectively),

the right-end of main navigation menu goes out of the right side of the window/screen.