dalethompson Posted July 9, 2022 Share Posted July 9, 2022 Site URL: https://madebydale.com I'm using the following CSS code below (I got it from ghostplugins) for a custom mobile menu background and wanted to know if there was any way I could change my logo and menu colours to be white when someone clicks on the menu icon (to show up better on the background)? Code: // Your Own Mobile Menu Background // .header-menu-bg { background: url(https://static1.squarespace.com/static/5ed97dd68a102433a40c0dc3/t/62c9910b8f354d0bb07912db/1657377036033/Wall+Graffiti+-+Mobile+Menu.jpg); background-size: cover; background-position: center; } Pics below show my home page and then the mobile menu background. Thanks in advance! Link to comment
lizasem Posted July 9, 2022 Share Posted July 9, 2022 Two ways: 1. Header Editor panel Click on the header to edit > Click on the mobile icon in the panel > Select Overlay Menu > Select Colors > Pick a theme/ edit theme so the section background is white 2. Design > CSS .header-menu-bg { background: white !important; opacity: 1 !important; } Link to comment
dalethompson Posted July 15, 2022 Author Share Posted July 15, 2022 Thanks for this info, much appreciated! Sorry I wasn't clear in my question though... I changed the menu text colour but I'm still wondering if I'm able to change the logo to white on the mobile version menu screen only (I would want it dark for the desktop version and all other pages in the mobile version, just white for the menu). Is there any way to do that? Link to comment
tuanphan Posted July 18, 2022 Share Posted July 18, 2022 On 7/15/2022 at 11:37 PM, dalethompson said: Thanks for this info, much appreciated! Sorry I wasn't clear in my question though... I changed the menu text colour but I'm still wondering if I'm able to change the logo to white on the mobile version menu screen only (I would want it dark for the desktop version and all other pages in the mobile version, just white for the menu). Is there any way to do that? Add to Design > Custom CSS body.header--menu-open header#header img { filter: brightness(0) invert(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
dalethompson Posted July 20, 2022 Author Share Posted July 20, 2022 Thank you for this!! 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