WordPress with Apppresser theme

hello am kind of stack with CSS Am trying to archive this how i want it to look

and this how it looks at the moment

This is my current Header and footer CSS.
Can someone kindly help me to move the footer menu away from the footer and put it just right below the header and then insert a search bar in the header. I can provide the whole CSS file if need be, but have i have provided by current CSS for the header and Footer Below, Thanks in advance

/* =Site Header
----------------------------------------------- */
.site-header {
  position: fixed;
  height: 48px;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  background-color: #42ad54;
  -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1); }
  .site-header a, .site-header i {
    color: #fff; }

.ios7 {
  border-top: 20px solid #42ad54; }

.ios7 .site-header {
  top: 20px; }

.ios7.snapjs-left .site-header {
  top: 0; }

.site-title-wrap {
  max-width: 45%;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  overflow: hidden;
  white-space: nowrap; }

.site-title {
  font-size: 18px;
  font-size: 1.8rem;
  line-height: 1.3em;
  margin-top: .8em;
  text-align: center; }

.site-title, .site-title a {
  color: #fff; }

.site-description {
  font-weight: 300;
  display: none; }

#site-logo {
  display: block;
  max-height: 33px;
  margin: 10px auto 0 auto; }

.toolbar {
  padding: 10px; }

/* =Menus
----------------------------------------------- */
.top-menu {
  float: right;
  margin-right: .5em; }

.navigation-main ul, .top-menu ul, .sub-nav ul {
  list-style: none;
  margin: 0;
  padding-left: 0; }

.navigation-main {
  position: relative;
  overflow: hidden;
  height: 150%; }

.navigation-main a {
  position: relative;
  display: block;
  font-size: 16px;
  font-size: 1.6rem;
  padding: 1.3rem 1.5rem;
  text-decoration: none;
  color: #eeeeee;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); }

.navigation-main a i {
  margin-top: .3em;
  margin-right: .3em; }

.navigation-main li.current_page_item {
  background: #444;
  background: rgba(0, 0, 0, 0.15); }

.navigation-main li.current_page_item a {
  color: #f7f5ef; }

.top-menu ul a {
  font-size: 1.3rem;
  font-weight: normal;
  padding: .5em 1em;
  display: block;
  text-decoration: none; }

header .dropdown-menu ul a {
  color: #444; }

.navigation-main ul ul, .navigation-main ul ul ul {
  position: absolute;
  background: #333;
  top: 0;
  height: 150%;
  z-index: 1;
  width: 100%;
  display: block;
  -webkit-transform: translate3d(200%, 0, 0);
  -moz-transform: translate3d(200%, 0, 0);
  -ms-transform: translate3d(200%, 0, 0);
  -o-transform: translate3d(200%, 0, 0);
  transform: translate3d(200%, 0, 0);
  -webkit-transition: -webkit-transform 300ms ease;
  -moz-transition: -moz-transform 300ms ease;
  -o-transition: -o-transform 300ms ease;
  transition: transform 300ms ease; }

.sub-menu.open-sub-menu, .children.open-sub-menu {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 300ms ease;
  -moz-transition: -moz-transform 300ms ease;
  -o-transition: -o-transform 300ms ease;
  transition: transform 300ms ease; }

.navigation-main ul ul a {
  width: 100%; }

.navigation-image, .navigation-comment, .navigation-paging {
  overflow: hidden;
  margin: 1em 0; }

header .nav-left-btn {
  display: inline-block;
  padding: 1.05em 1.1em .9em .9em;
  line-height: 1;
  border: 0;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  z-index: 9999;
  white-space: nowrap;
  opacity: .8;
  margin-left: -.2em; }

header .back.nav-left-btn {
  padding-right: .3em; }

.nav-right-btn, header .widget_search a {
  display: block;
  cursor: pointer;
  opacity: .8;
  padding: 1.05em .9em .9em;
  line-height: 1;
  font-size: 1.6rem; }

header .widget_search a {
  position: relative;
  top: 2px; }

.app-panel .nav-right-btn {
  color: #fff; }

#app-panel-menu {
  position: relative; }

header .dropdown-menu a {
  color: #42ad54; }

header .sub-nav {
  background: #333;
  padding: 0; }
  header .sub-nav li a {
    color: #fff;
    font-size: 1.4rem; }

header .sub-nav ul li.current_page_item a {
  background: #444; }

header .sub-nav ul ul {
  display: none; }

.navigation-main .nav-divider a {
  font-size: 12px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
  padding: .5em 1.5rem;
  font-weight: bold; }

/* =Shelf Menu
----------------------------------------------- */
#page {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: auto;
  overflow: auto;
  -moz-box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 1.5em rgba(0, 0, 0, 0.3);
  -webkit-overflow-scrolling: touch;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Chrome and Safari */
  -moz-backface-visibility: hidden;
  /* Firefox */
  -ms-backface-visibility: hidden;
  /* Internet Explorer 10+ */ }

.snap-drawer {
  position: absolute;
  z-index: 0;
  background: #333;
  top: 0;
  right: auto;
  bottom: 0;
  left: auto;
  width: 265px;
  height: auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-transition: width 0.3s ease;
  -moz-transition: width 0.3s ease;
  -ms-transition: width 0.3s ease;
  -o-transition: width 0.3s ease;
  transition: width 0.3s ease; }

.snap-drawer-left {
  left: 0;
  z-index: 1; }

.snap-drawer-right {
  right: 0;
  z-index: 1; }

.snapjs-left .snap-drawer-right,
.snapjs-right .snap-drawer-left {
  display: none; }

.snapjs-expand-left .snap-drawer-left,
.snapjs-expand-right .snap-drawer-right {
  width: 100%; }

.shelf-top {
  width: 265px;
  position: relative;
  z-index: 1; }
  .shelf-top .user-name {
    margin-top: 1.1em;
    font-weight: normal;
    color: #eeeeee; }

.shelf-top .avatar {
  float: left;
  margin: .5em;
  width: 50px;
  height: 50px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.2); }

.shelf-search {
  padding: .5em; }

.shelf-search input {
  background: #777;
  color: #eee;
  padding: 3px 8px;
  font-size: 1.4rem;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  width: 250px; }

.cart-items {
  padding: 1.3rem 1.5rem;
  background: rgba(0, 0, 0, 0.3);
  color: #eeeeee;
  clear: both; }
  .cart-items i {
    float: left;
    margin-right: .6em;
    margin-top: .3em; }
  .cart-items .cart-contents {
    text-decoration: none;
    font-size: 1.4rem;
    color: #eeeeee; }
    .cart-items .cart-contents .amount {
      background: rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      padding: 5px;
      margin-left: 1em; }

.log-out-button a {
  display: block;
  margin: 10px; }

/* =Item Panel
----------------------------------------------- */
.app-panel {
  display: none;
  right: 0;
  position: absolute;
  -webkit-backface-visibility: hidden;
  z-index: 6;
  top: 0;
  bottom: 0;
  background-color: #f7f5ef;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-transform: translate3d(100%, 0, 0);
  -moz-transform: translate3d(100%, 0, 0);
  -ms-transform: translate3d(100%, 0, 0);
  -o-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  -webkit-transition: -webkit-transform 500ms ease;
  -moz-transition: -moz-transform 500ms ease;
  -o-transition: -o-transform 500ms ease;
  transition: transform 500ms ease; }

.app-panel .product {
  overflow: hidden;
  height: 100%; }

.item-content {
  position: relative;
  height: 100%; }

.app-panel .item-content {
  height: auto; }
  @media only screen and (min-width: 48em) {
    .app-panel .item-content {
      height: 100%; } }

.open-panel body .app-panel {
  overflow-x: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: -webkit-transform 500ms ease;
  -moz-transition: -moz-transform 500ms ease;
  -o-transition: -o-transform 500ms ease;
  transition: transform 500ms ease; }

/* Stages page transitions */
.stage-bottom .app-panel {
  width: 100%;
  -webkit-transform: translate3d(0, 100%, 0);
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0); }

.stage-top .app-panel {
  width: 100%;
  -webkit-transform: translate3d(0, -100%, 0);
  -moz-transform: translate3d(0, -100%, 0);
  -ms-transform: translate3d(0, -100%, 0);
  -o-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0); }

.app-panel #main {
  top: 0;
  bottom: auto;
  padding: 0 3%;
  height: auto; }
  @media only screen and (min-width: 35em) {
    .app-panel #main {
      height: 100%; } }

header.toolbar {
  height: 50px;
  padding: 0 3%;
  width: 100%;
  background-color: #42ad54; }

.toolbar .btn {
  margin: .8em 0 0;
  color: #fff; }

.ajax-spinner {
  display: none;
  color: white;
  opacity: .7;
  position: absolute;
  top: 25%;
  left: 50%;
  right: 50%;
  width: 56px;
  height: 55px;
  margin-left: -28px;
  z-index: 999;
  background: #000000;
  padding: 5px;
  border-radius: 6px;
  text-align: center; }

* =Site Footer
----------------------------------------------- */
.footer-widget-area {
  margin-top: 2em;
  clear: both;
  overflow: hidden; }

.site-footer {
  clear: both;
  width: 100%;
  background: #42ad54;
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 0;
  right: 0; }

.site-footer .widget {
  float: left;
  width: 22.5%;
  margin-left: 5%; }

.site-footer .widget:first-child {
  margin-left: 0;
  width: 45%; }

.site-info {
  font-size: 12px;
  font-size: 1.2rem;
  padding: 1.5em 0;
  text-align: center; }

.site-info, .site-info a {
  color: #999; }

/*** Footer Menu ***/
footer nav {
  height: 40px; }
  footer nav p {
    margin-bottom: 0; }

footer nav ul ul {
  display: none; }

footer .nav > li > a {
  padding: .8rem .3rem 0;
  margin: 0;
  font-size: 1.2rem;
  color: #fff;
  height: 40px; }
  @media only screen and (min-width: 48em) {
    footer .nav > li > a {
      padding: 1rem; } }

footer nav .fa {
  display: block; }

footer ul.nav-justified, footer ul.nav-tabs.nav-justified {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: horizontal;
  -moz-flex-direction: horizontal;
  -ms-flex-direction: horizontal;
  flex-direction: horizontal;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center; }

footer .nav-justified > li, footer .nav-tabs.nav-justified > li, footer .nav-tabs.nav-justified > li, footer .nav-tabs.nav-justified > li {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -moz-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: block;
  overflow: hidden;
  height: 100%;
  width: auto;
  text-align: center; }

.has-footer-menu #main {
  margin-bottom: 40px !important; }
  
  

Read more here: WordPress with Apppresser theme

Leave a Reply

Your email address will not be published. Required fields are marked *