Jump to content

Customizing Menu for Mobile

Recommended Posts

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

 

Link to comment
  • Replies 10
  • Created
  • Last Reply
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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!!

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?

image.thumb.png.8affc1516199a632cf62d5dc1f7f64a9.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 months later...

@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;
}
}

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.