你好，我正在尝试归档这个how i want it to look
这是我目前的页眉和页脚CSS。 有人可以帮助我将页脚菜单从页脚移开并将其放在标题正下方，然后在标题中插入搜索栏。我可以提供整个CSS文件，如果需要，但我已经提供了当前的CSS为标题和页脚下面，提前谢谢
/* =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; }
然后这是页脚代码
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content after
*
* @package AppPresser Theme
*/
?>
</div><!-- #main -->
<?php if ( has_nav_menu( 'footer-menu' ) ) : ?>
<footer id="colophon" class="site-footer" role="contentinfo">
<nav class="footer-menu" role="navigation">
<?php
$args = array(
'theme_location' => 'footer-menu',
'menu_class' => 'nav nav-justified' );
wp_nav_menu($args);
?>
</nav>
</footer><!-- #colophon -->
<?php endif; ?>
</div><!-- #page -->
<?php wp_footer(); ?>
</div><!-- #body-container -->
</body>
</html>
最后是标题的代码
<?php
/**
* @package AppPresser Theme
*/
?><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="body-container">
<section class="snap-drawer">
<div class="shelf-top">
<?php appp_left_panel_before(); // Hook for search, user profile, and cart items ?>
</div><!-- .shelf-top -->
<nav id="site-navigation" class="navigation-main" role="navigation">
<div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'apptheme' ); ?>"><?php _e( 'Skip to content', 'apptheme' ); ?></a></div>
<?php
if( has_nav_menu( 'primary' ) )
wp_nav_menu( array( 'theme_location' => 'primary' ) );
?>
<?php if( is_user_logged_in() ) : ?>
<div class="log-out-button"><a class="btn btn-success btn-large noajax" href="<?php echo wp_logout_url( home_url() ); ?>" title="<?php _e( 'Sign Out', 'apptheme' ); ?>"><?php _e( 'Sign Out', 'apptheme' ); ?></a></div>
<?php else: ?>
<div class="log-out-button"><a class="btn btn-success btn-large noajax io-modal-open" href="#loginModal" title="<?php _e( 'Sign In', 'apptheme' ); ?>"><?php _e( 'Sign In', 'apptheme' ); ?></a></div>
<?php endif; ?>
</nav><!-- #site-navigation -->
</section>
<div id="page" class="hfeed site">
<?php do_action( 'appp_before' ); ?>
<header id="masthead" class="site-header" role="banner">
<section class="header-inner">
<div class="pull-left">
<?php do_action( 'appp_header_left' ); ?>
<a href="#" class="nav-left-btn" id="nav-left-open"><i class="fa fa-reorder fa-lg"></i></a>
</div>
<div class="site-title-wrap">
<?php do_action( 'appp_page_title' ); ?>
</div><!-- .site-title-wrap -->
<div id="header-widget-area">
<?php
do_action( 'appp_header_right' );
if ( has_nav_menu( 'top' ) ) :
$class = ( $icon = get_theme_mod( 'top_menu1_icon' ) ) ? $icon : 'fa fa-cog';
?>
<nav id="top-menu1" class="top-menu pull-right" role="navigation">
<a class="nav-right-btn dropdown-toggle" data-toggle="dropdown">
<i class="<?php echo $class; ?> fa-lg"></i>
</a>
<?php
$args = array(
'theme_location' => 'top',
'container_class' => 'dropdown-menu'
);
wp_nav_menu($args);
?>
</nav>
<?php endif; ?>
<?php if ( has_nav_menu( 'top2' ) ) :
$class = ( $icon = get_theme_mod( 'top_menu2_icon' ) ) ? $icon : 'fa fa-globe';
?>
<nav id="top-menu2" class="top-menu pull-right" role="navigation">
<a class="nav-right-btn dropdown-toggle" data-toggle="dropdown"><i class="<?php echo $class; ?> fa-lg"></i>
</a>
<?php
wp_nav_menu( array(
'theme_location' => 'top2',
'container_class' => 'dropdown-menu'
) );
?>
</nav>
<?php endif; ?>
</div>
</section><!-- .header-inner -->
</header><!-- #masthead -->
<div id="main" <?php body_class( 'site-main' ); ?>>