Help styling menu hover effect prestige theme

[5611632]

Hello everyone,

We are trying to change the hover effect on the prestige theme,

right now it looks like this:

but we would like only the mega menu looks like this , we found a lot of stores using prstige have this even we was thinking its setting but we couldnt find it

please we would like to solve that

thanks in advance

[Laza_Binaery]

Hi @5611632

That looks like difference in height. Maybe there are some different default heading options you can try. But you probably did.

So try instead with this code. You can add it in header section > Custom CSS setting

@media only screen and (min-width: 1068px) {
    .full-menu {
        display: inline-flex;
        line-height: 1;
        height: 100%;
        min-width: 70px;
        white-space: nowrap;
    }
}

.thb-full-menu>li {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

.thb-full-menu>li>a {
    margin: 10px 0;
    height: 100%;
    align-items: center;
    display: inline-flex;
}

It should be like this after

[tim_1]

Try this code into “Theme settings”=> “Custom CSS”

.header__primary-nav-item [data-title]:before {
  bottom: 2rem;
  height: 1px;
}

.header__dropdown-menu:before {
  height: 1px;
  background: rgb(var(--border-color));
  top: 2px;
}

[Small_Task_Help]

@5611632

please we would like to solve that

Hi,

Hope this will help

Apply the hover effect only to mega menus by using CSS in your CSS file

CSS example

/* Remove hover effect from all menu items */
.Header__MainNav .HorizontalList__Item > a:hover {
  background: none;
}

/* Apply hover effect ONLY to mega menu items */
.Header__MainNav .HorizontalList__Item.has-mega-menu > a:hover {
  background-color: #f5f5f5; /* adjust to match your design */
}

If your theme uses a slightly different class name try this:

.Header__MainNav .HorizontalList__Item[aria-haspopup="true"] > a:hover {
  background-color: #f5f5f5;
}

[5611632]

Thanks for your response,

Unfortunately not working,

We need the header menu hover to be exactly like this store: https://www.robotimeonline.com/

[5611632]

Unfortunately not working,

We need the header menu hover to be exactly like this store: https://www.robotimeonline.com/

[5611632]

Thanks for this but still not working ,

we need it to be like this header in this store : https://www.robotimeonline.com/

[tim_1]

What do you mean by “not working” and how my screenshot are different from the example site?

Alternate code to try:

.header__menu-disclosure summary, 
.header__primary-nav-item a {
  position:relative;
}
.header__menu-disclosure summary:before, 
.header__primary-nav-item a:before {
  height: 1px !important;
}

[Laza_Binaery]

Yeah, like @tim_1 said, you should be more precise.

I think that currently, your hover effect is the same as Robotime. On the first screenshot, from defult theme, I thought the difference is more space between line that shows on hover and space after the line.

You do not have sub-menu items so all are just simple links. You said “we would like only the mega menu looks like this” but I do not see that you have any mega menu( and you should have)

And also, Robotime have hover effect on both simple links and menu items with mega menu.

[Daniel-Smith]

Hey,

Would you like to share your issue in more details. As I see, in your site the requested hover effect is already applied. There is no difference between what you’re looking for and what you applied.

If you could explain your requirements in more better way, then this community members and Developers will help you accurately.

Hope this helps.