Jump to content


Photo
- - - - -

fixed header problem on mobile device

header mobile

Best Answer Danny , 15 January 2014 - 01:10 PM

Hi Jane,

 

The Fixed Navbar is only fixed on large screens, if it were to be fixed on a tablet or mobile device it would take up too much screen real estate. Thats the reason as to why the fixed navbar isn't fixed. In regards to your header, you have added custom CSS to a TextBox so that its in a fixed position, but unlike the Fixed Navbar you haven't added any @media queries to tell that TextBox to stop being fixed when viewed on a device with a specific screen width.

 

Therefore, you're going to need to add some more custom CSS via media queries to resolve your issue. As this is custom CSS you have added we are unable to provide support, as we do not provide support for user created CSS. However, the link below is a great guide on Media queries.

 

http://css-tricks.co...andard-devices/

http://css-tricks.co...-media-queries/

Go to the full post


  • Please log in to reply
5 replies to this topic

#1 janemackey

janemackey

    Member

  • Members
  • PipPip
  • 12 posts
  • Country: Country Flag

Posted 15 January 2014 - 04:21 AM

Hello,

I have a quick question regarding my fixed header. I have a header in fixed position below a fixed navbar and everything works fine on my laptop but when I check on my iPhone, the header stays fixed while the navbar scrolls up (as I assume the navbar should). Do you know how to fix the header so it works like the fixed navbar on mobile devices? (haven't checked on an iPad...not sure if there are similar issues)

 

website: pencesense.com/testDMS

DMS version 1.1.4

WP version 3.8

 

Thanks!

jane



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15215 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 15 January 2014 - 01:10 PM   Best Answer

Hi Jane,

 

The Fixed Navbar is only fixed on large screens, if it were to be fixed on a tablet or mobile device it would take up too much screen real estate. Thats the reason as to why the fixed navbar isn't fixed. In regards to your header, you have added custom CSS to a TextBox so that its in a fixed position, but unlike the Fixed Navbar you haven't added any @media queries to tell that TextBox to stop being fixed when viewed on a device with a specific screen width.

 

Therefore, you're going to need to add some more custom CSS via media queries to resolve your issue. As this is custom CSS you have added we are unable to provide support, as we do not provide support for user created CSS. However, the link below is a great guide on Media queries.

 

http://css-tricks.co...andard-devices/

http://css-tricks.co...-media-queries/



#3 janemackey

janemackey

    Member

  • Members
  • PipPip
  • 12 posts
  • Country: Country Flag

Posted 15 January 2014 - 06:01 PM

Thanks, Danny...will check out those links!!



#4 James B

James B

    Advocate

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

Posted 16 January 2014 - 12:10 AM

Let us know how you get on.



#5 janemackey

janemackey

    Member

  • Members
  • PipPip
  • 12 posts
  • Country: Country Flag

Posted 16 January 2014 - 01:56 AM

Thanks, James, for checking in. I did get it to work on at least a single iPhone using the @media! Now will have friends check on iPad and other smartphones. You can mark this as resolved as I think I understand how to work with @media to manage these kinds of device-specific issues.

 

Thanks again!

jane



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15215 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 16 January 2014 - 12:03 PM

Happy to hear your issue has been resolved Jane!







Also tagged with one or more of these keywords: header, mobile