Can’t get header to be transparent with absolute positioning on mobile devices

Home Forums All Other Themes Can’t get header to be transparent with absolute positioning on mobile devices

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #180455
    SHELBERT MILLERSHELBERT MILLER
    Participant
    • Topics: 2
    • Replies: 4
    • Total: 6
    Member since: March 7, 2021

    my site url is novarradigital.com .

    theme I am using is digital-agency

    On devices with width <767px the header has a white background color. The only way I could make it transparent is with position:absolute. But that is causing elements to overlap.

    How can I make it transparent without position:absolute?

    #180478
    Forum ModeratorForum Moderator
    Participant
    • Topics: 0
    • Replies: 27440
    • Total: 27440
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    @media screen and (max-width:479px) {
    .nivo-caption { top:25%;}
    .slider-main .nivo-caption .title { width:100% !important; max-width:inherit !important;}
    .slider-main .nivo-controlNav { bottom:-10px !important;}
    }
    
    @media screen and (min-width:480px) and (max-width:767px) {
    .nivo-caption { top:28%;}
    .slider-main .nivo-controlNav { bottom:0;}
    }

    Regards,
    Dave

    #180489
    SHELBERT MILLERSHELBERT MILLER
    Participant
    • Topics: 2
    • Replies: 4
    • Total: 6
    Member since: March 7, 2021

    not working. If i remove position absolute the header becomes white again

    #180490
    SHELBERT MILLERSHELBERT MILLER
    Participant
    • Topics: 2
    • Replies: 4
    • Total: 6
    Member since: March 7, 2021

    it also makes the header gray on large screen devices

    #180513
    Forum ModeratorForum Moderator
    Participant
    • Topics: 0
    • Replies: 27440
    • Total: 27440
    Member since: August 16, 2013

    Hi,

    We can’t make header transparent without using position absolute.

    Kindly use position absolute and add this CSS to solve overlapping issue:

    @media screen and (max-width:479px) {
    .nivo-caption { top:25%;}
    .slider-main .nivo-caption .title { width:100% !important; max-width:inherit !important;}
    .slider-main .nivo-controlNav { bottom:-10px !important;}
    }
    
    @media screen and (min-width:480px) and (max-width:767px) {
    .nivo-caption { top:28%;}
    .slider-main .nivo-controlNav { bottom:0;}
    }

    Regards,
    Dave

    #180519
    SHELBERT MILLERSHELBERT MILLER
    Participant
    • Topics: 2
    • Replies: 4
    • Total: 6
    Member since: March 7, 2021

    I have add that code please check my site you will see that it is not working.. the overlapping is still happening

    #180520
    SHELBERT MILLERSHELBERT MILLER
    Participant
    • Topics: 2
    • Replies: 4
    • Total: 6
    Member since: March 7, 2021

    ok its working now I had to remove !important from default css file but on lareg screens im seeing a thin dark layer of opacity… thats not supposed to happen

    #180537
    Forum ModeratorForum Moderator
    Participant
    • Topics: 0
    • Replies: 27440
    • Total: 27440
    Member since: August 16, 2013

    Hi,

    Your website is on under construction mode. Therefore we are unable to check the issue.

    Regards,
    Dave

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.