Using the `position:fixed` property is ineffective on android devices

Question

Using the `position:fixed` property is ineffective on android devices

Creating a responsive website with a customized 960 grid system:

@media only screen and 
(min-width: 720px) and (max-width: 959px){

.container_12{
  margin-left: auto;
  margin-right: auto;
  width: 720px;
}
}

In addition, the site includes a navigation bar that utilizes position:fixed to stay at the top of the page.

.nav-band{
    width: 100%;
    font-weight: bold;
    position: fixed;
    z-index: 3;
    overflow: hidden;
    background-image:url('../img/trans_black.png');
    padding: 2px;
}

However, an issue arises when viewing the site on my android tablet. Upon rotating the tablet, causing all .container_12 tags to shrink from 720px to 480px, the nav bar either vanishes or becomes misaligned halfway down the page. How do I go about solving this problem? The website also features an image that displays behind the nav bar in the .header-band section:

.header-band{
    background-image:url('../img/header_band3.png');
    background-repeat:repeat-x;
    background-position:top;
    height: 400px;
    background-color: #050505;
    position: fixed;
    z-index: 1;
}

<div class='pageband nav-band'>
<ul class='horizontal-list'>
<li class='nav-item active'>
<a href="http://...">Home</a>
</li>
...
</ul>
</div>
<div class='pageband header-band'>&nbsp;</div>
<div class='pageband core-band'>
<div class='pageband logo-band '>
<div class='container_12'>
...

html css navigation css-position

Answer 1

Answer №1

Adding top: 0px and left: 0px to your navigation bar's CSS will ensure that it is positioned at the top of the screen, even though you have already set position: fixed. This will properly position the element.

.nav-band{
    width: 100%;
    font-weight: bold;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 3;
    overflow: hidden;
    background-image:url('../img/trans_black.png');
    padding: 2px;
}

Answer 2

Adding top: 0px and left: 0px to your navigation bar's CSS will ensure that it is positioned at the top of the screen, even though you have already set position: fixed. This will properly position the element.

.nav-band{
    width: 100%;
    font-weight: bold;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 3;
    overflow: hidden;
    background-image:url('../img/trans_black.png');
    padding: 2px;
}

Answer 3

Answer №2

Give these codes a shot:

@media screen and (orientation: landscape){
   .nav-band {
      // additional code here
   }
}

@media screen and (orientation: portrait){
   .nav-band {
      // more code here
   }
}

By using these, you can specifically target the orientation of your device and effectively "reset" your code.

Answer 4

Give these codes a shot:

@media screen and (orientation: landscape){
   .nav-band {
      // additional code here
   }
}

@media screen and (orientation: portrait){
   .nav-band {
      // more code here
   }
}

By using these, you can specifically target the orientation of your device and effectively "reset" your code.

Answer 5

Answer №3

Thank you for assisting me with this frustrating issue.

position: fixed; initially didn't work on both my android and desktop devices. After removing position: relative from the container of the fixed element, the problem was resolved on the desktop but not on the android (Galaxy Note 5). Adding

-webkit-backface-visibility: hidden;

didn't solve the issue on android either; instead, it caused some flickering and position changes. However, adding display: block; to the container of the element fixed the positioning on android while still working on the desktop.

Here is how the CSS code looks:

body {
  background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
  background-repeat: repeat-y;
  display: block;
  height: 200vh;
  overflow-y: scroll;  
  width: 100vh;  
} 

#fixed-red-box {
  position: fixed; 
  top: 6%; 
  right: 4%; 
  -webkit-backface-visibility: hidden; 
  height: 5vh; 
  width: 10vw; 
  border: 1vw solid red; 
  z-index: 300;
}  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-
       scale=1"/>version=5.1"/>
  </head>
  <body>
    <div id="fixed-red-box"></div>
  </body>
</html>

It took me a month to discover this solution. I'm not a professional coder, but I dabble in coding. Hopefully, this information can assist someone else facing a similar problem.

Answer 6

Thank you for assisting me with this frustrating issue.

position: fixed; initially didn't work on both my android and desktop devices. After removing position: relative from the container of the fixed element, the problem was resolved on the desktop but not on the android (Galaxy Note 5). Adding

-webkit-backface-visibility: hidden;

didn't solve the issue on android either; instead, it caused some flickering and position changes. However, adding display: block; to the container of the element fixed the positioning on android while still working on the desktop.

Here is how the CSS code looks:

body {
  background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
  background-repeat: repeat-y;
  display: block;
  height: 200vh;
  overflow-y: scroll;  
  width: 100vh;  
} 

#fixed-red-box {
  position: fixed; 
  top: 6%; 
  right: 4%; 
  -webkit-backface-visibility: hidden; 
  height: 5vh; 
  width: 10vw; 
  border: 1vw solid red; 
  z-index: 300;
}  

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-
       scale=1"/>version=5.1"/>
  </head>
  <body>
    <div id="fixed-red-box"></div>
  </body>
</html>

It took me a month to discover this solution. I'm not a professional coder, but I dabble in coding. Hopefully, this information can assist someone else facing a similar problem.

Using the `position:fixed` property is ineffective on android devices

Answer №1

Answer №2

Answer №3

Similar questions

Wrapping a series of grids within a parent container to manage height effectively with grid960

A step-by-step guide on incorporating click and drag events into an HTML Canvas

Creating an HTML div that fills the remaining height available

problem with concealed picture when hovering cursor

Equal size images displayed within cards in Material UI

"Encountering a 405 error when transmitting information from an HTML file to a Python Flask server using 'GET / HTTP/1.1'

Leveraging perl's CGI.pm within various subroutines

Capture screenshots of the web page URLs within the Chrome browser by utilizing PhantomJS

The jQuery .accordion() feature is not functioning properly due to the failure to load jQuery into the HTML document

I'm currently reviewing a CSS stylesheet for a React webpage, and I've noticed that several classes are utilizing content to dynamically create images. However, the display of content in VSCode appears as a bullet point

A CSS sticky footer solution with a top margin tweak

Floating with Flex in Bootstrap 4: A seamless way to achieve

By utilizing the body element as the container instead of a div, the content shifts to the left by eight pixels

Adjusting jQuery tab content heights to maintain consistent height across tabs and prevent varying heights

Is it possible to trigger a server-side event using jQuery in SharePoint 2010?

Creating a dynamic calendar text box with JavaScript: a step-by-step guide

Move the grid items to their new positions with animation

Passing Parameters to Razor Pages Controller

Craft unique looks for both even and odd Tumblr posts

jquery is in motion while svg paths are at a standstill, waiting to