Keeping logo/masthead/nav sticky so that it remains during scroll down

• 

  willcady · Member · Aug 12, 2015 at 7:15 pm

  • Copy link
  • Add topic to favorites

  Hi awesome WP community!

  How do I keep the navigation bar and logo sticky so that it remains at the top of the page while I scroll down?

  Similar to what you see on http://www.wired.com

  Thank you!

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

• 

  willcady · Member · Aug 12, 2015 at 7:15 pm

  • Copy link

  Sorry – the blog I am trying this feature for is http://blkwhtprjt.com

• 

  g471n · Member · Aug 12, 2015 at 8:47 pm

  • Copy link

  Hi Will

  Add this to the custom CSS I have already given you and we should have it working the way you want.

  header#masthead {
      position: fixed;
      z-index: 9;
      background-color: #000000;
      width: 100%;
  }
  
  .posts-list {
          margin-top: 100px;
  }

• 

  willcady · Member · Aug 12, 2015 at 11:08 pm

  • Copy link

  You’ve been such a great help, thank you!

• 

  willcady · Member · Aug 12, 2015 at 11:19 pm

  • Copy link

  Another question – is there a way to reduce the logo size with CSS?

  Adjusting the image size in the customizer doesn’t seem to be helping and when on Mobile, the logo is taking up too much space for the sticky functionality to be sensible.

• 

  willcady · Member · Aug 12, 2015 at 11:20 pm

  • Copy link

  Or perhaps, rather – to disable the sticky function on mobile only.

• 

  g471n · Member · Aug 13, 2015 at 4:40 am

  • Copy link

  I agree … so to disable the sticky function on screen sizes less than 1024 change the code as below and let me have a look :)

  @media screen and (min-width: 1024px) {
  	header#masthead {
      position: fixed;
      z-index: 9;
      background-color: #000;
      width: 100%;
  }
  .posts-list {
          margin-top: 100px;
  }
  }

• 

  willcady · Member · Aug 16, 2015 at 10:53 pm

  • Copy link

  Hmmm no that seems to remove the sticky functionality from all screen sizes – maybe I’m pasting the code wrong?

  Perhaps there’s a way to reduce the logo size so that it doesn’t take up so much of the screen on mobile? I will look into this.

• 

  g471n · Member · Aug 17, 2015 at 1:51 am

  • Copy link

  I will have a look at reducing the logo.

  I have sent you a message on the contact form on your willcady website.

• 

  llbbcc · Member · Aug 17, 2015 at 10:42 pm

  • Copy link

  G47n1,

  If you so happen to see this, would you mind copying and pasting or sending me the entire custom CSS you sent willcady in the beginning of this post? I had the same question. (There was a chunk where you mentioned “add this to what I sent you”. If you could provide the same info. I’d greatly appreciate it.

  Big Brother Theme

  http://www.limberlostbrewingcompany.com

  Thank you so much

• 

  g471n · Member · Aug 18, 2015 at 12:07 am

  • Copy link

  Hi llbbcc

  It was the CSS from this thread – https://en.forums.wordpress.com/topic/reducing-margins-above-and-below-logo-blink-template#post-2445211

  The CSS code will probably need to be altered to work for your theme. I will have a look at it when I am back at my computer.

• 

  g471n · Member · Aug 20, 2015 at 10:16 am

  • Copy link

  Hi llbbcc

  Just to let you know that I haven’t forgotten about you.

  Getting the The Big Brother Theme menu fixed to the top of the page is proving a little tricky but I will find a way :)

• 

  g471n · Member · Aug 21, 2015 at 4:01 pm

  • Copy link

  Here we go.

  .main-navigation {
      position: fixed;
      width: 100%;
      top: 0px;
  }

• 

  llbbcc · Member · Aug 21, 2015 at 10:11 pm

  • Copy link

  Wow, thank you so much for taking the time to do this.
  My site is going to look awesome thanks to you. :)

• 

  g471n · Member · Aug 22, 2015 at 11:24 am

  • Copy link

  Thanks for the feedback. Let me know if you need any more help.