Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • July 16, 2015 at 9:06 pm #474561
    djshortkut

    I noticed when I pull up my mobile menu on my iPhone from the home page the hover color works like the attached image. When I pull up the mobile menu from any page other than the home page, the hover color of #018db0 doesn’t work. Is this normal behavior or is there anything I can do to fix this? Thanks!

    July 17, 2015 at 4:09 pm #475032
    Ismael

    Hi djshortkut!

    Thank you for using Enfold.

    I didn’t check this on an actual iPhone device but the hover state of the mobile menu item is set to #018db0 even on other pages. This is the hover state css code:

    #mobile-advanced li > a:hover, .html_header_mobile_behavior #mobile-advanced span:hover, .html_header_mobile_behavior #mobile-advanced span:hover a {
  background-color: #018db0;
  color: #ffffff;
}

    Try to add the code again on the Quick CSS field.

    Best regards,
    Ismael

    July 21, 2015 at 9:11 pm #476726
    djshortkut

    Thanks. I tried inputting the code but it didn’t help. The hover color still isn’t working on my mobile device.

    July 22, 2015 at 4:21 pm #477184
    Dake

    Hey!

    I tested on an android and iphone, the hover effect does change color on iphone from other pages.

    If the below css change doesn’t make a difference, may we please have temp access to your website again?

    #mobile-advanced li > a:hover, .html_header_mobile_behavior #mobile-advanced span:hover, .html_header_mobile_behavior #mobile-advanced span:hover a {
  background-color: #018db0 !important;
  color: #ffffff !important;
}

    Best regards,
    Dake

    July 23, 2015 at 6:59 am #477519
    djshortkut

    Thanks Dake. I added this code into quick css but it still doesn’t seem to work. When I’m on the homepage of my site on my mobile device and pull up the mobile, when I touch a menu item the background hover color shows up (like in the image above) but once I go to any other page on my website and pull up the mobile menu this does not happen anymore. I provided temp access so you can take a look to see what is going on. Thanks!

    July 23, 2015 at 5:25 pm #477846
    Dake

    Hi!

    Can you take a screenshot of the hover effect on your iphone?

    So we can find out the exact background color it’s changing to and decipher what css is causing it.

    Best regards,
    Dake

    July 23, 2015 at 5:39 pm #477862
    djshortkut

    Here is a screenshot from my iPhone showing the hover effect.

    July 23, 2015 at 6:30 pm #477884
    Dake

    Hi!

    I actually meant a screenshot of the hover effect on a page that isn’t the homepage (the hover effect showing the incorrect color).

    Regards,
    Dake

    July 23, 2015 at 7:10 pm #477909
    djshortkut

    Oh, sorry, that makes sense. I included the screen shot in the private content. The hover effect really doesn’t show a color at all on the other pages. This is what it looks like. Hope that helps!

    July 23, 2015 at 9:34 pm #477973
    Dake

    Hey!

    That’s strange, when i tested the hover effect on an Iphone yesterday, I saw a grey background color.

    If you long press, does the menu highlight at all?

    Best regards,
    Dake

    July 23, 2015 at 9:45 pm #477977
    djshortkut

    Huh, strange. When I long press the menu buttons just the text of the menu items hightlights in what looks like grey.

    July 28, 2015 at 6:34 am #479448
    Ismael

    Hi!

    The hover effect is working but you need to touch the menu bar instead of the actual menu text. Try to use this:

    #mobile-advanced li:hover, .html_header_mobile_behavior #mobile-advanced span:hover, .html_header_mobile_behavior #mobile-advanced span:hover a {
  background-color: #018db0 !important;
  color: #ffffff !important;
}

    Cheers!
    Ismael

    July 29, 2015 at 12:29 am #479956
    djshortkut

    Thanks Ismael! I tried inputting this code and it still doesn’t work. When I am on my homepage and access my mobile menu on my iPhone the hover feature works for all of the menu items. I can hold my finger on the screen and the hover color shows up on each menu item. When I try pulling up the mobile menu when I am on another page on my site, it does not show up no matter where I place my finger on the screen and hold it.

    The interesting thing is that if I resize my browser, the hover works with my mouse. Any idea how I can make this show up on my iPhone on all of the pages? Is this an issue with iOS? I noticed on all of your demos the same thing happens. Basically I just want to make it so that no matter what page the user is on, when they touch on a menu item the hover background shows up if it is pressed or held on an iOS device. Not sure if this happens on other mobile devices with different operating systems as I only have iOS devices to test this on. Thanks for all the help!

    July 29, 2015 at 9:01 am #480069
    Ismael

    Hi!

    Did you place the code inside a media query? This is how it looks when I checked it:

    @media only screen and (max-width: 989px) {
#mobile-advanced li:hover, .html_header_mobile_behavior #mobile-advanced span:hover, .html_header_mobile_behavior #mobile-advanced span:hover a {
  background-color: #018db0 !important;
  color: #ffffff !important;
}}

    Please try to add the code above the Quick CSS field or check if there are missing brackets in the css media query declarations.

    And do you have an iPhone 6 with retina display?

    Best regards,
    Ismael

    July 29, 2015 at 5:16 pm #480359
    djshortkut

    I didn’t place the code inside a media query but I tried inputting the code above inside a media query and it still doesn’t work. I also checked if there are any missing brackets and it doesn’t look like there are. Yes I have an iPhone 6 with retina display.

    August 6, 2015 at 8:01 am #483708
    Ismael

    Hi!

    I checked the Quick CSS field and there are multiple css media queries which are not needed. For example, you have this code:

    @media only screen and (max-width: 767px) {
.responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0px 0px !important;
font-size: 14px !important;
}
}

@media only screen and (max-width: 767px) {
.responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0px 0px !important;
font-size: 14px !important;
}
}

    You can remove the other media query because they are basically the same. And you have this code with the same media query:

    @media only screen and (max-width: 767px) {
#top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
  padding: 0;
}}

    You can combine these codes to a single media query:

    @media only screen and (max-width: 767px) {
#top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
  padding: 0;
}

.responsive #top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
padding: 0px 0px !important;
font-size: 14px !important;
}}

    Please clean up the css codes and css media queries usually go at the very bottom of the stylesheet. You can try this css media query in order to change the hover effect for retina display:

    https://css-tricks.com/snippets/css/retina-display-media-query/

    Best regards,
    Ismael

    November 16, 2015 at 7:32 pm #536851
    djshortkut

    You can close this thread.

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Mobile Menu Hover’ is closed to new replies.