Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 24, 2015 at 10:22 am #541428
    Cacher

    I want to get my site as consistent as possible so this means having the header transparent in mobile view as well as full desktop view.

    Currently in desktop mode the header is transparent and there is no padding. How do I get it to translate on mobile?

    I have tried all the recommended css changes that are suggested in past posts like this and none have worked.

    November 24, 2015 at 11:01 am #541462
    Yigit

    Hey Krunal!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency {
    background-color: transparent;
    position: absolute!important;
}}

    Cheers!
    Yigit

    November 24, 2015 at 11:03 am #541464
    Cacher

    I have already tried that. Did not work. Any other suggestions?

    November 24, 2015 at 11:11 am #541469
    Yigit

    Hey!

    It did not work because you set your header to transparent using custom CSS. I commented out your custom CSS code in Quick CSS field, added the code above then edited your page and set the header to transparent – http://kriesi.at/documentation/enfold/portfolio-item/intro-to-the-header-configurator/. Please review your website now.

    Best regards,
    Yigit

    November 24, 2015 at 11:14 am #541470
    Cacher

    Thank you! That is what I was looking for. Great work.

    A couple more questions.

    Anyway to change the menu icon in mobile view? I would ideally want to see what that looks like without the white background.

    Also, when viewing on safari browser on a iPhone, the contact form fields don’t align. The input boxes are always just slightly off. Why does this happen? You can see it on my homepage.

    November 24, 2015 at 11:36 am #541483
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .av_header_transparency #advanced_menu_toggle {
    background: transparent;
    border: none;
}
@media only screen and (max-width: 480px) {
.responsive .avia_ajax_form .form_element {
    margin-left: 0;
}}

    Cheers!
    Yigit

    November 24, 2015 at 7:01 pm #541873
    Cacher

    Worked perfectly. Everything looks great.

    I appreciate the help.

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘transparent header in mobile view not working’ is closed to new replies.