Archived topic
Shadow behind content area possible?
9 replies · Started by Andriette on March 2, 2017
My work in progress is http://www.kzn-southcoast.com
Is it possible to have a shadow behind the content and side widget area? And while we are at it; the primary nav bar under the header as well?
Second question: Is it possible to have the primary nav bar to have a dropdown submenu when you hover over it on desktop and have it dropdown when you click on the down arrow when in mobile? Basically to do one thing on desktop but something else on mobile? I really like the hover/dropdown but had to give it up (on desktop) since mobile needs a 'click on arrow' to work right.
Hi Andriette,
- Try this CSS for shadow:
.separate-containers .inside-article, .inside-right-sidebar, .inside-navigation {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
}You can tune the shadow using this cool website here: http://www.cssmatic.com/box-shadow
- I could be wrong but I think it switches to click by default on mobile since there is no cursor to hover?
Let me know if this helps :)
Thank you so much! The code for the shadow effect is working great and I love how it looks!
Re the dropdown menu: I've set it on the "hover" for the submenu so that you can see what happens. When it is set to 'hover' it works perfectly on desktop but goes to the main menu item in mobile instead of allowing you to click on the submenu items and the main menu item. (Click on Beaches to see) It works as it should when I set it on 'click - arrow' but then the 'hover' is lost on desktop. Is there a work-around for this?
Thank you for you time and help with this :)
This is happening because BEACHES is also a page itself - You can click on it even when it's set to hover and it would take you to a page.
I think what you want is a custom link for the menu item BEACHES:
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-link
Let me know if this helps.
Just checked your site on my iPhone and I can see the submenu by clicking the arrow no problem?
I think I found the problem. It seems that when I make a change (let's say I choose the option for the submenu to open on 'hover') and then save it (but stay on that page) and click on the mobile icon (bottom left of my screen) to preview my choice in action - it doesn't work as it should. However, when I look at it on my (real life) phone (like you did) it worked fine like it should be. Might it be that the live preview is not registering the change just then?
Anyway ... I'm very grateful for your help and patience with this issue.
I just replicated the scenario and you are right about it's not working in live preview.
Will ask Tom to take a look :)
Thanks! This is fixed in the next version :)
It is great how 'on top' of everything you are, thank you for over delivering to such a degree. You guys are great!
You're welcome :) Thanks for finding the bug!
