Reduce width and remove divider line - by scorleo

7 replies2 participantsUpdated by Max Mullins

  • Avatar: scorleo
    scorleo
    Participant

    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

    Avatar: maxmullins
    Max Mullins
    Participant

    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
    Avatar: scorleo
    scorleo
    Participant

    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
    Avatar: maxmullins
    Max Mullins
    Participant

    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
    Avatar: scorleo
    scorleo
    Participant

    Thanks Max!

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

    Thank you!

    #164598 Copied
    Avatar: maxmullins
    Max Mullins
    Participant

    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
    Avatar: scorleo
    scorleo
    Participant

    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
    Avatar: maxmullins
    Max Mullins
    Participant

    Hello @scorleo

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

    Regards,
    Max Mullins

    #164668 Copied

You must be logged in to reply to this topic.Log in/Sign up