Keep the black bar and menu toggle at the top even scrolling down page(mobile)

• 

  tatin05 · Member · Nov 6, 2017 at 1:56 am

  • Copy link
  • Add topic to favorites

  Hello, I need help in keeping the black bar at the top even if I am scrolling down the page. Is there a css code for it?

  I am using the PORT THEME and I am on Premium Account

  Thanks!

  Your help is much appreciated.

  The blog I need help with is onessalon.wordpress.com.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 6, 2017 at 9:24 pm

  • Copy link

  Hi there, add the following to your custom CSS and see what you think.

  @media screen and (max-width: 699px) {
    #header .top {
      position: fixed;
    }
    .admin-bar #header .top {
      top: 46px;
    }
  }

• 

  tatin05 · Member · Nov 7, 2017 at 12:48 am

  • Copy link

  Hello, it worked! Thanks again for always helping out.
  Is there a way to make the background white once I scroll down the page while on mobile? I tried putting background: #ffffff; on the css but it didn’t work.

  Thanks!

• 

  thesacredpath · Member · Nov 7, 2017 at 7:21 pm

  • Copy link

  Hi, we can make that top section white by adding a couple of rules to the previous media query (the two at the bottom in the following. You can replace that rule I gave above with this.

  @media screen and (max-width: 699px) {
    #header .top {
      position:fixed
    }
    .admin-bar #header .top {
      top:46px
    }
    #header .top.solid {
      background-color: #fff !important;
    }
    .menu-toggle::before {
      color: #000;
    }
  }

  The scroll behavior on desktop where it changes from transparent to dark is controlled with Javascript, and we can’t add that to do the same for mobile as that code is not allowed on the Premium plan, so the above is the best we can do.