Drop Down Menu Edits

[Hemmings]

Hi,

I’m looking for a way to edit the drop down menus on my Kleo theme website. Specifically, is there a setting I can change to make it roll out smoothly rather than just appear and any way to remove the white border of the drop down so that it is all the same colour? See website here: http://www.citizen-state.com/ (drop down under “Discover Citizen State”)

Thank you so much for your help.

[Laura]

Hello, can you explain a bit more so i can understand what do you want? 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Hemmings]

Sure thing. Right now, when you hover over drop down menus on my site they immediately appear on hover. I’d like to change that setting so that they smoothly roll down or fade in rather than just abruptly appear. In addition, the menu items seem to have a white border at the very top (see screenshot). I’d like to remove that so it is flush with overall menu and more integrated.

Thank you 🙂

Attachments:

You must be logged in to view attached files.

[Laura]

Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[Radu]

Hi,

Use this CSS

COPY CODE

.header-centered .dropdown > .dropdown-menu.sub-menu {
    border:0;
    box-shadow:none;
}

The CSS will be added to wp-admin -> theme options -> general settings -> quick CSS

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Hemmings]

Thanks Radu,

Unfortunately, it doesn’t seem to have removed the border or created a smooth effect. Might there be another fix we could try?

[Radu]

Hi,

Wired I’ve tested before providing this.

COPY CODE

.header-centered .dropdown > .dropdown-menu.sub-menu {
    border:0 !improtant;
    box-shadow:none !important; 
}

Try with important declaration

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Hemmings]

Yay! It worked with !important.

Any idea how to also get the smooth roll down or appear effect?

Thanks for all your work on this.

[Radu]

If you will have to add this class .kleo-scroll-to to the button or link that goes to https://domain.tld/site#anchor it will make the smooth effect

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Hemmings]

My apologies for not being more clear. The effect I want to achieve is for the submenu options to roll down from the main menu, rather than just appear. Is there a way to animate this?

[Radu]

I see,

Just use this css

COPY CODE

.kleo-main-header li.open ul.dropdown-menu {
    opacity: 1 !important;
    visibility:visible; 
}

.kleo-main-header li ul.dropdown-menu {
    opacity: 0 !important;
    display:block;
    visibility:hidden;
    transition: opacity 0.3s ease-in, visibility 0.3s ease-in;

}

The CSS will be added to wp-admin -> theme options -> general settings -> quick CSS

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts