CODEWITHSUNDEEP
androidcssios7
Blake Bell
Blake Bell

Reputation: 377

Samsung Galaxy S8 navigation bar overlays fixed position div

I have this HTML:

<div class="app-bar">
    <a href="#'>icon</a>
    <a href="#'>icon</a>
    <a href="#'>icon</a>
    <a href="#'>icon</a>
</div>'''

With the following CSS:

.app-bar {
     position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
     justify-content: space-between;
}

This code is working great for me, but the digital navigation bar on phones such as a Galaxy S8 currently overlay the fixed position links; causing the links to get cut off about halfway from the bottom. How can I ensure the fixed position links only show above a phones navigation bar?

Upvotes: 2

Views: 284

Answers (1)

Kevin
Kevin

Reputation: 1357

You just need to calculate the height of the nav-bar of the phone. add the height to the bottom css. Like if the height is 20px, then you can add this css below.

.app-bar {
     position: fixed;
    left: 0;
    right: 0;
    bottom: 20px;
    display: flex;
     justify-content: space-between;
}

Upvotes: 0

Related Questions