top bar on mobile

Is there any way I can replicate the header behaviour for the mobile site?

In the desktop version I have transparent logo and menu over the background of each page, but when I scroll down, I have a sticky non-transparent bar with a different version of logo and the menu on top.


In mobile, I have transparent header and hamburguer over content, but when I scroll down, it remains sticky but with no background. Any way to add background only when scrolliing down?

Comments

  • Hi,

    Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

    It is always a good idea to also attach a screenshot showing your issue.

    Thanks

  • www.granhotelnagari.com

  • Hi,

    Please, go to Betheme -> Theme options -> Responsive -> Header, and see if you do not have the Transparent option checked.

    Thanks

  • edited May 2022

    I have it checked.

    And it is transparent on mobile. What i need is to behave just like in desktopo version:

    Transparent when it is in the top of the page, THEN colored "Navigation bar" (Top bar) behind the logo and hamburguer when I scroll (slide) down.

  • Then for that, please, use the following code:

    @media only screen and (max-width: 767px){
     .mobile-tr-header   #Top_bar.is-sticky{
          background-color: #213705!important;
       }
    }
    

    Thanks

Sign In or Register to comment.