Needing assistance with some code.

Hello,

I am having some difficulties with my CSS code. I added the "hamburger menu", but it's taking up the entire screen. I want it to be narrow like this screenshot. Also, how can I move the hamburger to the right side instead of it's current location on the right?

Also, i am looking to add some sort of "Scroll" button such as this.

One final request is that when the page loads, it sort of "fades in" with a logo similar to the a day to the remember website when you load it. Their website is https://adtr.com if you want a live representation.

26 minutes ago, Marvise said:

Hello,

I am having some difficulties with my CSS code. I added the "hamburger menu", but it's taking up the entire screen. I want it to be narrow like this screenshot. Also, how can I move the hamburger to the right side instead of it's current location on the right?

 

Also, i am looking to add some sort of "Scroll" button such as this.

 

One final request is that when the page loads, it sort of "fades in" with a logo similar to the a day to the remember website when you load it. Their website is https://adtr.com if you want a live representation.

Can you share your site so I can take a look?

8 hours ago, Beyondspace said:

Can you share your site so I can take a look?

https://fearculture.co

You can use the following code to set burger menu smaller and locate it to the right

.header-display-desktop {
  flex-direction: row-reverse;
}

.burger-box {
  width: 30px; /*change the value for width of burger*/
}

Let me know how it works on your site

3 hours ago, Beyondspace said:

You can use the following code to set burger menu smaller and locate it to the right

.header-display-desktop {
  flex-direction: row-reverse;
}

.burger-box {
  width: 30px; /*change the value for width of burger*/
}

Let me know how it works on your site

This helped with the hamburger placement! Now I just need help shrinking the navigation menu when it's open. It currently takes up the entire page, but I want it on the right side in a small panel similar to the one on ADTR's website.

On 3/30/2024 at 3:25 AM, Marvise said:

This helped with the hamburger placement! Now I just need help shrinking the navigation menu when it's open. It currently takes up the entire page, but I want it on the right side in a small panel similar to the one on ADTR's website.

You can use this CSS code

@media screen and (min-width:992px) {
div.header-menu {
    left: unset !important;
    width: 30% !important;
}}

7 hours ago, tuanphan said:

You can use this CSS code

@media screen and (min-width:992px) {
div.header-menu {
    left: unset !important;
    width: 30% !important;
}}

 

This fixed the size problem! Also do you have any recommeneded code for a "Scroll down" and "top" button? I also noticed my website has some spacing issues on mobile compared to desktop. Any solutions to fix that without altering the desktop layout?

On 4/1/2024 at 4:17 AM, Marvise said:

This fixed the size problem! Also do you have any recommeneded code for a "Scroll down" and "top" button? I also noticed my website has some spacing issues on mobile compared to desktop. Any solutions to fix that without altering the desktop layout?

#1. Back to top, you can follow this https://www.will-myers.com/back-to-top-button

#2. Can you describe in more detail with spacing issues?

On 4/3/2024 at 5:40 AM, tuanphan said:

#1. Back to top, you can follow this https://www.will-myers.com/back-to-top-button

#2. Can you describe in more detail with spacing issues?

#1. I followed this tutorial. Do you know how to make the button disappear when at the top of the page?

#2. The block with "New single Available Now" is over lapping the tour dates button. The block  with "stream 'Virus' and Official merch isn't stacked on top rather than side by side.

On 4/6/2024 at 8:46 AM, Marvise said:

#1. I followed this tutorial. Do you know how to make the button disappear when at the top of the page?

#2. The block with "New single Available Now" is over lapping the tour dates button. The block  with "stream 'Virus' and Official merch isn't stacked on top rather than side by side.

#1. Adjust this option then update your code

#2. I think you should able to edit mobile layout to prevent overlap

https://support.squarespace.com/hc/en-us/articles/6421525446541-Editing-your-site-with-Fluid-Engine#toc-mobile-layout