Return to previous page

Reduce width and remove divider line - by scorleo

This topic has 8 replies, 2 voices, and was last updated 6 years, 11 months ago ago by Max Mullins

scorleo

Participant

May 29, 2017 at 03:39

Hi,

Is there a way to control width of the columns for mega menu and remove the divider line that’s visible?

http://prntscr.com/fd87lf

Thanks!

#164327 Copied

7 Answers
Max Mullins

Participant

May 29, 2017 at 11:09
Hello @scorleo,

Please add following code into the custom.css:
```
#menu-main-menu-1 .nav-sublist-dropdown ul li {
width: 11rem;
padding: 0 0 0 0;}
#menu-main-menu-1 .nav-sublist-dropdown ul li {
width: 11rem;padding: 0 0 0 0;}
#menu-main-menu-1 ul  .menu-parent-item {
border-left:1px solid red;}
.item-design-mega-menu .nav-sublist-dropdown .item-link, .item-design-mega-menu .nav-sublist-dropdown 
.nav-sublist a{
width:11rem;}
```
Regards,
Max Mulins
#164388 Copied
scorleo

Participant

May 30, 2017 at 14:26

Thanks Max!

Editing my response because I noticed something:

Width is adjusted now but across all the menus and not just the mega menus, this results in other menus that have long names to wrap around.

I want to see no divider instead of red line divider.

Also, because the column widths are smaller, the overall table is significantly larger and you can see significant gap between the 5th column and table border on the right. I’m guessing overall width will also need to be adjusted?

#164554 Copied
Max Mullins

Participant

May 30, 2017 at 15:31
Please check this code instead of previous:
```
#menu-main-menu-1 #menu-item-463 .nav-sublist-dropdown ul li {
width: 11rem;
padding: 0 0 0 0;}
#menu-main-menu-1 #menu-item-463 .nav-sublist-dropdown ul li {
width: 11rem;padding: 0 0 0 0;}
#menu-main-menu-1 ul  .menu-parent-item {
border:0px ;}
.et-header-full-width .navigation-wrapper .container, .item-design-mega-menu.columns-5 .nav-sublist-dropdown  {
width:auto!important;} 
```
Regards
Max Mullins
#164560 Copied
scorleo

Participant

May 30, 2017 at 23:47

Thanks Max!

Last line something is amiss, it’s resulting in single column menu –> http://prntscr.com/fe0lwv

Thank you!

#164598 Copied

Max Mullins

Participant

May 31, 2017 at 12:02

Hello, @scorleo

Lines are corected and tested. In addition i have added hover color for top menu of 5-th column css trigger.
#menu-main-menu-1 #menu-item-463 .nav-sublist-dropdown ul li {
width: 11rem;
padding: 0 0 0 0;}
#menu-main-menu-1 #menu-item-463 .nav-sublist-dropdown ul li {
width: 11rem;padding: 0 0 0 0;}
#menu-main-menu-1 ul .menu-parent-item {
border:0px ;}
.et-header-full-width .navigation-wrapper .container, .item-design-mega-menu.columns-5 .nav-sublist-dropdown {
width: 50rem;}
#menu-main-menu-1 .item-design-mega-menu .nav-sublist-dropdown .item-level-1:hover a{ color:red}

Regards,
Max Mullins

#164648 Copied

scorleo

Participant

May 31, 2017 at 13:35

Perfect. All good now. I just had to adjust overall width from 50 to 57 because last column was wrapping around the table.

Thanks Max!

#164662 Copied

Max Mullins

Participant

May 31, 2017 at 13:47

Hello @scorleo

You are always welcome!Be free to write in case any further questions appears.

Regards,
Max Mullins

#164668 Copied
Viewing 8 results - 1 through 8 (of 8 total)