Brilliant – that works perfectly now.

Thanks Yigit.!

Thanks Yigit
I’ve checked all those post points. Have cleared cache and that’s resolved all issues except one:
I’ve got this code in Quick CSS to stop the standard menu bar menu items overlapping with the logo when reducing browser width…

———————————————————————————–
@media only screen and (max-width: 1100px) {
#mobile-advanced, #advanced_menu_toggle, #advanced_menu_hide { display: block; }
nav.main_menu { display: none; }}
#wrap_all {
position: relative !important;
}
———————————————————————————–
It seems to work OK except that when reducing browser width to the point where the standard menu disappears, there is a about 200px of further width before the hamburger menu displays. Is there any code tweak I need to do to display the hamburger menu as soon as the standard menu disappears?

Thanks

Great thanks Yigit

Hi Ismael

As mentioned above – that code did not work, and subsequent changes. So we abandoned the footer menu

Thanks.

Thanks Vinay

That doesn’t quite work as it hides the current Child 1 drop menu on some of the nav items.

Hi Vinay

Have done that and it fixed desktop, but has reverted the mobile view back to initial issues. And when slowly reducing browser width down in size, it’s not a consistent responsive reformatting. Just to confirm – here’s the total custom css for this:

@media only screen and (max-width: 767px) {
.responsive #socket .sub_menu_socket {
display:block!important;
}}

@media only screen and (max-width: 767px) {
li#menu-item-6381 {
padding-left: 0!important;
}

#socket .sub_menu_socket li {
padding: 0 5px;
}}

@media only screen and (min-width: 767px) {
#socket .menu {
position: absolute;
left: 34px;
top: 40px;
}
}

Hi Vinay

As mentioned, all pages under the top nav “Menus” – please see below.

thanks

Hi Yigit

Still no luck unfortunately – here’s the total code I’ve got for the footer….

@media only screen and (max-width: 767px) {
.responsive #socket .sub_menu_socket {
display:block!important;
}}

@media only screen and (max-width: 767px) {
li#menu-item-6381 {
padding-left: 0!important;
}

#socket .sub_menu_socket li {
padding: 0 5px;

Hi Yigit

I’ve added that, cleared cache but both issues still persist.

Thanks

Thanks Andy

Please see screengrab below. The Footer menu is now displaying OK on mobile but 2 issues:

1. Need it to display directly under Copyright
2. Need it to left align with Copyright

hi Andy

Here you go…

Hi Ismael

Yes I do. When adjusting the initial state element colour, it over rides the color states. Should I give you WP admin access to view?

Hi Andy

The first MAIN MENU LINKS option I’ve set up (custom color + custom size) already has the Apply to hover state ticked.

Ticking the same for the 2nd option set up just bounces the menu around on hover.

Based on what you see working now (which is almost what I want), how do I change the default light grey color of the menu links without the above issues happening again?

Should I give you WP admin access to view?

Thanks

Hi Andy

I’ve created another MAIN MENU LINKS component by clicking Edit Element > Main Menu Links.

I’ve set the font size to 14 (same as the other Main Menu Links for the hover state). That fixed the default size issue being different from the Hover state..

But when changing the Font Color as well (to make the default color darker), it then cancels out the active color state?

Hi Basilis

I’ve cleared cache/cookies etc and different browsers but still viewing the same.
The url listed in post at top – I an seeing every sub menu item link RED. Whereas it should only display the active page “Mains” menu link to be red.

Thanks