Customizing Menu for Mobile

Site URL: https://kangaroo-polygon-sn6z.squarespace.com/config/design/custom-css

Hi - I'm trying to adjust my header so that the site logo and menu are all visible against my background image, specifically for mobile only. I need my logo to scale down once it hits mobile, and I need my menu nav expanded screen to have a black background so my white links are visible. If anyone could help out, I'd appreciate it!

https://kangaroo-polygon-sn6z.squarespace.com/config/design/custom-css

Change site title & mobile color on homepage mobile?

@tuanphan - yes, I only need this change to happen on mobile. Need the site title to scale down for mobile, and for the navigation (when the menu is expanded) to have a black background. Let me know if this is something you can help with. Appreciate it!!

1 hour ago, lindsey123 said:

@tuanphan - yes, I only need this change to happen on mobile. Need the site title to scale down for mobile, and for the navigation (when the menu is expanded) to have a black background. Let me know if this is something you can help with. Appreciate it!!

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
a#site-title {
    font-size: 40px;
}
.header-menu-bg.theme-bg--primary {
    background: black !important;
}
}

@tuanphan - thank you so much! That worked! However, there does seem to be a white bar appearing on the side of the menu screen when it is expanded?

Would you also be able to help with scaling down the footer text and icons, as well as the pagination text, as well for mobile only? 

Also, I am wondering for the pagination, if I can make that section transparent so the background image shows through, and the copy on the right side of the screen white (while the copy on the left remains black). Is that something you can help with? Please let me know. Thanks again!!

On 6/15/2020 at 11:39 PM, lindsey123 said:

@tuanphan - thank you so much! That worked! However, there does seem to be a white bar appearing on the side of the menu screen when it is expanded?

Would you also be able to help with scaling down the footer text and icons, as well as the pagination text, as well for mobile only? 

Also, I am wondering for the pagination, if I can make that section transparent so the background image shows through, and the copy on the right side of the screen white (while the copy on the left remains black). Is that something you can help with? Please let me know. Thanks again!!

Hi. Sorry for the late reply. Have you solved yet?

@tuanphan - no worries! I so appreciate your help! I was able to get some code for the pagination, but I still need to resolve scaling down the footer text and icons for mobile. Would you be able to help? Please let me know. Thanks!

10 hours ago, lindsey123 said:

@tuanphan - no worries! I so appreciate your help! I was able to get some code for the pagination, but I still need to resolve scaling down the footer text and icons for mobile. Would you be able to help? Please let me know. Thanks!

I see fine here. Can you describe in detail?

@tuanphan- I would just like some code that would allow me to scale down the footer text and icons for mobile, more than how it currently appears. I would like those elements to be smaller for mobile.

On 6/23/2020 at 11:23 PM, lindsey123 said:

@tuanphan- I would just like some code that would allow me to scale down the footer text and icons for mobile, more than how it currently appears. I would like those elements to be smaller for mobile.

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
/* footer email */
div#block-yui_3_17_2_1_1591579239207_3514 h4 {
    font-size: 15px;
}
/* footer icons */
div#block-yui_3_17_2_1_1591578522059_6474 a {
    width: 15px;
}
}

@tuanphan I just recently took a look at my mobile website and it looks like when my mobile menu is expanded, the menu items are no longer visible. It used to be a black background with white menu items/links. Here is all of the custom code I have. Does any of this need to be updated? I haven't touch the code, or made any design changes through squarespace so I'm not sure why it changed. Can you pinpoint any code that may need to be updated?

.section-background{
    background-image: url(https://static1.squarespace.com/static/5eaf6fc4f965f00825c6bbd9/t/5ed40fa69aade12795395877/1590955948395/background.jpg)!important;
    background-size: cover!important;
    background-position: center center!important;
}

@media screen and (max-width:767px) {
a#site-title {
    font-size: 17px;
}
.header-menu-bg.theme-bg--primary {
    background: black !important;
}
}

.header-announcement-bar-wrapper.shrink {
    background: transparent !important;
}

section.item-pagination.item-pagination--prev-next {
background: linear-gradient(to right, white 50%, black 50%);
}

.item-pagination-link--next h2,.item-pagination-link--next svg {
    color: white !important;
    stroke: white !important;
}

section.item-pagination.item-pagination--prev-next {
background: linear-gradient(to right, white 50%, black 50%);
}

@media(max-width:767px) {
section.item-pagination.item-pagination--prev-next h2 {
    font-size: 14px;
}
}