Sticky header for desktop vs opposite for mobile

Sparkling
1

Hi, I tried your instructions to create a header that would move with the page on desktop. It worked!

However, now on mobile, it takes up too much screen room. Is there a way to differentiate the two so that the mobile header remains the way it was before.

Thanks!

2

@letsnba

Please post your website URL as I don’t recall all several thousand tutorials that I have wrote this far :slight_smile:

3

Haha sorry.

url is http://letsnba.com

Instructions I followed to make header sticky:
https://colorlibsupport.com/t/sticky-header/

But I have since gone back to the non-sticky-header for now, at least until I know if there’s a way to separate the two.

Thanks!

4

Now that you don’t have sticky menu enabled at all you can follow these steps.

  1. Open header.php and replace

<nav class="navbar navbar-default" role="navigation">

with

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

That would get the same results like before.

  1. Now you should tweak when menu is and when it is not fixed and you can do this by adding this simple CSS to Appearance >> Theme Options >> Other >> Custom CSS.
@media (max-width: 768px) {
  .navbar-fixed-top {
    position: relative !important;
  }
}
@media (min-width: 768px) {
  #content {
    margin-top: 76px;
  }
}

Let me know if this helps.

5

It did work! Thanks!

Unfortunately, now the spacing is a little wonky. I put in that snippet of custom css from the other thread:

#content {
    margin-top: 44px;
}

Which may have made the margin-top too big on the mobile. As it was the desktop margin-top wasn’t big enough so I increased it to 65px.

I have tried changing the mobile margin-top that you included above from 76px to something smaller, but it doesn’t seem to affect the mobile output. The gap is so big that it’s about 40% of the screen before I get to my headline.

Any suggestions? (and thanks again)

6

Remove this code because it is not necessary at all:

#content {
    margin-top: 65px;
}

Leave only code I mentioned above and nothing else.

7

Oh my god, I swear I am tripping out. I thought when I entered the first part of the code that the menu was behind or something like it was for that other thread, which is why I put the extra margin in.

I did as you said and everything looks perfect. You are a genius! Thank you so much!!! Problem solved.

8

Great to hear that! I’m glad I could help. :slight_smile: