Lorne17 Posted January 24 Share Posted January 24 Hello there, On my site: https://activestatedesigns.squarespace.com (password: SiteTest) I have my header with custom Mega Menus setup. Can I please get help with my CSS code to change the header div background to blue when anywhere on the div you hover over? Also how do I shift the mega menu down so it's not overlapping with my logo? I appreciate the help! Lorne Link to comment
adifederico Posted January 24 Share Posted January 24 Give this a try. .header .header-announcement-bar-wrapper:hover { background-color: var(--siteBackgroundColor); /*can change this to any color*/ } .header-nav-folder-content { margin-top: 40px; } Link to comment
Solution adifederico Posted January 24 Solution Share Posted January 24 Looks like the blue your looking for is: hsl(208, 42%, 30%). So you can write the code like this to get that blue. .header .header-announcement-bar-wrapper:hover { background-color: hsl(208, 42%, 30%); /*can change this to any color*/} Link to comment
Lorne17 Posted January 29 Author Share Posted January 29 Actually, I have another question, when you hover over now that we shifted the mega menu down, it turns off because I leave the header link padding and can't get to the hover pop up. Does that make sense? You can test it out again to see it live. Thanks! Lorne Link to comment
Lorne17 Posted February 1 Author Share Posted February 1 Just wanted to follow up on this. Thanks! Link to comment
tuanphan Posted February 3 Share Posted February 3 On 1/30/2023 at 6:00 AM, Lorne17 said: Actually, I have another question, when you hover over now that we shifted the mega menu down, it turns off because I leave the header link padding and can't get to the hover pop up. Does that make sense? You can test it out again to see it live. Thanks! Lorne Try adding to Design > Custom CSS .header-nav .header-nav-item--folder .header-nav-folder-content { margin-top: -5px; } 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
Lorne17 Posted February 4 Author Share Posted February 4 (edited) @tuanphan, Thanks for this, however, that now puts the mega menu over my logo :( Edited February 7 by Lorne17 Link to comment
tuanphan Posted February 8 Share Posted February 8 On 2/4/2023 at 7:19 AM, Lorne17 said: @tuanphan, Thanks for this, however, that now puts the mega menu over my logo 😞 It looks like you changed Mega Menu layout? It looks like this to me 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
Lorne17 Posted February 14 Author Share Posted February 14 On 2/8/2023 at 2:19 AM, tuanphan said: It looks like you changed Mega Menu layout? Sorry @tuanphan, I was missing a bracket when messing with the CSS below. But the menu should look like my screenshot I previously posted. .header-nav .header-nav-item--folder .header-nav-folder-content { //off logo shuld be 39px but then you can't get to the menu; margin-top: 5px; } Thanks in advance! Lorne Link to comment
tuanphan Posted February 16 Share Posted February 16 On 2/14/2023 at 11:35 AM, Lorne17 said: Sorry @tuanphan, I was missing a bracket when messing with the CSS below. But the menu should look like my screenshot I previously posted. .header-nav .header-nav-item--folder .header-nav-folder-content { //off logo shuld be 39px but then you can't get to the menu; margin-top: 5px; } Thanks in advance! Lorne It looks fine now. Did you solve it? 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
Lorne17 Posted February 16 Author Share Posted February 16 8 hours ago, tuanphan said: It looks fine now. Did you solve it? If you look to the left, it's still covering up the bottom part of my logo. I guess I can deal with it if there's no CSS that can help shift it down, but not have a gap between the menu text and pop up mega menu? Because when I did shift the position of mega menu down, then when you move your mouse to the mega menu it disappears because there's a gap between the menu link and the mega menu div. Link to comment
tuanphan Posted February 21 Share Posted February 21 On 2/16/2023 at 7:56 PM, Lorne17 said: If you look to the left, it's still covering up the bottom part of my logo. I guess I can deal with it if there's no CSS that can help shift it down, but not have a gap between the menu text and pop up mega menu? Because when I did shift the position of mega menu down, then when you move your mouse to the mega menu it disappears because there's a gap between the menu link and the mega menu div. Try adding to Design > Custom CSS .header-nav-folder-content { margin-top: 20px !important; } 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment