Okay
  Public Ticket #2824142
Transparent header for mobile only
Closed

Comments

  •  3
    web2seo started the conversation
    July 12, 2021 at 5:32pm

    Hello, how can I allow transparent header ONLY on desktop. It becomes sticky on scroll. I want it to be with white bar by default on mobile. How can I do this?

  •  1,878
    Judith replied
    July 12, 2021 at 5:54pm

    Hi There,

    Please send in your website url.

    Thanks.

  •   web2seo replied privately
  •  1,878
    Judith replied
    July 12, 2021 at 6:43pm

    Hi There,

    Please try this css:

    @media only screen and (max-width: 999px) and (min-width: 1px){
    .material #header-outer[data-transparent-header="true"][data-mobile-fixed="1"].transparent {
        background-color: #5d5b5b !important;
    }
}

    Thanks.

  •  3
    web2seo replied
    July 12, 2021 at 6:47pm

    I tried it. can you make it so the default position when site loads the bar is white. right now its a brownish color.

    Also can you push the home page banner down... right now the bar is covering the banner.

  •  8,847
    Tahir replied
    July 12, 2021 at 7:01pm

    Hey Again,

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    @media only screen and (max-width: 999px) and (min-width: 1px) {
    .material #header-outer[data-transparent-header="true"][data-mobile-fixed="1"].transparent {
        background-color: #ffffff !important;
    }
    #header-outer[data-transparent-header="true"][data-transparent-shadow-helper="true"].transparent:not(.dark-slide):before {
        background: none !important;
    }
    #header-outer.transparent[data-permanent-transparent="false"] #top .slide-out-widget-area-toggle.mobile-icon i:before, #header-outer.transparent[data-permanent-transparent="false"] #top .slide-out-widget-area-toggle.mobile-icon i:after, body.material.mobile #header-outer.transparent:not([data-permanent-transparent="1"]) header .slide-out-widget-area-toggle a .close-line, body #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > #top .span_9 > .slide-out-widget-area-toggle .lines-button:after, body #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > #top .span_9 > .slide-out-widget-area-toggle .lines:before, body #header-outer[data-permanent-transparent="1"].transparent:not(.dark-slide) > #top .span_9 > .slide-out-widget-area-toggle .lines:after, #header-outer[data-lhe="animated_underline"].transparent .nectar-header-text-content a:after {
        background-color: #000 !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  3
    web2seo replied
    July 12, 2021 at 7:05pm

    Thanks Tahir. We're almost there!

    Please see attached... can we somehow move the banner down so it starts AFTER the top nav on mobile devices?

    Also, is can you add a control in there to control the height of the nav bar in mobile? That would be great.


    Thanks!

  •  3
    web2seo replied
    July 12, 2021 at 7:06pm

    You see the whole face is being cut off cuz the banner is behind the nav instead of under the nav.


  •  8,847
    Tahir replied
    July 13, 2021 at 7:32am

    Hey Again,

    Try adding padding to the Row on Mobile using the Page Builder Element Settings :

    1693377621.pngClick To Open Larger Image.

    Thanks 

    ThemeNectar Support Team 

  •  3
    web2seo replied
    July 13, 2021 at 10:00pm

    Thank you! When I scroll down on mobile I notice the dropshadow appears after scrolling down since the theme's header appears. Is it possible to apply the same dropshadow to the code you provided and stop the theme header from appearing the mobile view?

  •  1,878
    Judith replied
    July 13, 2021 at 10:20pm

    Hi There,

    Please try this css:

    @media only screen and (max-width: 999px) and (min-width: 1px){
    #header-outer[data-transparent-header="true"][data-transparent-shadow-helper="true"].transparent:not(.dark-slide):before {
        box-shadow: 0 3px 45px rgba(0,0,0,0.15);
    }
}

    Thanks.

  •  3
    web2seo replied
    July 23, 2021 at 3:58am

    Thank you, please close this ticket.