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!

Thanks Josue. I put the code back in so you can test. Thanks!

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

You can close this thread.

Ok that helped. I was able to figure it out, thanks! You can close this thread.

Thanks Andy! Can you please give me an example of quick css for this page and then I can duplicate for the other pages? I know how to find the page-id and have a custom class of contact-form set for each of the contact forms I need to apply this code to. The problem is that this code is affecting the transparent form that I was having an issue with above. The border and background color are being applied to the transparent contact form and that is what is causing the issue, when I remove that code the transparent contact form works fine on mobile.

I just need an example of some quick css to modify the code below to remove the border line around the contact form and change the background color to #f5f5f5 for each of the input fields on this specific page/form and then I can duplicate for the other pages. Thanks!

#top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area {
  border: none !important;
  background-color: #f5f5f5 !important;
}

• This reply was modified 9 years, 4 months ago by djshortkut.

Thanks Yigit. I’ve already tried that and it sort of works but it moves the black background of the mobile menu down so there is a gap between the header and the mobile menu where you can see the page behind it. I was wondering if there is a way just to move the text down with quick css. Maybe add some padding to the black background of the mobile menu? Thanks!

• This reply was modified 9 years, 4 months ago by djshortkut.

Ok, so I finally figured out the code that it conflicting with this code to make it show up incorrectly on my mobile devices. The background color is what is causing the issue. What I want to do is have the background color of all of the contact forms on my site have a background color of #f5f5f5 Can I either target these with a page id or a custom class? They all use the default style contact form. I have a custom class of contact-form selected for these contact forms. I have provided all of the pages that currently have the default style contact form in use where I want the background to remain #f5f5f5

So to recap I want to have the background color of all of the default contact forms #f5f5f5 so this code doesn’t affect the light contact form anymore. Thanks!

#top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area {
  border: none !important;
  background-color: #f5f5f5 !important;
}

• This reply was modified 9 years, 4 months ago by djshortkut.

You can close this thread.

Thanks Dake! Everything appears to be working as it was before. The only issue I’m still having is the email field not displaying correctly on my mobile devices. If someone can please help me fix this I would greatly appreciate it. Thanks!

Thanks so much! You can close this thread.

You can close this thread.

Thanks Elliott but this code did not work.

Yes, I noticed that too. On all browsers it works fine, and even when you resize the browser. It just doesn’t display correctly on mobile devices for some reason. Here’s the login information.

Thanks Rikard. So I was able to adjust the button in portrait mode but it won’t move it in landscape mode for some reason. What can I do to move the mobile menu close button in landscape mode so it lines up the same way as it does in portrait mode?