How to set a navigation header with fixed position at the top

Question

I'm setting a navigation header to fixed position at the top of the page. The problem is that right aligned items will be partially hidden when there is a scrollbar. How do i prevent this from happening?

My code

 header { width: 100%; height: 150px; z-index: 1000; position: fixed; background-color: white; } 

 <header class="mat-elevation-z1" fxLayout="row"> <span style="flex: 1 1 auto;"></span> <div>Right Item</div> </header> 

this is how the above code appears. i want the right item to be fully displayed when the scollbar shows. when there is no scrollbar, it does fully show.

Answer 1

This is one way to accomplish it using padding and box-sizing: border-box .

 header { width: 100%; height: 150px; z-index: 1000; position: fixed; background-color: white; /* Added the following lines */ box-sizing: border-box; left: 0; top: 0; padding-right: 15px; padding-top: 15px; text-align: right; } 

 <header class="mat-elevation-z1" fxLayout="row"> <span style="flex: 1 1 auto;"></span> <div>Right Item</div> </header> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis corporis cum nemo ex, soluta hic ratione obcaecati corrupti quas quod, laborum itaque consequatur, sint enim voluptatum dolore aliquam eum. Doloribus perspiciatis non debitis cum cumque iste magnam architecto labore, veritatis fugit omnis eius maiores earum molestias aliquam facilis sint ea facere corrupti quae placeat deserunt incidunt eveniet ad! Aut. Itaque atque minus dignissimos nostrum earum modi, nemo error, placeat est quas deserunt ducimus magni. Facilis cumque aspernatur esse explicabo ea sit incidunt molestiae tempore? Laudantium molestiae qui obcaecati dignissimos?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis corporis cum nemo ex, soluta hic ratione obcaecati corrupti quas quod, laborum itaque consequatur, sint enim voluptatum dolore aliquam eum. Doloribus perspiciatis non debitis cum cumque iste magnam architecto labore, veritatis fugit omnis eius maiores earum molestias aliquam facilis sint ea facere corrupti quae placeat deserunt incidunt eveniet ad! Aut. Itaque atque minus dignissimos nostrum earum modi, nemo error, placeat est quas deserunt ducimus magni. Facilis cumque aspernatur esse explicabo ea sit incidunt molestiae tempore? Laudantium molestiae qui obcaecati dignissimos?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis corporis cum nemo ex, soluta hic ratione obcaecati corrupti quas quod, laborum itaque consequatur, sint enim voluptatum dolore aliquam eum. Doloribus perspiciatis non debitis cum cumque iste magnam architecto labore, veritatis fugit omnis eius maiores earum molestias aliquam facilis sint ea facere corrupti quae placeat deserunt incidunt eveniet ad! Aut. Itaque atque minus dignissimos nostrum earum modi, nemo error, placeat est quas deserunt ducimus magni. Facilis cumque aspernatur esse explicabo ea sit incidunt molestiae tempore? Laudantium molestiae qui obcaecati dignissimos?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis corporis cum nemo ex, soluta hic ratione obcaecati corrupti quas quod, laborum itaque consequatur, sint enim voluptatum dolore aliquam eum. Doloribus perspiciatis non debitis cum cumque iste magnam architecto labore, veritatis fugit omnis eius maiores earum molestias aliquam facilis sint ea facere corrupti quae placeat deserunt incidunt eveniet ad! Aut. Itaque atque minus dignissimos nostrum earum modi, nemo error, placeat est quas deserunt ducimus magni. Facilis cumque aspernatur esse explicabo ea sit incidunt molestiae tempore? Laudantium molestiae qui obcaecati dignissimos?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis corporis cum nemo ex, soluta hic ratione obcaecati corrupti quas quod, laborum itaque consequatur, sint enim voluptatum dolore aliquam eum. Doloribus perspiciatis non debitis cum cumque iste magnam architecto labore, veritatis fugit omnis eius maiores earum molestias aliquam facilis sint ea facere corrupti quae placeat deserunt incidunt eveniet ad! Aut. Itaque atque minus dignissimos nostrum earum modi, nemo error, placeat est quas deserunt ducimus magni. Facilis cumque aspernatur esse explicabo ea sit incidunt molestiae tempore? Laudantium molestiae qui obcaecati dignissimos?</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis corporis cum nemo ex, soluta hic ratione obcaecati corrupti quas quod, laborum itaque consequatur, sint enim voluptatum dolore aliquam eum. Doloribus perspiciatis non debitis cum cumque iste magnam architecto labore, veritatis fugit omnis eius maiores earum molestias aliquam facilis sint ea facere corrupti quae placeat deserunt incidunt eveniet ad! Aut. Itaque atque minus dignissimos nostrum earum modi, nemo error, placeat est quas deserunt ducimus magni. Facilis cumque aspernatur esse explicabo ea sit incidunt molestiae tempore? Laudantium molestiae qui obcaecati dignissimos?</p>