Implement a sticky nav bar also mobile version compatibility

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
Post Reply
50LL3KR4M
Registered User
Posts: 38
Joined: Fri Apr 13, 2018 4:34 pm

Implement a sticky nav bar also mobile version compatibility

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.


50LL3KR4M
Registered User
Posts: 38
Joined: Fri Apr 13, 2018 4:34 pm

Re: Implement a sticky nav bar also mobile version compatibility

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
Registered User
Posts: 38
Joined: Fri Apr 13, 2018 4:34 pm

Re: Implement a sticky nav bar also mobile version compatibility

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
Registered User
Posts: 38
Joined: Fri Apr 13, 2018 4:34 pm

Re: Implement a sticky nav bar also mobile version compatibility

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.

User avatar
kinerity
Community Team Member
Community Team Member
Posts: 1886
Joined: Mon Sep 01, 2014 1:00 am
Location: sudo rm -rf /
Name: Kailey Truscott
Contact:

Re: Implement a sticky nav bar also mobile version compatibility

Post by kinerity » 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!
Kailey Truscott - Community Team

50LL3KR4M
Registered User
Posts: 38
Joined: Fri Apr 13, 2018 4:34 pm

Re: Implement a sticky nav bar also mobile version compatibility

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.

User avatar
HiFiKabin
Community Team Member
Community Team Member
Posts: 3241
Joined: Wed May 14, 2014 9:10 am
Location: Swearing at the PC, UK
Name: James
Contact:

Re: Implement a sticky nav bar also mobile version compatibility

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
Registered User
Posts: 38
Joined: Fri Apr 13, 2018 4:34 pm

Re: Implement a sticky nav bar also mobile version compatibility

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.

User avatar
eeji
Jr. Style Validator
Posts: 881
Joined: Fri Dec 12, 2008 9:08 pm
Location: Manchester, UK
Contact:

Re: Implement a sticky nav bar also mobile version compatibility

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.

Post Reply

Return to “[3.2.x] Styles Support & Discussion”

Who is online

Users browsing this forum: No registered users and 5 guests