Implement a sticky nav bar also mobile version compatibility

50LL3KR4M · Post by **50LL3KR4M** » Mon Apr 16, 2018 10:38 am

Found a very nice topic and answer for my new problem viewtopic.php?f=74&t=2226166&sid=8a34c1 ... f&start=15 which it works great!
I was able to add the sticky nav bar https://opaaa.ddns.net/forum.
The only problem is that in mobile version the Sticky nav bar doesn't look very nice.

**My CDB Contributions** · Post by **HiFiKabin** » Mon Apr 16, 2018 11:01 am

Try this https://phpbb.hifikabin.me.uk/viewtopic.php?f=3&t=129

50LL3KR4M · Post by **50LL3KR4M** » Mon Apr 16, 2018 12:29 pm

Thank you I will give it a try,
and I will repost with the results

50LL3KR4M · Post by **50LL3KR4M** » Mon Apr 16, 2018 12:48 pm

that's not bad at all

Great Work!
The thing is that I want something that doesn't make any change in the phpbb original nav bar(or move it), I want something like that http://iansvivarium.com/forum/
as a top nav bar, I accomplish something a little bit similar.... well not so similar actually.... actually I'm not disappointing with this https://opaaa.ddns.net/forum but it does cover my name when looking from phone

50LL3KR4M · Post by **50LL3KR4M** » Mon Apr 16, 2018 12:51 pm

I want it somehow to be top top above the header like having a little gap also.

Post by **Kailey** » Mon Apr 16, 2018 1:28 pm

50LL3KR4M, please keep in mind that we have a six hour bumping rule. All team members and community members here are volunteers, so we ask you to wait at least six hours before bumping your topic or, if no-one has replied to your last post, edit your last post. Thanks!

50LL3KR4M · Post by **50LL3KR4M** » Mon Apr 16, 2018 1:33 pm

kinerity wrote: ↑Mon Apr 16, 2018 1:28 pm 50LL3KR4M, please keep in mind that we have a six hour bumping rule. All team members and community members here are volunteers, so we ask you to wait at least six hours before bumping your topic or, if no-one has replied to your last post, edit your last post. Thanks!

got it, sorry.

**My CDB Contributions** · Post by **HiFiKabin** » Mon Apr 16, 2018 3:45 pm

The main problem of the 'fixed header' is that it was for 3.0.x which is probably why it doesn't work well with Mobile devices (phpBB 3.0.x was not designed with mobile devices in mind)

Have you seen viewtopic.php?f=456&t=2438676 or tried contacting the owner of http://iansvivarium.com/ to ask where he got it from?

50LL3KR4M · Post by **50LL3KR4M** » Mon Apr 16, 2018 6:54 pm

problem solved!
I post how I do it for any help in the future(so someone will see it).

I add in the common.css in the body { <---//tag the line padding:20px;

with that way I got some space to place my nav bar so it will look a little bit better.

eeji · Post by **eeji** » Mon Apr 16, 2018 7:50 pm

HiFiKabin wrote: ↑Mon Apr 16, 2018 3:45 pm Have you seen viewtopic.php?f=456&t=2438676 or tried contacting the owner of http://iansvivarium.com/ to ask where he got it from?

The "sticky" header on Ians Vivarium really isn't anything special, just a div with fixed positioning then a larger top margin on .wrap to bump it down the page a bit. To make it work on smaller screens, the text is wrapped in a span with the responsive-hide class to hide it once the screen drops below 700px.

When I get a bit of time I'm going to start on a theme that will have a proper sticky header, maybe using jQuery as its already being loaded by phpBB.