Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • June 6, 2017 at 8:18 pm #804667
    jarstern0

    Hi,

    I’d like to have the following:
    When home-page is opened, transparent header. On scroll down, white sticky shrunken header (with the menu shrinking as well on desktop and mobile)

    All other pages, white header is fine with the same scroll behavior.

    Is there a good way to do this? I seem to be having troubles making it happen.

    Thanks!

    • This topic was modified 7 years, 5 months ago by jarstern0.
    June 6, 2017 at 11:15 pm #804738
    Jordan Shannon

    Hey jarstern0,

    You can simply disable the transparent header on the pages you don’t want it on.

    Best regards,
    Jordan Shannon

    June 7, 2017 at 2:05 am #804768
    jarstern0

    I have the option for header transparency turned on on the webpage. On mobile, it is still showing a white bar on the home page on mobile.

    June 7, 2017 at 9:10 am #804941
    John Torvik

    Hi,

    Just add the following custom CSS code:

    @media screen and (max-width: 767px) ) {
    #header {
    background: transparent;
  }

  #header_main {
   padding-top: 0px !important;
  }
}

    Best regards,
    John Torvik

    June 7, 2017 at 8:45 pm #805281
    jarstern0

    Thanks. Added this – did not have an effect. Reset cache, etc. when checking to no avail.

    June 7, 2017 at 9:30 pm #805310
    Jordan Shannon

    Hi,

    Please provide admin info so we can log in and look into this further.

    Best regards,
    Jordan Shannon

    June 7, 2017 at 10:04 pm #805325
    jarstern0

    Ok – please see below.

    Thanks!

    June 7, 2017 at 10:23 pm #805333
    Jordan Shannon

    Hi,

    And just to confirm what you are looking for, you just need the bottom header transparent on mobile?

    Best regards,
    Jordan Shannon

    June 8, 2017 at 12:31 am #805396
    jarstern0

    I’d like basically the same look on mobile as there is on desktop — right know its a white bar as the header / logo and menu area on mobile instead of transparent.

    June 8, 2017 at 12:58 am #805405
    Jordan Shannon

    Hi,

    Add the following to quick css:

    @media screen and (max-width: 767px)  {
.responsive #top #main{
padding-top:0px!important;
margin-top:-88px!important;
}

#header #header_main{
background:transparent!important;
}

.av_header_transparency{
background:transparent!important;
}
}

    Best regards,
    Jordan Shannon

    June 8, 2017 at 8:09 pm #805726
    jarstern0

    Wow – looks great, thank you! The only other feature I was looking for was to have it shrink on mobile. I found this on your forums, which does what I’d like, but am unable to shrink the advanced menu toggle on mobile.

    @media only screen and (max-width: 480px) {
    .responsive .logo a {
    vertical-align: top;
    }

    .responsive .logo img {
    max-height: 40px!important;
    }
    .responsive #header_main .container {
    height: 50px!important;
    }
    .responsive #top #main {
    padding-top: 85px!important;
    }}

    June 8, 2017 at 10:35 pm #805764
    Jordan Shannon

    Hi,

    Add the following to quick css to shrink the menu toggle.

    @media screen and (max-width: 767px)  {
#advanced_menu_toggle{
height: 30px!important;
width: 30px!important;
line-height: 25px!important;
}
}

    Best regards,
    Jordan Shannon

    June 8, 2017 at 11:30 pm #805782
    jarstern0

    Thanks – I’m really looking for it to start the same size as it is and shrink down on mobile once you’ve scrolled down / where the white background kicks in.

    June 9, 2017 at 12:50 am #805793
    Jordan Shannon

    Hi,

    To achieve that achieve that effect add the following to quick css:

    @media screen and (max-width: 767px)  {



.container #advanced_menu_toggle{
height: 30px!important;
width: 30px!important;
line-height: 25px!important;
}

.av_header_transparency #advanced_menu_toggle {
height: 46px!important;
width: 46px!important;
line-height: 46px!important;
}
}

    Best regards,
    Jordan Shannon

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