Question

所以我对使用wordpress主题很新，我遇到了问题。

仅在移动设备上，而不是桌面上的移动宽度，我的标题会粘在页面的顶部，但内容会在其上方流动。我真的不确定发生了什么。它没有帮助css最初由没有做过超级工作的其他人完成。但是为了时间的缘故，我需要对代码进行编码。所以我觉得我只是遗漏了一些东西，虽然没有任何地方我把css添加到标题中。

Here is my site

如果我有任何进一步的信息，请告诉我。

来自标题主题的php / html：

<?php // mobile meta (hooray!) ?>
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <?php // icons & favicons (for more: http://www.jonathantneal.com/blog/understand-the-favicon/) ?>
    <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/library/images/apple-icon-touch.png">
    <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/favicon.png">
    <!--[if IE]>
        <link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/favicon.ico">
    <![endif]-->
    <?php // or, set /favicon.ico for IE10 win ?>
    <meta name="msapplication-TileColor" content="#f01d4f">
    <meta name="msapplication-TileImage" content="<?php echo get_template_directory_uri(); ?>/library/images/win8-tile-icon.png">
        <meta name="theme-color" content="#121212">

    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

    <?php // wordpress head functions ?>
    <?php wp_head(); ?>
    <?php // end of wordpress head ?>

    <?php // drop Google Analytics Here ?>
    <?php // end analytics ?>

</head>

<body <?php body_class(); ?> itemscope itemtype="http://schema.org/WebPage">

    <div id="container">

        <header class="header" role="banner" itemscope itemtype="http://schema.org/WPHeader">

            <div id="inner-header" class="wrap cf">

                <?php // to use a image just replace the bloginfo('name') with your img src and remove the surrounding <p> ?>
        <a id="logo-link" href="http://projectlightswitch.org"> <img id="logo" class="h1" src="http://projectlightswitch.org/img/logo.png" </img></a>

                <nav id="main-nav" role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
                    <?php wp_nav_menu(array(
                             'container' => false,                           // remove nav container
                             'container_class' => 'menu cf',                 // class of container (should you choose to use it)
                             'menu' => __( 'The Main Menu', 'bonestheme' ),  // nav name
                             'menu_class' => 'nav top-nav cf',               // adding custom nav class
                             'theme_location' => 'main-nav',                 // where it's located in the theme
                             'before' => '',                                 // before the menu
                               'after' => '',                                  // after the menu
                               'link_before' => '',                            // before each link
                               'link_after' => '',                             // after each link
                               'depth' => 0,                                   // limit the depth of the nav
                             'fallback_cb' => ''                             // fallback function (if there is one)
                    )); ?>

                </nav>

            </div>

        </header>

标题的CSS： “ .header { background-color：＃00B9A0;}

#logo {
float:left
}
 #logo a {
color: white; }


@media (min-width: 799px){
#main-nav{
display:block !important;
}}
@media (max-width: 800px){
#logo {
float:none;
display:inline-block;
margin-left:40%;
}
#main-nav{
display:none;
}

nav ul{
margin:0 !important;
float:none;
}
nav ul li{
width:100%;
text-align:center;
margin:0 !important;

}
nav ul li a{
display: inline-block;
width:100%;
border-top: 3px solid #fff; }

#mobile-menu-toggle{
position:absolute;
top:100px;
left:20px;
text-decoration:none;
}
#mobile-menu-toggle span, #mobile-menu-toggle span:before, #mobile-menu-toggle span:after                     

{

  cursor: pointer;
  border-radius: 1px;
  height: 5px;
width: 35px;
background: white;
position: absolute;
display: block;
content: '';
}
#mobile-menu-toggle span:before {
top: -10px;

}
#mobile-menu-toggle span:after {
 bottom: -10px; 

}

#mobile-menu-toggle span, #mobile-menu-toggle span:before, #mobile-menu-toggle span:after                            

{ 
transition: all 500ms ease-in-out;
}
#mobile-menu-toggle.active span {
background-color: transparent;
}
#mobile-menu-toggle.active span:before, #mobile-menu-toggle.active span:after {
top: 0;
}
#mobile-menu-toggle.active span:before {
transform: rotate(45deg);
}
#mobile-menu-toggle.active span:after {
transform: rotate(-45deg);
}
.hidden{
display:none;}
}
'

This会发生什么。

Wordpress标题粘在移动设备上的屏幕顶部

0 个答案: