Transparent Mobile Navigation on Brine Template

alwalt · August 4, 2020

Site URL: https://lizard-chartreuse-ftf8.squarespace.com/

Hello community!

https://lizard-chartreuse-ftf8.squarespace.com/
Password: solar2020

Trying to make the mobile menu overlay over the background image the same as it does on the desktop view. I found a bunch of code on the answers forum, but nothing is working for my site...

Thanks in advance.

tuanphan · August 4, 2020

Add to Home > Design > Custom CSS

.Mobile-bar.Mobile-bar--top {
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
}

alwalt · August 6, 2020

Works great! Thanks.

saylinds · November 12, 2020

@tuanphan Is this written for 7.0 as well? Doesn't seem to work on my site www.saylinds.com

Edited November 12, 2020 by saylinds
hyperlink

tuanphan · November 12, 2020

33 minutes ago, saylinds said:

@tuanphan Is this written for 7.0 as well? Doesn't seem to work on my site www.saylinds.com

above code for 7.0 brine template

I see you solved?

saylinds · November 12, 2020

@tuanphan I did, I found another one of your codes posted elsewhere. thank you!

tuanphan · November 12, 2020

3 hours ago, saylinds said:

@tuanphan I did, I found another one of your codes posted elsewhere. thank you!

I love your site design, just shared site with my friend :xx

saylinds · November 17, 2020

@tuanphan Wow thank you so much! For how many sites you probably see that is a high compliment 🙂

SouthernSunEvents · June 29, 2021

On 11/11/2020 at 9:41 PM, tuanphan said:

above code for 7.0 brine template

I see you solved?

Tried this code but no luck. Any ideas?

http://www.southernsunevents.com

PW: sse2020

tuanphan · July 1, 2021

On 6/29/2021 at 10:46 PM, SouthernSunEvents said:

Tried this code but no luck. Any ideas?

http://www.southernsunevents.com

PW: sse2020

Add to Design > Custom CSS > Then save & reload the site

/* Mobile header transparent */
@media screen and (max-width:640px) {
body.homepage .Mobile-bar.Mobile-bar--top {
    background-color: transparent;
}
body.homepage {
    margin-top: 0 !important;
}
}

SouthernSunEvents · July 1, 2021

12 hours ago, tuanphan said:

Add to Design > Custom CSS > Then save & reload the site

/* Mobile header transparent */
@media screen and (max-width:640px) {
body.homepage .Mobile-bar.Mobile-bar--top {
    background-color: transparent;
}
body.homepage {
    margin-top: 0 !important;
}
}

Works great but now the logo is scrolling and overlapping my banner image text. Punch the code to do tablet too and having the same problem. Thanks!

Edited July 1, 2021 by SouthernSunEvents

SouthernSunEvents · July 22, 2021

On 7/1/2021 at 4:07 PM, SouthernSunEvents said:

Works great but now the logo is scrolling and overlapping my banner image text. Punch the code to do tablet too and having the same problem. Thanks!

@tuanphanwanted to add to this that this made the homepage transparent only and I'm aiming for site wide. Thanks!

tuanphan · July 23, 2021

12 hours ago, SouthernSunEvents said:

@tuanphanwanted to add to this that this made the homepage transparent only and I'm aiming for site wide. Thanks!

change

Quote

body.homepage

to

Quote

body

SouthernSunEvents · July 23, 2021

3 hours ago, tuanphan said:

change

to

No luck on this

Using code below. Do I have it correct?

/* TRANSPARENT MOBILE HEADER - NEED SITEWIDE */
@media screen and (max-width:640px) {
body Mobile-bar.Mobile-bar--top {
background-color: transparent;
}
body {
margin-top: 0 !important;
}
}

tuanphan · July 25, 2021

On 7/23/2021 at 5:27 PM, SouthernSunEvents said:

No luck on this

Using code below. Do I have it correct?

/* TRANSPARENT MOBILE HEADER - NEED SITEWIDE */
@media screen and (max-width:640px) {
body Mobile-bar.Mobile-bar--top {
background-color: transparent;
}
body {
margin-top: 0 !important;
}
}

Can you share link to page in screenshot?

SouthernSunEvents · July 26, 2021

On 7/24/2021 at 10:41 PM, tuanphan said:

Can you share link to page in screenshot?

Looking to do site wide but just in case it's:

https://www.southernsunevents.com/contact-us

tuanphan · July 27, 2021

18 hours ago, SouthernSunEvents said:

Looking to do site wide but just in case it's:

https://www.southernsunevents.com/contact-us

Try this code >> Then save & reload the site

.tweak-mobile-bar-top-fixed .Mobile-bar--top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    background-color: transparent !important;
}
@media screen and (max-width:640px) {
body {
    margin-top: 0 !important;
}
}

SouthernSunEvents · July 27, 2021

5 hours ago, tuanphan said:

.tweak-mobile-bar-top-fixed .Mobile-bar--top {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
    background-color: transparent !important;
}
@media screen and (max-width:640px) {
body {
    margin-top: 0 !important;
}
}

Works great and I adjusted to use max with 991px to convert on tablet view too but now my banner images are a bit cropped at the bottom. Any ideas?

Two more questions:

- I have white logos in code injection on these pages for desktop but they aren't converting on mobile/tablet. Do I need a separate injection for this?

- How can I stick the navigation at top sitewide?

Thanks so much for your help!

Edited July 27, 2021 by SouthernSunEvents

SouthernSunEvents · July 27, 2021

1 hour ago, SouthernSunEvents said:

Works great and I adjusted to use max with 991px to convert on tablet view too but now my banner images are a bit cropped at the bottom. Any ideas?

Two more questions:

- I have white logos in code injection on these pages for desktop but they aren't converting on mobile/tablet. Do I need a separate injection for this?

- How can I stick the navigation at top sitewide?

Thanks so much for your help!

Just noticed this happened on my two pages without banner images at the top

tuanphan · July 29, 2021

I have white logos in code injection on these pages for desktop but they aren't converting on mobile/tablet. Do I need a separate injection for this?

Can you share link to a page?

- How can I stick the navigation at top sitewide?

You mean sticky header on scroll?

Q3. overlap

Can you share link to these pages in screenshot? Will need to adjust code on these pages

SouthernSunEvents · July 29, 2021

14 hours ago, tuanphan said:

I have white logos in code injection on these pages for desktop but they aren't converting on mobile/tablet. Do I need a separate injection for this?

Can you share link to a page?

- How can I stick the navigation at top sitewide?

You mean sticky header on scroll?

Q3. overlap

Can you share link to these pages in screenshot? Will need to adjust code on these pages

http://www.southernsunevents.com

PW: sse2020

For navigation I just want to keep the nav menu at top of site and don't want it to scroll down

Links to logo/text overlap pages:

https://www.southernsunevents.com/portfolio

https://www.southernsunevents.com/about

Also on these two pages my banner images have been cropped from the bottom on mobile and tablet, any ideas?:

https://www.southernsunevents.com/contact-us

https://www.southernsunevents.com/services

Thanks @tuanphan!

Edited July 29, 2021 by SouthernSunEvents

tuanphan · July 30, 2021

21 hours ago, SouthernSunEvents said:

http://www.southernsunevents.com

PW: sse2020

For navigation I just want to keep the nav menu at top of site and don't want it to scroll down

Links to logo/text overlap pages:

https://www.southernsunevents.com/portfolio

https://www.southernsunevents.com/about

Also on these two pages my banner images have been cropped from the bottom on mobile and tablet, any ideas?:

https://www.southernsunevents.com/contact-us

https://www.southernsunevents.com/services

Thanks @tuanphan!

Add to About, Portfolio Page Header

<style>
  @media screen and (max-width:640px) {
  .Site-inner {
    top: 83px;
}
  }
</style>

SouthernSunEvents · July 30, 2021

3 hours ago, tuanphan said:

<style>
  @media screen and (max-width:640px) {
  .Site-inner {
    top: 83px;
}
  }
</style>

No luck with this code. Any ideas on these items too? Thanks so much for your help

- Keeping navigation at top of the page (no scroll)

- Cropped banner images on the following pages:

http://www.southernsunevents.com/contact-us

Edited July 30, 2021 by SouthernSunEvents

tuanphan · August 1, 2021

On 7/30/2021 at 11:41 PM, SouthernSunEvents said:

No luck with this code. Any ideas on these items too? Thanks so much for your help

- Keeping navigation at top of the page (no scroll)

- Cropped banner images on the following pages:

http://www.southernsunevents.com/contact-us

http://www.southernsunevents.com/contact-us

Can you share link to page where you added code? We will check it again

SouthernSunEvents · August 2, 2021

On 8/1/2021 at 2:47 AM, tuanphan said:

Can you share link to page where you added code? We will check it again

Just tried this again and now it magically works but now tablet nav is a mess?

Still needing help with the following:

- Keeping navigation at top of the page (no scroll)

- Cropped banner images on the following pages:

http://www.southernsunevents.com/contact-us

http://www.southernsunevents.com/services

Transparent Mobile Navigation on Brine Template

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

saylinds

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources