Tagged: , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #734266

    Hi Chaps,

    I’ve got a transparent header set for all my pages when scrolled to the top. As the header shrinks as the page is scrolled, I have set a black background with 0.8 opacity to help display the menu better. In mobile view, I’m trying to keep the header transparent from top to bottom. I’ve semi-achieved this from help with the forums. The code I have so far is:

     /* transparent header on mobile (scrolled at top)
    -------------------------------- */
    @media only screen and (max-width: 767px) { 
    #top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
      background: transparent!important;
      position: absolute!important;
    }}
    
     /* transparent header on mobile (scrolled below top)
    -------------------------------- */
    @media only screen and (max-width: 768px) {
    .header_bg { display: none !important; }} 
    
     /* no logo on mobile
    -------------------------------- */
    @media only screen and (max-width: 480px) {
    .responsive .logo {
    opacity: 0!important
    }}
    
     /* sticky mobile menu
    -------------------------------- */
    .responsive #top #wrap_all #header {
        position: fixed;
    }
    

    What I can not get rid of (tried pasting code from other threads) is a tiny thin black border at the bottom of the header when scrolled down after the header ‘shrinks’.

    Thank you in advance,

    James

    #734286

    Hey Jambo!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all #header {
        box-shadow: none;
    }}

    Best regards,
    Yigit

    #734315

    Many thanks Yigit!

    James

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Mobile header border – good riddance!’ is closed to new replies.