You could try this instead? If you add the page-navbar outside of the top menu bar so that it sits below it and not in it so to speak.-.see below...
</header> <!-- end of header tag -->
<div id="page-navbar" class="clearfix">
<nav class="breadcrumb-nav"><?php echo $OUTPUT->navbar(); ?></nav>
<div class="breadcrumb-button"><?php echo $OUTPUT->page_heading_button(); ?></div>
</div>
<div id="page" class="container-fluid">
Then add this CSS:
#page-navbar { width: 100%; height: 30px; margin: 0; padding: 0; background-color: red; position: relative; left: 0; top: 60px}
This should just position it directly below the top banner navbar.