:dash:

footer.php

@@ -1,30 +1,20 @@
 <div id="footer-nav">
 </div>
-  <div class="footer text-white pt-5 pb-5">
-  <?php if ( is_active_sidebar( 'footer-1' ) || is_active_sidebar( 'footer-2' ) || is_active_sidebar( 'footer-3' ) ) { ?>
+  <div class="footer pt-5 pb-5">
     <div id="footer-widget" class="m-0">
-      <div class="container">
+      <div class="container text-muted">
         <div class="row">
-          <div class="col-12 col-md-4">
+          <div class="col-12 col-lg-4">
             <?php if ( is_active_sidebar( 'footer-1' )) :  dynamic_sidebar( 'footer-1' ); endif; ?>
-              <h3 class="widget-title">Follow Us</h3>
-              <a class="btn btn-outline-secondary notlight"><i class="bi bi-facebook"></i> <small>Hospice</small></a>
-              <a class="btn btn-outline-secondary notlight"><i class="bi bi-twitter"></i></a>
-              <a class="btn btn-outline-secondary notlight"><i class="bi bi-instagram"></i></a>
-              <a class="btn btn-outline-secondary notlight"><i class="bi bi-youtube"></i></a>
-              <br/>
-              <a class="btn btn-outline-secondary notlight mt-1"><i class="bi bi-facebook"></i> <small>Greenwood Store</small> </a>
-              <a class="btn btn-outline-secondary notlight mt-1"><i class="bi bi-facebook"></i> <small>Abbeville Store</small> </a>
           </div>
-          <div class="col-12 col-md-4">
+          <div class="col-12 col-lg-4">
             <?php if ( is_active_sidebar( 'footer-2' )) :  dynamic_sidebar( 'footer-2' ); endif; ?>
           </div>
-            <div class="col-12 col-md-4">
-              <!-- php if ( is_active_sidebar( 'footer-3' )) :  dynamic_sidebar( 'footer-3' ); endif; -->
+          <div class="col-12 col-lg-4">
               <h3 class="widget-title">Newsletter</h3>
-              <p></p>
+              <hr>
               <form class="mc">
-                <label class="notlight">Sign up to receive email updates from us.</label>
+                <h3 class="widget-title">Sign up to receive email updates from us.</h3>
                 <div class="form-group row">
                   <div class="col">
                     <input type="text" class="form-control" placeholder="First name">
@@ -39,23 +29,23 @@
                   </div>
                 </div>
                 <button type="submit" class="btn btn-outline-light mt-2">Sign up</button>
-                <a href="newsletter" class="btn btn-outline-secondary notlight mt-2"><i class="bi bi-archive"></i> Archive</a>
+                <a href="newsletter" class="btn btn-outline-light  mt-2"><i class="bi bi-archive"></i> Archive</a>
               </form>
+              <?php if ( is_active_sidebar( 'footer-3' )) :  dynamic_sidebar( 'footer-3' ); endif; ?>
             </div>
         </div>
       </div>
     </div>
-  <?php } ?>
   </div>
-<footer id="colophon" class="site-footer text-light" role="contentinfo">
-  <div class="container pt-3 pb-3">
-    <div class="d-flex flex-row-reverse">
-      <nav class="navbar navbar-expand navbar-dark text-muted p-0 ml-auto">
+<footer id="colophon" class="site-footer" role="contentinfo">
+  <div class="container text-muted pt-3 pb-3">
+    <div class="d-flex justify-content-md-end justify-content-sm-center">
+      <nav class="navbar navbar-expand navbar-dark p-0">
       <?php
         wp_nav_menu( array(
           'theme_location' => 'bottom',
           'menu_id'         => 'bottom-nav',
-          'menu_class'      => 'navbar-nav ms-auto',
+          'menu_class'      => 'navbar-nav text-center',
           'container'       => false,
           'depth'           => 0,
           'fallback_cb'     => false,
@@ -64,7 +54,7 @@
       ?>
       </nav>
     </div>
-    <div class="row">
+    <div class="d-flex justify-content-md-start justify-content-sm-center">
       <div class="site-info pt-4 pb-3 text-muted">
         &copy; <?php echo date('Y'); ?> <?php echo '<a href="'.home_url().'">'.get_bloginfo('name').'</a>'; ?><br />
         408 West Alexander Avenue, Greenwood, SC 29646

functions.php

@@ -1,4 +1,9 @@
 <?php
+
+/**********************************
+######### Setup WordPress #########
+***********************************/
+
 require get_template_directory() . '/inc/hp-cleaner.php';
 require get_template_directory() . '/inc/hp-nav-walker.php';
 require get_template_directory() . '/inc/hp-templates.php';
@@ -28,6 +33,7 @@ if ( ! function_exists( 'hp_setup' ) ) :
       'top'     =>__( 'Top' )
     ));
     add_theme_support( 'html5', array(
+      'search-form',
       'comment-form',
       'comment-list',
       'caption',

header.php

@@ -9,41 +9,43 @@
 <body <?php body_class(); ?>>
 <div id="top">
   <div class="container top-navbar">
-    <nav class="navbar navbar-expand navbar-dark text-white p-0 ml-auto">
-    <?php
-      wp_nav_menu( array(
-        'theme_location' => 'top',
-        'menu_id'         => 'top-nav',
-        'menu_class'      => 'navbar-nav ms-auto',
-        'container'       => false,
-        'depth'           => 0,
-        'fallback_cb'     => false,
-        'walker'          => new WP_Bootstrap_Navwalker()
-      ));
-    ?>
-    </nav>
+    <div class="d-flex justify-content-sm-center justify-content-md-end">
+      <nav class="navbar navbar-expand navbar-dark text-muted p-0">
+      <?php
+        wp_nav_menu( array(
+          'theme_location' => 'top',
+          'menu_id'         => 'top-nav',
+          'menu_class'      => 'navbar-nav text-center',
+          'container'       => false,
+          'depth'           => 0,
+          'fallback_cb'     => false,
+          'walker'          => new WP_Bootstrap_Navwalker()
+        ));
+      ?>
+      </nav>
+    </div>
   </div>
 </div>
 <header id="masthead" class="masthead site-header sticky-top" role="banner">
   <div class="container">
     <nav class="navbar navbar-expand-xl navbar-dark">
-        <div class="navbar-brand">
-          <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>">Hospice &amp; Palliative <span><img src="<?php echo get_template_directory_uri(); ?>/img/dove-white.png"/></span> Care &nbsp;<small>of the Peidmont</small></a>
-        </div>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-          <?php wp_nav_menu(array(
-            'theme_location'  => 'primary',
-            'container'       => 'div',
-            'container_id'    => 'navbar',
-            'container_class' => 'collapse navbar-collapse justify-content-end',
-            'menu_id'         => false,
-            'menu_class'      => 'navbar-nav',
-            'depth'           => 3,
-            'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
-            'walker'          => new WP_Bootstrap_Navwalker()
-          )); ?>
+      <button class="navbar-toggler m-0" type="button" data-bs-toggle="collapse" data-bs-target=".navbars-collapse" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="navbar-brand mx-auto">
+        <a class="site-title" href="<?php echo esc_url( home_url( '/' )); ?>">Hospice &amp; Palliative <span><img src="<?php echo get_template_directory_uri(); ?>/img/dove-white.png"/></span> Care &nbsp;<small>of the Peidmont</small></a>
+      </div>
+      <?php wp_nav_menu(array(
+        'theme_location'  => 'primary',
+        'container'       => 'div',
+        'container_id'    => 'navbar',
+        'container_class' => 'collapse navbar-collapse navbars-collapse justify-content-end',
+        'menu_id'         => false,
+        'menu_class'      => 'navbar-nav',
+        'depth'           => 3,
+        'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
+        'walker'          => new WP_Bootstrap_Navwalker()
+      )); ?>
     </nav>
   </div>
 </header>

inc/hp-templates.php

@@ -1,32 +1,41 @@
 <?php
 
-function hp_last_nav_item( $items, $args ) {
+/**********************************
+######### WordPress Menus #########
+***********************************/
+
+function hp_donate_nav_item( $items, $args ) {
   if( $args->theme_location == 'primary' ) {
-    $items = $items .'<li class="menu-item ps-4"><a class="btn btn-outline-light" href="/hp/get-involved/donate" role="button">Donate</a></li>';
+    $items = $items .'<li id="donate-button" class="menu-item nav-item ps-lg-3">'."\n".'<a class="btn btn-outline-light" href="'.home_url().'/donate" role="button">Donate</a></li>';
   }
   return $items;
 }
-add_filter('wp_nav_menu_items','hp_last_nav_item',10,2);
+add_filter('wp_nav_menu_items','hp_donate_nav_item',10,2);
 
 function hp_list_child_pages() {
   global $post;
-      $children = get_pages( array( 'child_of' => $post->ID ) );
-      $hasChild = (count( $children ) > 0 );
-      $page_id = ($hasChild) ? $post->ID : wp_get_post_parent_id( $post->ID );
-          wp_list_pages( array(
-          'title_li'    => '',
-          'sort_column' => 'post_title',
-          'child_of'    => $page_id,
-      ) );
+    $children = get_pages( array( 'child_of' => $post->ID ) );
+    $hasChild = (count( $children ) > 0 );
+    $page_id = ($hasChild) ? $post->ID : wp_get_post_parent_id( $post->ID );
+      wp_list_pages( array(
+      'title_li'    => '',
+      'sort_column' => 'post_title',
+      'child_of'    => $page_id,
+    ));
 }
 add_shortcode('hp_childpages', 'hp_list_child_pages');
 
 function wp_list_pages_filter($output) {
-  $output = str_replace('page_item', 'list-group-item py-1 p-0', $output);
+  $output = str_replace('page_item', 'nav-item list-group-item py-1 p-0', $output);
   return $output;
 }
 add_filter('wp_list_pages', 'wp_list_pages_filter');
 
+
+/**********************************
+######### WordPress Posts #########
+***********************************/
+
 if ( ! function_exists( 'hp_posted_on' ) ) :
 function hp_posted_on() {
 	$time_string = '<time class="entry-date published updated" datetime="%1$s">%2$s</time>';

page.php

@@ -2,14 +2,16 @@
 <div id="content" class="site-content">
   <div class="container">
     <div class="row">
-      <div class="col-md-3">
-        <div class="hp-sidenav navbar-collapse sticky-lg-top pt-5-md" role="navigation">
-            <ul class="nav flex-column list-group-flush">
-              <?php echo hp_list_child_pages(); ?>
-            </ul>
+      <div class="col-lg-3">
+        <div class="hp-sidenav navbar sticky-md-top pt-sm-3" role="navigation">
+          <div class="navbars-collapse">
+            <div class="flex-column list-group-flush">
+             <?php echo hp_list_child_pages(); ?>
+            </div>
+          </div>
         </div>
       </div>
-      <section id="primary" class="content-area col-sm-12 col-md-9">
+      <section id="primary" class="content-area col-lg-9 col-md-12">
         <div id="main" class="site-main" role="main">
         <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
           <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

style.css

@@ -113,18 +113,20 @@ table {
   background-color:#343C70;
 }
 .top-navbar {
-
 }
 @media only screen and (max-width: 768px) {
   .top-navbar {
     font-size:12px;
   }
 }
+@media (min-width: 768px) and (max-width: 992px) {
+  .top-navbar {
+    font-size:15px;
+  }
+}
 #masthead {
-  margin-bottom: 0;
-  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
-  padding: .74rem 1rem;
-  background-color:rgba(56, 94, 113, 1);
+  padding: 12px 0;
+  background-color:#325363;
   border-top: 3px solid #343C70;
 }
 .masthead {
@@ -151,9 +153,9 @@ table {
   text-decoration: none;
   color:#7ac9f0;
 }
-@media only screen and (max-width: 768px) {
+@media (max-width: 767px) {
   .navbar-brand > a {
-    font-size: 14px;
+    font-size: 15px;
   }
   .navbar-brand img {
     width: 25px;
@@ -163,6 +165,20 @@ table {
     font-size:12px;
   }
 }
+@media (min-width: 768px) and (max-width: 992px) {
+  .navbar-brand > a {
+    font-size: 19px;
+  }
+  .navbar-brand img {
+    width: 30px;
+  }
+  .navbar-toggler {
+    padding:4px;
+    font-size:12px;
+  }
+}
+
+
 .dropdown-item.active, .dropdown-item:active {
   color:#777;
 }