Sticky header

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Author

Posts
July 25, 2016 at 3:03 pm #233332

Christian
Buyer

Post count: 39

Hi guys
We have finally launched our site https://familyfun.site 🙂
now were doing some beta testing with our customers , and one of the big things they seem to need is a sticky header, so they dont have to go all the way up a page to navigate the menu . have you any idea to how we can achieve this ? maybe some of your css magic 🙂

I would also appreciate if you could tell me how to make the menu a little smaller in the top, it looks very big on a cell phone right now

Thanks in advance

christian

July 25, 2016 at 5:26 pm #233406
Kor
Moderator

Post count: 16516
Hi Christian,

I’d like you to try using the custom CSS below and see if it’s what you’re looking for?
```
header#site-header{
    position: fixed;
    background: #fff;    
}

.site-header a, .site-header a:visited {
    color: #000;
}
```
July 25, 2016 at 5:27 pm #233407
Paolo
Site Admin

Post count: 31211
Hi,

the search and listings page already have a sticky header and it’s achieved with this css:
```
.sd.search.geodir-page #site-header, .sd.archive.geodir-page #site-header {
    display: flex;
    flex-basis: 61px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}
```
You can add the same css for other pages except the home page, which by design cannot have one unless you add the background via javascript after you scroll by the featured image, this would require custom code and in any case it would look kinda horrible.

Let us know if this helped.

Thanks
July 28, 2016 at 8:53 am #234697

Christian
Buyer

Post count: 39

hi kor and paolo
thanks for the help.
Kors css did the trick, but it looks wierd, so i removed it again .
The one suggested by paolo dident seem to do much. do i need to add the pages i want the sticky header on to that code you gave me ?
eg. i have a site called social-wall

July 28, 2016 at 5:23 pm #235126
Paolo
Site Admin

Post count: 31211
You will need to get that page body classes and use one of them.

For example, if you want to add it to all custom pages you can use this:
```
.sd.page #site-header {
    display: flex;
    flex-basis: 61px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}
```
If instead you want to add it to a specific page, example the social wall page, you will need something like this:
```
.sd.page-id-13617 #site-header {
    display: flex;
    flex-basis: 61px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
}
```
To learn how to get classes and IDs please consult this: https://wpgeodirectory.com/docs/customizing-your-style/

Let us know how you went,

Thanks
July 29, 2016 at 7:32 am #235588

Christian
Buyer

Post count: 39

thanks paolo , its now working as planned 🙂
once again best support ever

July 29, 2016 at 4:44 pm #236137

Paolo
Site Admin

Post count: 31211

You are welcome 🙂

August 15, 2016 at 8:29 pm #247361

randallu
Expired Member

Post count: 59

Noticing an issue when using this when you have also removed the tabs from the listing details page.

The header is fixed as desired, but the content that used to be tabbed now has it’s own scroll despite not using the same class or ID.. Anyone know why it’s doing this?

It is using same scroll mechanism for the page details that is on the search listings page (supreme directory theme).

September 16, 2016 at 12:31 am #267012

Cory Sanchez
Expired Member

Post count: 12

Paolo’s code worked like a charm. However, like Randallu, I too am seeing the extra, in-page scroll in the Supreme directory theme.

Was this issue resolved? If no, any idea how to fix this?

One more thing, how do I get the newly sticky header to shrink?

September 16, 2016 at 5:11 pm #267348

Paolo
Site Admin

Post count: 31211

Hi,

I can’t recreate that on my demo, please provide a link and I’ll have a look.

Thanks

September 16, 2016 at 6:47 pm #267398

Cory Sanchez
Expired Member

Post count: 12

This reply has been marked as private.

September 16, 2016 at 11:04 pm #267729
Paolo
Site Admin

Post count: 31211
Hi,

there is this CSS added inline on the geodir_content div of your home page:
```
element.style {
    height: calc(100vh - 88px);
    overflow-y: scroll;
    width: 100%;
}
```
That shouldn’t be there and I’m not sure where it is coming from. Did you remove all JS that you added to do your testing?

If you have no idea either, please provide admin credentials in a private reply and we will have a look.

Let us know,

Thanks
September 17, 2016 at 5:40 pm #268075

Cory Sanchez
Expired Member

Post count: 12

This reply has been marked as private.

September 17, 2016 at 6:05 pm #268078

Paolo
Site Admin

Post count: 31211

Hi,

that can’t have nothing to do with a css file. It’s added inline in your html, so it has to be javascript.

I asked to the developers to have a look, they will let you know asap.

Thank you,

September 18, 2016 at 7:19 pm #268404

Cory Sanchez
Expired Member

Post count: 12

Alright. I’ll await their reply.

The only area where I’ve added any CSS or Javascript is via the WP Custom CSS plugin. There is no Javascript there.

This:
element.style {
height: calc(100vh – 88px);
overflow-y: scroll;
width: 100%;
}

Is not any code I’ve seen or implemented. Hopefully we can get this resolved. Worse case, no sticky header. It would be a shame but not a deal breaker. 🙂 Thanks for your help.
Author

Posts