Menu problem after update to 4.6.0

@gunilla Go to Appearance -> Customize -> Header -> Main Menu and in Active Menu background color, move the horizontal slider to left-most (0). This should solve the problem for you.

Thank you. It looks better now but there is still a “problem”. The area between the two first items in the head menu is a little bit higher and the v after the first item seems to be separated from the item which is not the case on later items in the head menu.

This phenomenon now appears also on the main site https://seniornet.se.

@gunilla This issue will be fixed in the future releases.

Meanwhile, please put the following CSS in Appearance -> Customize -> Additional CSS to fix it

.res-iconify {
top: 0.3px;
line-height: 2.99;
}

New problem after update to version 4.6.2. The menu in https://seniornet.se has become higher and the v indicating submenu is now below the mainitem, not beside as it was before update. Is it due to the extra css I added after earlier update?

Hi @gunilla ,

Please delete the following CSS from Appearance -> Customize -> Additional CSS tab –

.res-iconify {
top: 0.3px;
line-height: 2.99;
}

That should solve this issue.

Thank you, it did work fine.

In https://varkstaden.se there is antoher problem after the latest update. The v after the main-items, indicating subitems are blank and not visible agazinst the black background. How do I get white v-marks?

Hi @gunilla ,

Can you please tell us if there is any additional CSS for “.menu a” in Appearance -> Customize -> Additional CSS tab of your site?

Like –
.menu a {
*some CSS here*
}

Here is the existing menu-css on varkstaden.se:

.menu {
background-color: #000000;
background-image: none;
}

.menu a:hover {
background: #6699cc!important;
text-decoration: none;
}

.menu a {
color: #ffff00 !important;
background: #000000!important;
text-decoration: none;
font-size: 95%;
}

.menu li li a {
color: #ffff00 !important;
background: #000000 !important;
text-decoration: none;
font-size: 87%;
}

.menu li li a:hover {
color: #ffffff !important;
background:#0000CD!important;
text-decoration: none;
}

Hi @gunilla ,

Following CSS from the existing menu-css is affecting the dropdown arrow’s color –
.menu a {
color: #ffff00 !important;
}
Please remove only this color part.

Then go to Appearance -> Customize -> Header -> Main Menu.
Set “Menu Item Link Color” as #ffff00 and check if arrows are visible.

Sorry, it din′t work. When I removed

.menu a {
color: #ffff00 !important;
}

the yellow letters in the menu-items are not visible

@gunilla The issue is occurring because you have set “Menu Item Link Color” in Appearance -> Customize -> Header -> Main Menu as #333333.
Follow the below steps to resolve this:

1. Remove the following CSS that you have added
.menu a {
color: #ffff00 !important;
background: #000000!important;
}

2. Go to Appearance -> Customize -> Header -> Main Menu and set Menu Item Link Color as #ffff00

Follow the above steps and then check the website.

Thank you for excellent support!