How to put the navbar on top of the header image instead of overlaid

Let's say you want to put the navigation menu on top the image so it does not overlay the header image.

In Appearance -> Customizer -> Additional CSS insert the following code:

body:not(.home) .navbar-fixed-top {
    position: initial;
    }

.navbar {
    margin-bottom: 0;
    }

If you want to keep the navbar fixed at the top of the screen while scrolling the use the code below instead but be aware that you'll have to add additional media queries to adjust the margin-top for different heights of your site's navbar depending on the width of the mobile device.

.page-header-module.module {
    margin-top: 129px;
    }