Jump to content

Archived

This topic is now archived and is closed to further replies.

Dan P

Fixed Navigation Bar not fixed on mobile devices

Recommended Posts

Dan P
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
James B

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;
}

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
James B

You're welcome, glad it worked :-)


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
micstepl

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
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
williamweber

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
williamweber

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.

Share this post


Link to post
Share on other sites
williamweber

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.

Share this post


Link to post
Share on other sites
williamweber

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

  • Similar Content

    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

    • kwaoru
      By kwaoru
      Hi,
       
      I have been using DMS and pagelines.
      I am facing to a huge trouble with the appearance of one of my page on mobile (smart phones) built with pagelines.
      However I haven’t come to any solutions to organise either edit the appearance of mobile view to look neat or deactivate the responsive function. 
      Now it looks totally messy on the phone...
       
      1. Is there any way to edit the appearance of the mobile version (responsive theme)?
      2. Is there any way to deactivate responsive function?
       
      If I could receive support from you to go thorough this process I would be happy to be a pro member. 
       
      Looking forward to hearing from you.
    • poseyg
      By poseyg+
      This just happened to a site I'm working on. When I decrease width of browser to check for responsiveness...the pagelines content section is not responding???
    • yemoonyah
      By yemoonyah+
      While building my website, I set a padding of 5%, 25%, 5%, 25% so the text on the pages is not too wide.
      However, it looks crappy on mobile.
      How do I get the same effect and still have it look good on mobile?
      Example: http://yemoonyah.com/quiz
      Thanks
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      can I limit the overall of MegaNav on mobile? When I look at michaelkummer.com on a mobile device, the menu takes up more than a third of the screen space. Using CSS to limit max-height doesn't seem to work. Is there another/better way to reduce the overall height to maybe 10% of the screen available?
      Thanks
      Michael
       
×