如何將圖像標題放在菜單和部分上？

首先，我使用wordpress的兒童主題（TwentyThirteen Parent Theme）。我必須使用的標題有這樣的圖像：如何將圖像標題放在菜單和部分上？

所以，黑色是我的標題圖片（白色部分是透明的），在灰我有我的菜單欄和紅色我的第一部分內容的網站。

我的問題是...我如何設置（與css/bootstrap）到圖像標題是這樣的？這是什麼基本結構？

我的header.php代碼是這樣的：

二十13

?><!DOCTYPE html> 
<!--[if IE 7]> 
<html class="ie ie7" <?php language_attributes(); ?>> 
<![endif]--> 
<!--[if IE 8]> 
<html class="ie ie8" <?php language_attributes(); ?>> 
<![endif]--> 
<!--[if !(IE 7) & !(IE 8)]><!--> 
<html <?php language_attributes(); ?>> 
<!--<![endif]--> 
<head> 
    <meta charset="<?php bloginfo('charset'); ?>"> 
    <meta name="viewport" content="width=device-width"> 
    <title><?php wp_title('|', true, 'right'); ?></title> 
    <link rel="profile" href="http://gmpg.org/xfn/11"> 
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"> 
    <!--[if lt IE 9]> 
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> 
    <![endif]--> 

    <!-- Font Awesome --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

    <!-- jQuery library --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

    <!-- Latest compiled JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <?php wp_head(); ?> 
</head> 

<body <?php body_class(); ?>> 
    <div id="page" class="hfeed site"> 
     <header id="masthead" class="site-header" role="banner"> 
      <div class="header"> 
       <?php echo '<img class="img-responsive" src="' . get_stylesheet_directory_uri() . '/img/header.png">';?> 
      </div> 


      <nav class="navbar navbar-default"> 
       <div class="container-fluid"> 
       <div class="navbar-header"> 

       </div> 
       <ul class="nav navbar-nav"> 
        <li class="active"><a href="#">Home</a></li> 
        <li><a href="#">Page 1</a></li> 
        <li><a href="#">Page 2</a></li> 
        <li><a href="#">Page 3</a></li> 
       </ul> 
      </div> 
     </nav> 

    </header><!-- #masthead --> 

    <div id="main" class="site-main">

來源

2017-04-05 U23r

你能發佈一個工作演示嗎？ –

@Michael_B它基本上是這個https://twentythirteendemo.wordpress.com我從零開始，只是刪除頭標籤之間的這段代碼，並放置一張圖片來測試位置和位置：絕對圖像和菜單欄的相對似乎不起作用。 – U23r

主題網站的標題/描述&菜單來下標題部分，所以你可以將其添加上述標題圖片部分。請參考下面的示例代碼。

<body <?php body_class(); ?>> 
<!-- Here you can add custom header image section outside page div --> 
<div class="headerImg1"><img src=""></div> <!-- postion one --> 

    <div id="page" class="hfeed site"> 
<!-- or you can also add here inside page div. --> 
<div class="headerImg2"><img src=""></div> <!-- postion two --> 
     <header id="masthead" class="site-header" role="banner"> 
     <!-- site title/description code --> 
      <div id="navbar" class="navbar"> 
       <nav id="site-navigation" class="navigation main-navigation" role="navigation"> 
        <!-- Nav code --> 
       </nav><!-- #site-navigation --> 
      </div><!-- #navbar --> 
     </header><!-- #masthead --> 

     <div id="main" class="site-main">

來源

2017-04-13 11:07:10

如何將圖像標題放在菜單和部分上？

回答

相關問題