[Resolved] Shadow behind content area possible?

Home Forums Support Shadow behind content area possible?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #286388
    Andriette

    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.

    #286536
    Leo
    Staff
    Customer Support

    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 🙂

    #286820
    Andriette

    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 🙂

    #286821
    Leo
    Staff
    Customer Support

    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.

    #286824
    Leo
    Staff
    Customer Support

    Just checked your site on my iPhone and I can see the submenu by clicking the arrow no problem?

    #286878
    Andriette

    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.

    #286927
    Leo
    Staff
    Customer Support

    I just replicated the scenario and you are right about it’s not working in live preview.

    Will ask Tom to take a look 🙂

    #287062
    Tom
    Lead Developer
    Lead Developer

    Thanks! This is fixed in the next version 🙂

    #287089
    Andriette

    It is great how ‘on top’ of everything you are, thank you for over delivering to such a degree. You guys are great!

    #287093
    Leo
    Staff
    Customer Support

    You’re welcome 🙂 Thanks for finding the bug!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.