For the header image height, it depends on whether you are on the home page or not. The home page puts a CSS class of “cover-image” while other pages use “section-image”. It also depends whether you are on a desktop or smartphone. That is set with the height and min-height parameters.
You can override these by adding CSS to the end of the style.css file in the theme’s directory. Or you can use Jetpack Custom CSS or another plugin that let’s you override a theme’s CSS.
Pratt uses a navbar that is fixed to the top, so I would assume if you want it moved below the header, then you’d need to turn that off. To that its probably easiest to edit header.php and remove the CSS class “navbar-fixed-top”. That will cause it to scroll with the page instead of sticking to the top. But then you have to remove the body padding via CSS or you’ll have blank space above it. Its probably easier to just use the parent theme, Flat Bootstrap. Its almost identical to Pratt but doesn’t have the sticky navbar.
Then moving the navbar below the header image is going to be tricky. Header.php controls the navbar, but then later content-header.php handles displaying the header image. So those two things are physically ordered that way in the HTML. Swapping their location is hard with CSS.
If it were me, I’d probably edit header.php to comment out displaying the navbar. Take that same code and move it into the appropriate place in content-header.php. But that is gutting the theme and you should probably create your own child theme. Copy up the included flat-bootstrap-child theme to the parent directory and then copy the parent’s header.php and content-header.php down into that child directly and edit them there. That way you can still upgrade Flat Bootstrap without causing problems.
