Dropdown width

Support
#1

Hi there!

I have to do some customization and was trying to force the hover state on the dropdown to play with that but doing it on the li doesn’t see to work, see here http://demo.theme.co/integrity-1/

I have forced the hover state but it doesn’t show up the dropdown menu, which element should I target to view that?
When I mouseover that x-active class get added.
How this is handled? I need to enable that without keep hovered all the time. Which element to target? Or how do I do that?

Also, in the pro header, the dropdown doesn’t accept the vw units? I need to expand it to the viewport edges, how do I do that? Like this.
Thoughts?

#2

Hello Abd Ur Rehman,

Thanks for writing in!

1.) The x-active get added with a custom jQuery script that is only triggered when you hover over the menu item. You can only enable it by hovering the menu item. If you want to display the submenu all the time, you will need this custom css:

.desktop .menu-item>.sub-menu {
    display: block;
}

2.) The drop down width will only accept auto, em, px and rem. If you want to override the width using vw unit, please use a custom inline element css instead. Find the “Customize” tab and insert this as the inline element css:

$el .x-dropdown {
    width: 100vw;
}

Hope this helps. Please let us know how it goes.

#3

This shows them all, how to apply it on just one?

How does the $el works? I didn’t get this, can you explain with more details?

Also, when targeting the submenu it shows this way.

#4

Hi @abdurrehman,

$el targets the element that you are currently editing. It will become the generated class on frontend.

This is because submenu position is absolute. It’s initial postion is based on the main link URL position. Left or right position is already set. So, with this, setting it’s width 100vw, means it will overflow. Note that you have to understand structure to make this works especially positioning.

Hope this helps.

#5

So how to clear this to make it visible in the 100wv?

#6

Hi Abd Ur Rehman,

To understand $el more, please check this KB article:

It will not be easy for the default X menu structure to customize the way you want it as it will involve some customization which goes beyond the scope of our support.

However, you might want to check the UberMenu extension that you can use with the X menu:

Hope this helps.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.