Fixing text to bottom of full screen menu

Hello! I'm trying to style my full screen desktop menu like the screenshot. I've managed to get 'BOCKMASTER' to fix to the top of the screen regardless of the viewport size, but using the same code for 'CREATIVE' isn't quite working. 

I thought I had it when I used fixed position:

.menu #block-b3227c180fb77e2f7555 {
position: fixed;
bottom: -4.4vw;
}

But that made the element visible even when the menu is closed. Is there a way to use absolute positioning to attach this block to the bottom of the viewport? Or to use fixed positioning that keeps the element within the .menu?
 

https://potato-goose-e48n.squarespace.com/
pw: bockmaster

Hoping that maybe you @tuanphan or you @Ziggy might have the magic solution? 🤞

So you want to show bottom text when Burger menu is Open

And hide it when Burger Menu is Close?

Hi @tuanphan, yes exactly! all of the text/background colour should only show when menu is open. i'm just having trouble getting 'CREATIVE' to be positioned at the bottom of the viewport, and stay there even when the screen is resized. 

Because you are using custom burger menu, so we will need to use JavaScript code to achieve this.

Use this code to bottom of Code Injection > Footer

<script>
  $(document).ready(function(){
    $('label.checkburger').click(function(){
        $('#block-b3227c180fb77e2f7555').toggleClass('show-text');
    });
});
</script>
<style>
  #block-b3227c180fb77e2f7555 h3 {
    position: fixed !important;
    bottom: 0;
    z-index: 999999999;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
}
.show-text h3 {
    visibility: visible !important;
}
</style>

10 hours ago, tuanphan said:

Because you are using custom burger menu, so we will need to use JavaScript code to achieve this.

Use this code to bottom of Code Injection > Footer

<script>
  $(document).ready(function(){
    $('label.checkburger').click(function(){
        $('#block-b3227c180fb77e2f7555').toggleClass('show-text');
    });
});
</script>
<style>
  #block-b3227c180fb77e2f7555 h3 {
    position: fixed !important;
    bottom: 0;
    z-index: 999999999;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
}
.show-text h3 {
    visibility: visible !important;
}
</style>

 

Oh my gosh @tuanphan, you are a lifesaver! I was able to get my links to stick right in the centre using your code as well! The only outstanding issue is: My menu transition takes a second, and during it, both 'CREATIVE' and the nav links appear before the background has fully covered the screen. I'd love to have them be 'uncovered' as the menu opens, the way 'BOCKMASTER' does at the top.

Hard to describe, but you can see in this screenshot that the menu elements have appeared before the black background has covered the screen. Can you help?

Try change code I sent to this. This code means, after 2 seconds, will force menu text appear

(you can adjust 2000 (2 seconds) in the code)

<script>
 $(document).ready(function(){
    $('label.checkburger').click(function(){
        $('#block-b3227c180fb77e2f7555').toggleClass('show-text');
      setTimeout(function(){
	 $('label.checkburger').toggleClass('burger-test');
},2000);
     
    });
});
</script>
<style>
  #block-b3227c180fb77e2f7555 h3 {
    position: fixed !important;
    bottom: 0;
    z-index: 999999999;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
}
.show-text h3 {
    visibility: visible !important;
}
  #hamburger:checked~.menu a {
    opacity: 0;
}
label.burger-test + .menu a {
    opacity: 1 !important;
}
</style>

Hi @tuanphan! This is amazing, I'm super close!

The delay worked on the nav links, but 'CREATIVE' still comes up right away. I tried experimenting with the code you provided to see if I could get 'CREATIVE' to do the same thing, but I'm afraid my Jquery knowledge is little to none. I'm also hoping I can add a slight fade transition to the opacity.

Thank you SO much for your help!

Thank you so much @tuanphan! The links and 'creative' are now showing up after the menu has fully covered the screen! However, when the menu closes, these elements need to disappear as soon as the X is clicked. Is there a way to have the delay when they appear, but remove the delay on close?

I'm also hoping to add a slight fade to the opacity, so that when the menu is clicked, the elements fade up rather than the delay and then BAM, appear. Is this possible?

Hi @tuanphan I was actually able to change the menu transition to opacity, rather than height! My menu is perfect now. Thank you so much for all of your help! 

On 3/26/2024 at 8:55 PM, mbockmaster said:

Hi @tuanphan I was actually able to change the menu transition to opacity, rather than height! My menu is perfect now. Thank you so much for all of your help! 

You're welcome

I'm traveling so missed your question