fc1 Posted November 3, 2022 Share Posted November 3, 2022 hello, i am using the following code to change the color of my site title and navigation on my home page: /* change logo color home page */ #collection-636357ca50701827c3d8846a .Header-branding { filter: invert(0.65); } #collection-636357ca50701827c3d8846a #collection-6259fd32eef5817d8af2cdd7 .Header-nav-item { color: #6a4b37; } this is working great in desktop, but unfortunately i cannot see the site title or navigation in mobile view. can anyone help me fix this? thank you! (i do not know if any of the other code in my css is impacting this so i will list it all here just in case that is helpful:) /* remove underline from hyperlinks */ a{ border-bottom: none !important; } /* remove hyphens from headings */ p, h1, h2 { -webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important; } /* accordian block full width */ .sqs-block-accordion .accordion-item__description { max-width: unset !important; width: 100%; } /* remove mobile bar */ .Mobile-bar.Mobile-bar--top { position: absolute !important; background-color: transparent; z-index: 99999; } /* Mobile remove white bar */ @media screen and (max-width:640px) { .Mobile-bar.Mobile-bar--bottom { display: none; }} /* Desktop - Site Title */ .Header-branding:after, a.Mobile-bar-branding:after { content: "empathy stories"; display: block; color: #fff; font-family: 'quasimoda'; font-weight: 400; font-size: 34px; letter-spacing: .28em; line-height: 1em; padding-left: 16px; } a.Header-branding, a.Mobile-bar-branding { display: flex; align-items: center; } @media screen and (max-width:640px) { a.Mobile-bar-branding:after { font-size: 20px; } } /* Mobile Logo size */ img.Mobile-bar-branding-logo { width: 25px; } /* Mobile Menu */ .Mobile-overlay-menu { width: 100% !important; } nav.Mobile-overlay-nav.Mobile-overlay-nav--primary { margin-left: 65px; margin-top: 20px; } /* blog logo */ body[class*="type-blog"].view-item { a.Header-branding, a.Mobile-bar-branding { filter: invert(1); -webkit-filter: invert(1); }} /* Mobile */ @media screen and (max-width:640px) { main.Index>section:first-child { height: 100vh !important; }} /* change logo color connect page */ #collection-6259fd32eef5817d8af2cdd7 .Header-branding { filter: invert(0.65); } #collection-6259fd32eef5817d8af2cdd7 .Header-nav-item { color: #6a4b37; } /* change logo color home page */ #collection-636357ca50701827c3d8846a .Header-branding { filter: invert(0.65); } #collection-636357ca50701827c3d8846a .Header-nav-item { color: #6a4b37; } Link to comment
fc1 Posted November 3, 2022 Author Share Posted November 3, 2022 oops, typo: i am using the following code to change the color of my site title and navigation on my home page: /* change logo color home page */ #collection-636357ca50701827c3d8846a .Header-branding { filter: invert(0.65); } #collection-636357ca50701827c3d8846a .Header-nav-item { color: #6a4b37; } Link to comment
fc1 Posted November 3, 2022 Author Share Posted November 3, 2022 also, once that is sorted out i'd like to change the opacity of the color that moves over the screen when viewing the navigation options in mobile. i'd like it to be more opaque but i do not know where to change that. thank you! Link to comment
Ziggy Posted November 3, 2022 Share Posted November 3, 2022 Hi @fc1, I can't actually see the problem that you're reporting here, can you share a few screenshots? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
fc1 Posted November 4, 2022 Author Share Posted November 4, 2022 hi @Ziggy thanks for taking a look the website is empathystories.org here is a screen shot of the home page where the site title and navigation are not visible on mobile and a screen shot of another page where the site title and navigation are visible on mobile Link to comment
Ziggy Posted November 4, 2022 Share Posted November 4, 2022 You need this CSS on the pages that do not have a image at the top: .Mobile-bar.Mobile-bar--top { filter: invert(0.65); } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
fc1 Posted November 4, 2022 Author Share Posted November 4, 2022 thank you for responding @Ziggy i don't have access to code injection per page how would i include code in the general custom css for home page mobile? Link to comment
fc1 Posted November 4, 2022 Author Share Posted November 4, 2022 @Ziggy i put the code you shared in custom css looks great on the pages that needed the inverted text but the title and navigation are not not legible on the pages that need a white title Link to comment
Ziggy Posted November 5, 2022 Share Posted November 5, 2022 You can target individual page with this CSS by either using page IDs: This method for finding IDs and then the code below: #collection-this-is-your-first-page, #collection-this-is-your-second { .Mobile-bar.Mobile-bar--top { filter: invert(0.65); } } Or place this code in the individual page header code injection for the pages you want the inverted logo: <style> .Mobile-bar.Mobile-bar--top { filter: invert(0.65); } </style> fc1 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
fc1 Posted November 6, 2022 Author Share Posted November 6, 2022 @Ziggy that worked thanks so much! are you able to advise on the 2nd art of the question? i'll attach a screen shot so you can see. i want the orange overlay to be more opaque so the background doesn't interfere with reading the mobile navigation dropdown menu. thank you! On 11/3/2022 at 12:25 AM, fc1 said: also, once that is sorted out i'd like to change the opacity of the color that moves over the screen when viewing the navigation options in mobile. i'd like it to be more opaque but i do not know where to change that. thank you! Link to comment
tuanphan Posted November 10, 2022 Share Posted November 10, 2022 On 11/6/2022 at 11:12 AM, fc1 said: that worked thanks so much! are you able to advise on the 2nd art of the question? i'll attach a screen shot so you can see. i want the orange overlay to be more opaque so the background doesn't interfere with reading the mobile navigation dropdown menu. thank you! Have you solved it yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
fc1 Posted November 10, 2022 Author Share Posted November 10, 2022 hi @tuanphan no, haven't solved the 2nd part of the question yet do you have a solution? thanks! Link to comment
tuanphan Posted November 13, 2022 Share Posted November 13, 2022 On 11/11/2022 at 2:32 AM, fc1 said: hi @tuanphan no, haven't solved the 2nd part of the question yet do you have a solution? thanks! Add to Design > Custom CSS .Mobile-overlay-menu { background-color: rgba(250,152,5,.9) !important; } fc1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
fc1 Posted November 17, 2022 Author Share Posted November 17, 2022 this worked @tuanphan thanks so much! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment