[Resolved] Modify sub menu

[Jusung]

Hello. I want to remove the arrow icon next to the name of menu firstly.
secondly, on the sub menu, I wanna reduece the width of submenu.
can you make the width of submenu the same with the width of main menu?
I am talking about 관련 질환, which is third menu.

[Fernando]

Hi Jusung,

To remove the arrow, go to Appearance > Customize > Layout > Primary Navigation. Set the Navigation Dropdown to Hover.

As for the sub-menu width, you can reduce it by adding a CSS like this through Appearance > Customize > Additional CSS:

@media (min-width: 1025px) {
    div#primary-menu ul.sub-menu {
        width: 120px;
    }
}

Alternative code you can try as well:

@media (min-width: 1025px) {
    div#primary-menu ul.sub-menu {
        width: unset;
    }
}

[Jusung]

it doesn’t work.

the code doesn’t work and the way to remove arrow doens’t work…

I guess it is cuz I set Use Navigation as Header..?

[Fernando]

I see. Can you try this code instead?:

@media (min-width: 1025px) {
    div#primary-menu ul.sub-menu {
        width: 120px;
    }

    li.menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }

    li.menu-item-has-children > a {
        padding-right: 20px !important;
    }
}

[Jusung]

It still doesn’t work..
idk why..

[Jusung]

Oh it wokrs now!!
idk why it didn’t work but it works perfectly now!!

Thank you1!!

[Fernando]

You’re welcome, Jusung!

[Author]

Posts