Help with header on the side

Hey,

Can you post a link to your site so that I can see the current setup on your site?

-Kevin

Hi Kevin,
the site is currently only on localhost, I will try to get it up tomorrow so you can take a look. It’s basicall the same set up as here though, just with the above mentioned css added to make the dropdown inside the left header.

Try this CSS and let me know if it works for you:

ul.sub-menu.sf-dropdown-menu.dropdown {
    left: 75% !important;
}

-Kevin

Hi Kevin,

sorry I was not able to get the site online earlier.

I am not sure what you mean with your code, do you mean to replace it instead of my code? You can check here when you hover over “INFO” you see the dropdown and it just sort of jumps in and does not have the smooth transitioning in effect that the dropdown usually has…

Thanks!

I’m seeing the animation for the dropdown menu. Are you wanting a different animation?

-Kevin

Hi Kevin,
it’s not the normal effect though, it just jumps form being non-visible to visible very fast. Normally the theme has a slow transition in effect, the dropdown sort of moves in from the bottom up like here: https://themes.kadencethemes.com/ascend/

It’s powered by javascript and the javascript moves its absolute position. Your forcing it to be positioned static and thus it won’t work the same. Your edits will keep the menu from working like the demo.

A type of workaround could look like this but I really don’t recommend it:

.kad-relative-vertical-content .nav-main .sf-vertical ul {
    height: 0;
    border: 0;
    padding: 0 5px;
    display: block !important;
    margin: -5px 0;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.kad-relative-vertical-content .nav-main .sf-vertical li.sfHover > ul {
    height: auto;
    padding: 10px 5px;
    margin: 10px 0;
}
.kad-relative-vertical-content .nav-main .sf-vertical ul::before {
    display:none;
}
.kad-relative-vertical-content .nav-main .sf-vertical li.sfHover > ul::before {
    display:block;
}
.kad-relative-vertical-content .nav-main .sf-vertical ul li {
        -webkit-transition: all .3s ease-in-out;
        -o-transition: all .3s ease-in-out;
        transition: all .3s ease-in-out;
        height:0;
        position: relative;
        overflow: hidden;
        display:block;
}
.kad-relative-vertical-content .nav-main .sf-vertical li.sfHover > ul > li {
    height:auto;
}

I see. I have to think about it, thank you!