[peyton_dcostaParticipant]

Hey X team,

a css question for you. Would you be able to tell me how I can add a drop shadow to the right of the superbly menu (main level) and sub-level menu? i.e. what I am looking for is to have a drop shadow when the mouse is over the background panel of the superbly menu for each level.

my website is: http://lift-jesus-higher-rally.ca

Thank you and Merry Christmas to the team.

[peyton_dcostaParticipant]

sorry one other css question: how can I horizontally centre align the menu text i.e.. home, contact us, to the main level panel.

Thank you and sorry for a double post.

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

#sfm-sidebar .sfm-menu li {
    width: 94%;
}

.sfm-va-middle li:hover {
    -webkit-box-shadow: 7px 8px 14px -2px rgba(159,160,166,1);
    -moz-box-shadow: 7px 8px 14px -2px rgba(159,160,166,1);
    box-shadow: 7px 8px 14px -2px rgba(159,160,166,1);
}

In regards with settings, please check this link https://community.theme.co/kb/integrated-plugins-superfly

Hope that helps.

[peyton_dcostaParticipant]

Hey Christopher,

I think I didn’t explain what I was looking for properly. Sorry.

This is what I am looking for:

1) a shadow to the right of the main level menu panel when mouse over anywhere on the entire panel (almost to tell the user you are over the menu). What I don’t want is a shadow over the text buttons.

2) I need to centre the menu buttons i.e. Home, About Us, Contact Us etc. to the horizontal middle of the menu panel.

Again, sorry for explaining it badly the first time but I have also included an example though without the mouse over, in the screenshot.

Thank you again for all the hard work you guys do to help us.

[Rue NelModerator]

Hello There,

Thanks for updating in! Do you want something like this?

If that is the case, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

#sfm-sidebar .sfm-scroll-wrapper,
#sfm-sidebar .sfm-view {
    -webkit-box-shadow: 8px 0 10px -2px rgba(0,0,0,0.5);
    -moz-box-shadow: 8px 0 10px -2px rgba(0,0,0,0.5);
    box-shadow: 8px 0 10px -2px rgba(0,0,0,0.5);
}

And to move the menu at the middle, you can make use of this code:

body #sfm-sidebar .sfm-scroll .sfm-nav{
    margin-top: 60%;
}

Hope this helps.

[peyton_dcostaParticipant]

Hey Rue,

Thank you very much for the code. While it is not exactly what I was looking for, you pointed me in the right direction. As such, I was able to figure it out. So a Great Big THANK YOU!!!!

Here is the code to what I was looking for in case it helps someone else:

#sfm-sidebar .sfm-scroll-wrapper:hover, #sfm-sidebar .sfm-view {
-webkit-box-shadow: 8px 0 10px -2px rgba(148,148,148,0.1);
-moz-box-shadow: 8px 0 10px -2px rgba(148,148,148,0.1);
box-shadow: 8px 0 10px -2px rgba(148,148,148,0.1);
}

As for the horizontally centring the menu text in the main panel does not work. The code only vertically centres the text, I need it horizontally centred.

Thank you again for all the assistance.

[JoaoModerator]

Hi There,

Please add the following code to Appereance | Customizer | Custom | CSS

#sfm-sidebar .sfm-menu li a, #sfm-sidebar .sfm-menu .sfm-chapter {
    margin-left: 10%;
}

Hope it helps

Joao

[Author]

Posts