Inconsistent behavior of the menu

  • Resolved amerseifeddine

    (@amerseifeddine)


    5 years, 2 months ago

    Hi Support,

    After the latest update (that fixes the double menu issue), the menu item colors may turn white by default or when clicked depending on screen size.

    1- Click the website from your desktop.
    2- resize the menu until it first shows the mobile menu.
    3- Note that the menu item colors are white by default.
    4- resize to lower size and note that the menu item colors are now the default theme color but turn into white when highlighted.

    Thanks

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Theme Author WebHunt Infotech

    (@webhuntinfotech)

    Hi,

    We answer your query by mail. please check your email id.

    Thank you

    Theme Author WebHunt Infotech

    (@webhuntinfotech)

    Hi,

    You need to update kyma theme to latest version.

    You are using older version 2.7.3.

    This issue is fixed in Kyma 2.7.6

    If you are using any cache plugin please clear the cache.

    Thank You

    Thread Starter amerseifeddine

    (@amerseifeddine)

    All fixed using latest fix and reflected except the below. No cashing as latest fixes reflected including recent menu fix yesterday.

    Does anyone have the same issue on the latest version?

    1- Access the website from your mobile
    2- Clicking the menu shows blank (invisible) menu item color. It only shows when you click on it.

    This website https://torontorockac.com/athletics/
    Shows same behavior when I view it from mobile and select “Desktop Site” or when simply clicking on any of the menu items. The color turns invisible on menu.

    Thanks

    Theme Author WebHunt Infotech

    (@webhuntinfotech)

    Hi,

    Please use below css rule if mobile menu links are not visible

    @media only screen and (max-width: 767px) {
	.light_header #navy > li > a, #navy > li:not(.current_page_item):hover > a:not(.nav_trigger), #navy > ul > li > a:hover{
		color: #000000!important;
	}
}

    Put css rule in Additional custom css editor

    Please notified us that above support work for you or not.

    Thank you

    Thread Starter amerseifeddine

    (@amerseifeddine)

    Thank you for your response. We are getting closer… Works on mobile not on iPad/Tablet.

    Theme Author WebHunt Infotech

    (@webhuntinfotech)

    Hi,

    You can increase max width in previously given css

    Here the updated css :-

    @media only screen and (max-width: 992px) {
    .light_header #navy > li > a, #navy > li:not(.current_page_item):hover > a:not(.nav_trigger), #navy > ul > li > a:hover{
    color: #000000!important;
    }
    }

    Remove the previous css and add this.

    Please notified us that above support work for you or not.

    Thank you

    Thread Starter amerseifeddine

    (@amerseifeddine)

    Hi again,

    With this settings, I will be a step back where menu shows below the header.

    The best setup I had so far is the below. If it cannot be fixed, the below is the best I have. Please take your time fixing it altogether and no need to rush. I will close this for now but please include it in future releases.

    Thanks again for all the help

    @media only screen and (max-width: 767px) {
	.light_header #navy > li > a, #navy > li:not(.current_page_item):hover > a:not(.nav_trigger), #navy > ul > li > a:hover{
		color: #000000!important;
	}
}

.mob-menu{display:none;}
@media (max-width: 992px){
.mob-menu{
display:block;
}
#main_nav.has_mobile_menu{
padding:0 !important;
}
}
    Theme Author WebHunt Infotech

    (@webhuntinfotech)

    Ok, we will include you given css.

    Thank you

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Inconsistent behavior of the menu’ is closed to new replies.