Putting Custom Header In Its Own Row

My website is www.rosstheexplorer.com

Depending on the width of the browser, the plugin, H1 and other elements on the page may overlap the custom header. How I can prevent this happening? I want all the other elements on the page to always be below the customer header.

The code for my custom header is

 @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


}
}

The code for my header.php (before my modifications which I explain below) is

<?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. ?>

To put the custom-header in its own row I tried to use the following code

<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>

This appears to have no effect.

Have I installed Bootstrap correctly?

I tried using the following code. I added the code to the functions.php file. I used instructions found here 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' );

I added this next bit of my comment based on Pratys advice. I was using the simulation tool found at 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>

Where the text 'Mary' currently is, would you put the code related to the menu bar?

回答1:

I visited your website and it does overlap the header and menu when I resize the browser size.

What I would suggest is you put your custom-header image and masthead header in 2 different rows of a grid control. That way you can restrict the rows to overlap.

Or, you can try implementing bootstrap in your website and you will not to handle resizing of browser as it will take care of all itself.

回答2:

In your original css did you try adding clear:both; to your CSS?
https://www.w3schools.com/cssref/pr_class_clear.asp