Change mega menu fold direction

Resolved Milan
(@mimoho)

4 years, 6 months ago

I’d like to change the fold direction for subcategories in a mega menu as the lower levels are cut off from the screen and OceanWP does not detect the browser window edge automatically to turn over a sub menu if cut off. At least one of the two things should be implemented.
Found a similar issue here https://wordpress.org/support/topic/changing-menu-transition-direction/ but it does not allow for further comments.

Viewing 6 replies - 1 through 6 (of 6 total)

Amit Singh
(@apprimit)

4 years, 6 months ago
Hello,

Try to add the below code to the Customize > Custom CSS section and check it works or not –
```
.sf-menu ul.sub-menu ul {    
     left: -100%; 
}
```
I’ll suggest you create a mega menu to fix this issue. OceanWP has mega menu features that you can use.
Thread Starter Milan
(@mimoho)

4 years, 6 months ago

Thank you Amit. But now as you can see here, there is no automatic line break for sub menu names in rows that are longer than the width defined in Header -> Menu -> Dropdown Styling. Is there also a solution to this? And would it be possible to add this as a 1-click function to OceanWP? I can imagine that this is not an isolated problem.
Amit Singh
(@apprimit)

4 years, 5 months ago
Please try the below code –
```
.dropdown-menu ul li a.menu-link {
    white-space: normal;
}
```
For the width, kindly set the dropdown menu width from the Customize > Header > Menu section.
Thread Starter Milan
(@mimoho)

4 years, 5 months ago

Thank you @apprimit for your support. However, using the code you last sent me does not have any effect on the line break issue. Using both codes together comes to the result as you can see on the website here: Some posts in the navigation bar’s categories overlay other items. Even though I can change the width for the first dropdown menu, this is not applied to the side-folding layer-2 sub-menu.
Any other idea?
Amit Singh
(@apprimit)

4 years, 5 months ago
Can you try this one?
```
.dropdown-menu ul li a.menu-link {
    white-space: unset;
    width: 300px;
}
```
Thread Starter Milan
(@mimoho)

4 years, 5 months ago
With a matching width value as defined in Header -> Menu -> Dropdown styling it now looks like expected using the Custom CSS:
```
display: none;
}
.sf-menu ul.sub-menu ul {    
     left: -100%;
}
.dropdown-menu ul li a.menu-link {
    white-space: unset;
    width: 380px;
}
```
Thanks @apprimit Would appreciate when there were inbuilt options for that.
- This reply was modified 4 years, 5 months ago by Milan.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Change mega menu fold direction’ is closed to new replies.