[Resolved] Secondary navigation switch icon and submenu width

[Bernhard]

Hello,
In the screenshot you can see how it is now.

The problem is the switcher sign “˅” behind the icon of the plane. if it would then also no longer be there behind the language switcher, it would also be good. Is this possible?

The other problem is the width of the submenu. It should be narrow enough to fit the three letters. I don’t see how to set it in the customizer.

Thank you
Bernhard

[Fernando]

Hi Bernhard,

For the second issue, try this CSS:

.secondary-menu ul.sub-menu {
    width:fit-content;
}

As for the first issue, to clarify, would you like to remove the dropdown icon?

[Bernhard]

Hi Fernando,
Thank you for the CSS.

For the first issue, yes, I would like to remove the dropdown icon.

[Fernando]

I see.

You can try adding this CSS as well:

span.dropdown-menu-toggle {
    display: none !important;
}

.secondary-navigation .main-nav ul li.menu-item-has-children>a {
    padding-left: 7px;
    padding-right: 7px;
}

[Bernhard]

Ok, the dropdown icon is gone. For what is the second part of the CSS with the padding? I see no change.

[Fernando]

By default, menu items that have sub menus have no padding right. I added it back, and added the left padding parameter so you don’t get confused when you change paddings. You can remove the padding-left rule, or remove both if you prefer.

[Bernhard]

Perfect, thank you 🙂

[Fernando]

You’re welcome Bernhard! 🙂

[Bernhard]

Hi there,
one more question: in the customizer I can select for the secondary menu the drop down directions left and right. Is it possible to center?

[David]

Hi there,

there is no center option.
We could use some CSS to do something like that.

Is it just on mobile ?

[Bernhard]

Hi David,
yes, on mobile.

[David]

Which site ? as i don’t see the changes that you did with Fernando

[Bernhard]

Sometimes an old version hangs somewhere in the cache. I hope you can see it here
https://www.tourist-in-rom.com/en/ (if you see 5 icons in the menu for fb / plane / train / bus / taxi it’s the correct version)

The padding I inserted in the customizer, in the child team it did not work.

.secondary-navigation .main-nav ul li.menu-item-has-children>a {
    padding-right: 7px;
}

[Fernando]

Can you try adding those icons through a Block Element hooked to inside_secondary_navigation? You may use a WP Navigation Block.

We’ll try to center it afterwards.

Or, you can also move the other menu items -> Colosseum, Vatican, Autumn, Language button instead of the icons. Either should be fine.

[Bernhard]

Hi Fernando,
I think this is too much effort. Also because I have to reproduce it later in three languages for each change. It looks good this way too.
Thanks for the help 🙂
Bernhard

[Author]

Posts