How to I make the logo / main menu overlap the page banner on my mobile version?

i'm trying to build my own website but i would like to edit my mobile version of it. so i wish to have the menu and the logo on top of my image banner on the top.
i provide examples

Can you share link to your site?

13 minutes ago, tuanphan said:

Can you share link to your site?

my site is not published yet.
basically i want the "logo" and menu to be on top of my index gallery. just like the second picture i posted that shows the gallery covering the whole page with the logo on top.

1 minute ago, RubenAlza said:

my site is not published yet.
basically i want the "logo" and menu to be on top of my index gallery. just like the second picture i posted that shows the gallery covering the whole page with the logo on top.

If you can't share url, try contacting Squarespace Custom Care first.

You can also setup password & share url. i guess it need some custom code.

2 minutes ago, tuanphan said:

If you can't share url, try contacting Squarespace Custom Care first.

You can also setup password & share url. i guess it need some custom code.

ok, done 
www.rubenalza.com
that is the page. so, im trying to edit the mobile look to it. like i said before having the gallery on top without that white bar over it.
p.s. if you know how to also edit the menu background i would love it so much. its giving me a headache. cant seem to find it anywhere.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage {
    margin-top: 0 !important;
}
.tweak-mobile-bar-top-fixed .Mobile-bar--top {
    background: transparent;
}
.tweak-mobile-bar-menu-icon-vertical-dots .Mobile-bar-menu .Icon--dots-vertical {
    fill: white !important;
}}

2 minutes ago, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage {
    margin-top: 0 !important;
}
.tweak-mobile-bar-top-fixed .Mobile-bar--top {
    background: transparent;
}
.tweak-mobile-bar-menu-icon-vertical-dots .Mobile-bar-menu .Icon--dots-vertical {
    fill: white !important;
}}

 

thank you so much!!!!! you the best 🙂

On 11/8/2019 at 7:42 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.homepage {
    margin-top: 0 !important;
}
.tweak-mobile-bar-top-fixed .Mobile-bar--top {
    background: transparent;
}
.tweak-mobile-bar-menu-icon-vertical-dots .Mobile-bar-menu .Icon--dots-vertical {
    fill: white !important;
}}

 

hi! question, i just noticed the change apply only to my homepage. thing is i have my site in two languages, so i have the spanish one as my homepage but as soon i click to change it to english on my menu the css edit doesnt apply at all. please how can i have it for both (or all maybe)? thank you in advance.

34 minutes ago, RubenAlza said:

hi! question, i just noticed the change apply only to my homepage. thing is i have my site in two languages, so i have the spanish one as my homepage but as soon i click to change it to english on my menu the css edit doesnt apply at all. please how can i have it for both (or all maybe)? thank you in advance.

Replace .homepage with Page ID. Each page will have different ID. See how to find Page ID.

11 minutes ago, tuanphan said:

Replace .homepage with Page ID. Each page will have different ID. See how to find Page ID.

thank you! had it to work just now. 🙂