AmoryLujo

You can use this code to Custom CSS box
@media screen and (max-width:767px) { .fe-block-3fa04d9eacb1867459b5 { grid-column-start: 1 !important; grid-column-end: 3 !important; grid-row-start: 17 !important; grid-row-end: 19 !important; } .fe-block-3050c3c6eb259cb341aa { grid-column-start: 4 !important; grid-column-end: 7 !important; grid-row-start: 17 !important; grid-row-end: 19 !important; } .fe-block-42aa1aeaabdf5011da55 { grid-column-start: 7 !important; grid-column-end: 10 !important; grid-row-start: 17 !important; grid-row-end: 19 !important; }}

Hi! I'm also having the same issue. Joelle's workaround is great but I was wondering if you knew how to hide 'Home' from mobile too. It's currently not working.

Or if anyone has found the trick to change the link embedded in the logo for both desktop and mobile, that'd be great. I've read almost every thread and there seems to be the same issue. I'm also trying to do a splash page but change the header logo to be benny.work/work
-------------

UPDATE: Thanks to @tuanphan once again 🙂 this code he provided in another thread seems to work for both desktop and mobile!

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('.header-title-logo a').attr('href','https://beaverhero.com'); }); </script>

If you agree, we can change top 2 buttons with a Code Block and second 3 buttons with a Code Block, I can give the code, they will be fine without overlap.
 

Change this code
<style> #header .header-nav-item:nth-child(1) {display:none} #header .header-nav-item:nth-child(2) {display:none} #header .header-nav-item:nth-child(3) {display:none} #header .header-nav-item:nth-child(4) {display:none} #header .header-nav-item:nth-child(5) {display:none} #header .header-nav-item:nth-child(6) {display:none} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(1) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(2) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(3) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(4) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(5) {display:none}} @media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}} </style> to this
<style> div.header-nav-item:nth-child(-n+6) { display: none; } [data-folder="root"]>div:first-child>div:first-child>div:nth-child(-n+6) { display: none; } </style>  

Bravo, it worked perfect for the background.
I'll do different tests with the buttons and be back.
Thank you very much

Good morning Ziggy, first of all, thank you very much for the help.
My main concern is the white stripe you see under the background video when you decrease the size.
Thanks for the information about the buttons, I will investigate options