2017-05-30 62 views
0

我的網站是www.rosstheexplorer.com把自定義頁眉在自己的行

根據不同的瀏覽器,插件,H1和其他元素在頁面上可能重疊的自定義標題的寬度。我如何防止這種情況發生?我希望頁面上的所有其他元素始終低於客戶標題。

爲我的自定義標題的代碼是

@media screen and (min-width: 601px) { 
.custom-header { background: url("https://i1.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg") no-repeat; 
     width: 100% ; 
      height: 40%; 
     background-size: 100%; 

position: absolute; 
top: 0px; 
left: 0px; 

    display: block 


} 
} 

的代碼爲我的header.php(之前我修改,我在下面解釋)是

<?php 
/** 
* The Header for our theme. 
* 
* Displays all of the <head> section and everything up till <div id="content"> 
* 
* @package Penscratch 
*/ 
?><!DOCTYPE html> 
<html <?php language_attributes(); ?>> 
<head> 
<meta charset="<?php bloginfo('charset'); ?>"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title><?php wp_title('A|', 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="page" class="hfeed site"> 
    <a class="skip-link screen-reader-text" href="#content"><?php _e('Skip to content', 'penscratch'); ?></a> 
    <img class="custom-header" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt=""> 
<header id="masthead" class="site-header" role="banner"> 
     <div class="site-branding"> 
      <?php if (function_exists('jetpack_the_site_logo')) jetpack_the_site_logo(); ?> 
      <h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1> 
      <h2 class="site-description"><?php bloginfo('description'); ?></h2> 
     </div> 

     <nav id="site-navigation" class="main-navigation" role="navigation"> 
      <button class="menu-toggle"><?php _e('Menu', 'penscratch'); ?></button> 
      <?php wp_nav_menu(array('theme_location' => 'primary')); ?> 
     </nav><!-- #site-navigation --> 
    </header><!-- #masthead --> 

    <div id="content" class="site-content"> 
     <?php if (get_header_image()) : ?> 
      <a href="<?php echo esc_url(home_url('/')); ?>" rel="home"> 

      </a> 
     <?php endif; // End header image check. ?> 

爲了把自定義頭在其自己的行我試圖用下面的代碼

<div class="row"> 

    <div class="col-sm-12" style="background-color:lavender;"><img class="custom-header" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt=""></div> 

    </div> 

這似乎沒有效果。

我是否正確安裝了Bootstrap?

我試着用下面的代碼。我將代碼添加到了functions.php文件中。 我用這裏找到的指令https://www.zenwebthemes.com/blog/how-to-add-bootstrap-to-your-wordpress-theme/

wp_enqueue_style('bootstrap_css', get_template_directory_uri() . '/css/bootstrap-3.3.7.css'); 


wp_enqueue_script('bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js'); 

我在Pratys的建議基礎上添加了這段評論。我使用的模擬工具是https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_table_basic&stacked=h

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h2>Basic Table</h2> 
    <p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>    
    <table class="table"> 

    <tbody> 
     <tr> 
     <td><img class="custom-header" src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt=""></td> 

     </tr> 
     <tr> 
     <td>Mary</td> 

     </tr> 

    </tbody> 
    </table> 
</div> 

</body> 
</html> 

凡文「瑪麗」目前,你會把相關的菜單欄的代碼?

+0

你可以包含你的HTML嗎? – Gerard

回答

0

我訪問了你的網站,當我調整瀏覽器大小時,它確實與頁眉和菜單重疊。

我建議您將自定義標題圖像和標頭廣告標題放在網格控件的2個不同行中。這樣你可以限制行重疊。

或者,您可以嘗試在您的網站中實施引導,並且您將不會處理瀏覽器的大小調整,因爲它會自行處理所有內容。

+0

我怎麼會開始啓動其中的任何一條建議? –

+0

我想我現在已經安裝了Bootstrap,現在是否需要修改customer-header.php。 –

+0

[查看此鏈接](https://github.com/320press/wordpress-bootstrap/blob/master/header.php)。此代碼具有在PHP中實現的標題和導航欄。您將需要添加帶引導程序屬性的HTML控件。如何看到BS部門的頁面[這裏](https://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp) – praty