Jump to content


Photo
- - - - -

Issue With "Fixed" Nav Bar On Mobile Devices

fixed nav css

  • Please log in to reply
29 replies to this topic

#21 mattpato

mattpato

    Advanced Member

  • Members

  • 41 posts
  • Country: Country Flag

Posted 29 May 2013 - 05:43 PM

Hi guys, could someone please fill me in with any developments? 



#22 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 29 May 2013 - 11:04 PM

Evening, I've checked with Rob for you, he's not heard back from the developer team yet though.

 

Checking your site this evening the navbar seems to be stretching the full width of the site now on the iphone.

Please Login or Register to see this Hidden Content

 

Even when zoomed in I'm seeing it stretch right out to the edges of the screen -

Please Login or Register to see this Hidden Content

 

I can't see that div with the 'my-add-image' id anymore, did removing that resolve the layout?



#23 mattpato

mattpato

    Advanced Member

  • Members

  • 41 posts
  • Country: Country Flag

Posted 30 May 2013 - 08:06 AM

Hi thanks for checking back in. 

 

I have removed the fixed nav and replaced it with SaleBar for now. However when you try to write a comment on one of the blog posts the fixednav/sale bar still drops off and gets stuck in the comments box... see image >

Please Login or Register to see this Hidden Content

 

This also happens with the fixed nav. 

 

Removing the 'my-add-image-' has played no effect at all. 

 

Cheers. 



#24 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 30 May 2013 - 11:27 PM

Please Login or Register to see this Hidden Content

/* iPhone [portrait + landscape] */

@media only screen and (max-device-width: 480px)

{ .pl-salebar .sale-text {font-size: 9px;} }

 

/* iPhone [portrait + landscape] */

@media only screen and (max-device-width: 480px)

{ .pl-salebar {width:100% !important;} }

 

Let us know if that has any effect.

 



#25 mattpato

mattpato

    Advanced Member

  • Members

  • 41 posts
  • Country: Country Flag

Posted 03 June 2013 - 04:30 AM

Hi thanks for this, I have added the above CSS and it seems to have improved the zoom issue a little however the problem with the comments is still happening. 

 

Fixed nav drops off and gets stuck there when you try to write a comment. 



#26 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 04 June 2013 - 12:27 AM

Hi there, excellent. One problem solved then, one to go :-)

 

I've just tried again on the iphone, I can't manage to get it to stick in the comments box anymore, it's floating on top but not covering. If i zoom out whilst the the keyboard is still present it doesn't resize the salesbar until i click done and the keyboard hides. Then the salebar resizes to fit the screen.

 

The salebar is set so it's always at the top of the page, regardless of where you are on the page (zoomed in or out etc). Would you prefer it if it just stayed at the very top of the site and didn't scroll down as you zoomed in and out on the mobile? That might stop it interfering with the comments box.



#27 mattpato

mattpato

    Advanced Member

  • Members

  • 41 posts
  • Country: Country Flag

Posted 04 June 2013 - 03:55 PM

Hi James, yeah I think that would be a good idea to try. Could you please let me know what I need to do. 

Cheers. 



#28 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 05 June 2013 - 12:40 AM

Hi there, try the following

 

  .responsive .pl-salebar {
    position: fixed;
top:0;}



#29 mattpato

mattpato

    Advanced Member

  • Members

  • 41 posts
  • Country: Country Flag

Posted 05 June 2013 - 10:34 AM

Thanks, not sure what that has done exactly. I still see that when you tap on the comments box to leave a comment it still drops off the top and stays there covering the comments section. 



#30 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 06 June 2013 - 12:44 AM

Hi Matt

 

That should keep the bar at the top of the mobile screen, stop if from dropping into the content. I just checked your page it seemed to have worked but you have a cache on your page so you might not have seen the results instantly -

Please Login or Register to see this Hidden Content

 

Do you see the same as in the screenshot? The other two codes below you can try in place of previous code to see if the results are any better, one will make the bar static the other should hide it completely on the mobile.

 

 

.responsive .pl-salebar { position: relative;}

 

Or

 

.responsive .pl-salebar {display:none;}







Also tagged with one or more of these keywords: fixed nav, css