• 0
Sign in to follow this  
Followers 0

Fixed Navigation Bar not fixed on mobile devices


Question

Posted · Report post

I have noticed that the Fixed Navigation Bar is fixed only on screen resolutions from 800 x 600 or higher. 
How can I ensure that the Navigation Bar sticks to the top of the screen when scrolling the page on mobile devices?

Share this post


Link to post
Share on other sites

10 answers to this question

  • 0

Posted · Report post

micstepl - Not sure what code you're referring to, I haven't added any code in this topic ?

 

There is no solution that we can provide as the Fixed Navigation, isn't supposed to be fixed in the first place on mobile devices, which I mentioned above. You can do as James recommended with that code, but we can not provide support to issues caused by this code, as its not how the element is supposed to work.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, to keep the fixed nav at the top in the mobile display try adding the following into your css

 

.pl-fixed-top {
    position: fixed !important;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks a lot, James!

 

It works great.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You're welcome, glad it worked :-)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Fixed Navigation isn't fixed on mobile devices for a reason, as the screen real estate isn't as large as a desktop. Therefore, the Fixed Navigation only gets in the way and is a waste of precious space.

 

You can do as James recommended, but you may find after a couple of visits to your site on a mobile device that the fixed nav starts to annoy you.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

danny - your code works, but  there are 2 issues:

 

Issue 1

  • once sliding down on the creen (menaing, 
  • the mobile-menu dös not work (slide out) any more!

 

Issue 2

  • the navbar covers the top area of the page
  • it should rather begin the op of the page, below the navbar

 

is there a solution for that?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Danny, I hate to disagree but I think having the nav fixed on a mobile device is actually "more" important than on the desktop. Not having easily accessible navigation on a mobile device causes way too much scrolling around when you want to navigate the site. 

 

Also, many many sites are starting to do responsive, fixed, mobile navigation:

 

http://mashable.com

http://twitter.com

 

just to name two huge sites that do it. 

 

Screen resolutions on modern mobile devices allow for more than enough real estate to handle a small fixed nav at the top and it's makes it so much easier to navigate a site.

 

http://yoast.com is has a great sticky menu (fixed nav) and is a wordpress site. I would love a menu in pagelines that is as flexible and full of information as what you find on that site.

 

So please, if you are planning on changes to the fixed nav in a coming release, give an option to make it fixed on mobile devices. It's a way better experience.

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

danny - your code works, but  there are 2 issues:

 

Issue 1

  • once sliding down on the creen (menaing, 
  • the mobile-menu dös not work (slide out) any more!

 

Issue 2

  • the navbar covers the top area of the page
  • it should rather begin the op of the page, below the navbar

 

is there a solution for that?

 

@micstepl the way I solved this was to add the following class to my custom CSS and then added that class to the "Styling Classes" on top element of my page. In my case that was a masthead component. If I added to the parent "section" of the masthead it formatted incorrectly but adding to the component made it work out.

 

.fixed-nav-mobile {margin-top:50px;}

 

http://simplify.bi

 

That in combination with @James B's code above got me close to what I want.

 

I'm hoping that I can use the above along with the trick used in the Branding tutorial (http://docs.pagelines.com/tutorials/creating-a-branding-area) to only apply a style below a certain width to get things to behave correctly in all situations. I haven't figured that out completely yet though. For the moment my masthead has more margin than i want on the desktop but works well on mobile. I'll update this if I get all working together.

Edited by williamweber

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

Got it!

 

Instead of the simple class that I posted a moment ago I just took the class definition straight from the branding tutorial and swapped in my new margin class and it all works great. I left the same Styling Classes setting on my top page element I only had to change the custom CSS that I was using to:

 

 
@media (max-width: 767px) {
    .fixed-nav-mobile {
        margin-top:50px;
    }
}
 
.pl-fixed-top {
    position: fixed !important;
}
 
Included James' code from above for completeness. Add these two pieces of code to your custom CSS and then add the .fixed-nav-mobile class to the Styling Class of your top page element and you should have fixed nav bar on both desktop and mobile.
Edited by williamweber

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Dang it! The menu button doesn't work correctly once you've scrolled down. The logo or title link continues to work correctly but not the fly-out menu. Back to the drawing board tomorrow I guess, time for sleep.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0