Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Customizing Menu for Mobile


lindsey123

Question

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 post
  • Answers 10
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

10 answers to this question

Recommended Posts

  • 0

Change site title & mobile color on homepage mobile?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

@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 post
  • 0
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?

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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

Link to post
  • 0
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

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
Posted (edited)

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

Edited by lindsey123
Link to post
  • 0
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;
}
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

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

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...