Customising mobile and desktop navigation menu

hostyle01 · November 27, 2023

Hi,

Can I please get some help with my site,

1. I would like to move the promotional pop-up to the centre of the screen on mobile, and use custom fonts on both desktop and mobile for this block.

2. On the homepage nav block in desktop, there is a black overlay that pops up as I scroll, which I would like to remove.

3. Mobile menu pop-up: on some pages the alternative logo displays cream on cream background, on mobile menu pop-up the logo should always be black, on some pages the 'x' icon is also cream, this should always be black too.

4. Homepage mobile menu cross item I would like to be black.

5. When viewed on large desktop / 24-27inch imac, H1 becomes smaller as the page gets bigger, which I don't want to happen.

Appreciate the help!

Thanks,

Holly

https://porpoise-mandarin-63tw.squarespace.com/

p/w: besos

tuanphan · November 28, 2023

#1. To use custom font, add this code to Website Tools (under Not Linked) > Custom CSS

/* Popup font */
div.sqs-slide-layer-content * {
    font-family: 'span' !important;
}

To center popup on mobile, use this CSS code

@media screen and (max-width:767px) {
.sqs-slide-wrapper[data-slide-type="popup-overlay"] .sqs-slide-container[data-slide-type="popup-overlay"] .sqs-slide {
    top: 50% !important;
    bottom: unset !important;
    transform: translate(-50%, -50%) !important;
    position: fixed !important;
    left: 50%;
}
}

#2. Use this CSS

/* remove header overlay */
header#header {
    background-color: transparent !important;
}

#3. Can you share link to a page where you have problem?

#4. Use this CSS code

body.homepage .burger-inner>div {
    background-color: black !important;
}

#5.

hostyle01 · December 4, 2023

Thanks @tuanphan! 🙏

Customising mobile and desktop navigation menu

Recommended Posts

hostyle01

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

tuanphan

hostyle01

Create an account or sign in to comment

News

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources