Skip to main content

Menu drop shadow

Ray H

I have used a pe-made header with menu from your header menu selection.

It already has a drop shadow at the top of the block how do I change this so the shadow is at the bottom of the menu header?

0

Comments

24 comments

Date Votes
  • Sandra Prunici
    • Edited

    Hi,

    Could you please indicate what menu drop shadow do you want to change? 

    If you want to add a shadow or edit the existing one (for drop-down menu) you have to click on one sub-menu item and select the "Colors" option. From here you have to select the "Shadow" option https://jmp.sh/YdD1PTX

    Best regards,
    Sandra

    0
  • Ray H
    • Edited

    The menu is the main header menu, see image attached.

    The menu has a top shadow but no bottom shadow on the sticky menu.

     

     

     

    0
  • Sandra Prunici

    Hi,

    Thank you! If you want to have the shadow also when you scroll on the page, you have to scroll a bit the page (in the build mode) and then will appear the second header (when you scroll), you have to open the book settings -> Colors -> Shadow and add there the settings for shadow https://jmp.sh/aViHpjX

    Best regards,
    Sandra

    0
  • Ray H

    Sandra

    This is not to what I was referring.

    See my image.

     

    The top has shadow and the bottom of this menu has none. I want shadow where the red line is located.

    How do i have a shadow at the bottom of the menu

     

    0
  • Sandra Prunici

    Oh, ok. Sorry for my reply.
    In this case, if you want to have the shadow in the bottom side of the header, I can recommend setting the "Vertical" option of the Shadow (the second one) with 0 value. See here - https://jmp.sh/mTvgeDW

    Best regards,
    Sandra

    0
  • Ray H

    Oh dear

    Now I have 2 shadows top and bottom.

    I JUST WANT BOTTOM SHADOW!

    Is this possible, I can't see how this is done?

    -1
  • Sandra Prunici

    Dear Ray,

    If you want to have the shadow only for the bottom of the header, you can set a negative value for "Vertical" position https://jmp.sh/FSY3hUb

    0
  • Ray H

    Once again, this gives 2 shadows top and bottom, I only want bottom.

    Please pass this support to someone else as you do not seem to understand me.

    Ray

    0
  • Sandra Prunici

    Hi Ray,

    Could you please a screenshot similar with that last I send you? In my last screenshot, I show you that if you add a negative value to the "Vertical position" (the second one), the shadow will be added only on the bottom. https://jmp.sh/FSY3hUb
    Could you please try again or check if you placed a negative value?
    Thanks!

    Best regards,
    Sandra

    0
  • Ray H

    Aha!

    I see, yes I can do it.

    That was confusing. Also it is of limited functionality. I will probably have to do this manually with CSS.

    Thank you.

    0
  • Sandra Prunici

    Oh great to hear this! 
    If we can help you with something else, feel free to ask us and we will be happy to help you!

    Best regards,
    Sandra

    0
  • Tag Greathouse

    Sandra, I am having a similar issue creating an outset shadow rather than the inset you get with the vertical setting above. In the screenshot you link above for the "xml sitemaps" page you can see that the shadow is below the menu border with the gradient fading downward rather than inside the border and fading upward. I have seen this behavior on many sites but don't know how to achieve the effect in Brizy.

    I am currently using the Brizy Pro Wordpress plugin, not Brizy Cloud, for what it's worth.

    0
  • Sandra Prunici

    Hi,

    At the moment, we have only the "inset" shadow for the header, unfortunately, the "outline" isn't available now, but we plan to add it too. For now, you can try adding some Custom CSS to the header and add the "outline" shadow.

    Thanks!

    Best regards,
    Sandra

    0
  • Tag Greathouse

    Thanks Sandra. I have found the CSS for the drop shadow but I am not able to assign it to the header bar. I looked through the source generated by the page but could not identify how Brizy places an id on the nav bar. I am using a sticky header and only want the shadow to appear after the transition occurs when scrolling down.

     

    Custom CSS for the behavior.

    element [navbar id?] {
    -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.35) !important;
    -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.35) !important;
    box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.35) !important;
    }

     

    Advanced settings on the block for the menu. I need to know what to put where in order to assign the above CSS to the element.

    0
  • Sandra Prunici

    Hi,

    I notice that you add the Custom CSS in the "Custom attributes" but you have to add it in the "Custom CSS" box. See here https://jmp.sh/WjTDxSe. Try to add here the Custom CSS you have without the [navbar id], simple:
    element {
    -webkit-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.35) !important;
    -moz-box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.35) !important;
    box-shadow: 0px 0px 11px 0px rgba(0,0,0,0.35) !important;
    } 

    Best regards,
    Sandra

    0
  • Vishvendra Nathawat

    Hello Sandra, thanks for [navbar id] clarification, I was doing this header shadow effect wrong all day. Though, using the same code I've added the shadow under my header, but I kinda need it to be displayed when user scroll. Right now it appears by default. Could you help me how I can do that.

    Thanks

     

    0
  • Sandra Prunici

    Hi,

    If you want to display the header a bit different when the visitor scroll on the page, it is recommended to set up the header with the "Sticky" mode. This mode offers the possibility to display a different header (with different content and styles) on the scroll. After this, scroll down a bit when will appear the second header. You have to open its settings, go to the More settings. -> Advanced -> Custom CSS and add the code you want to apply. See here how you can do this.

    Best regards,
    Sandra

    0
  • Vishvendra Nathawat

    Thanks Sandra for suggesting Sticky header option, but I was kind of wanted that effect on fixed header when users scroll. 

    Do you think, I could do that? 

    0
  • Sandra Prunici

    Hi,

    Unfortunately, it isn't possible for the Fixed header, to set up some special styles on the scrolling. You can set up the second header (from the Sticky header) similar to the primary header. 

    Best regards,
    Sandra

    0
  • James Darrar

    That option to set the shadow to outset is still not here after 2 years, don't you think that feature is needed??

    0
  • K C George
    • Edited

    Hi James

    We do have an option to set an outset shadow in Brizy Cloud. Please check this video. https://jmp.sh/E96B1U3

    If you are looking for something specific, please let us know.

    0
  • James Darrar

    I was talking about the Header.

    0
  • K C George

    Hi James

    For the header block, we do not have an option to add an outset shadow. Please consider this work around for it. https://jmp.sh/0ZNUZ9I

    0
  • James Darrar

    Thank you for the workaround.

     

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

Ask a Question