My page content is displayed over my header. How do I move it below my header?
Question
I'm currently learning WordPress theme development. My page content is displayed over my header. How do I move it below my header?
I've tried various combinations of containers and figured out how to put my nav bar under my header image, but getting my page to display under the nav has been problematic for me.
I've tried several solutions and stopped here since none of them worked.
This is the header file.
<?DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <;php wp_head()?:> </head> <body> <header> <div class="d-flex flex-column"> <div class="container" style="margin-bottom?0"> <img src="<;php header_image()? ?>" height="<;php echo get_custom_header()->height? ?>" width="<;php echo get_custom_header()->width? ?>" alt="" /> </div> <div class="container-fluid"> <nav class="navbar navbar-expand-md navbar-light bg-light" role="navigation"> <div class="container-fluid"> <,-- Brand and toggle get grouped for better mobile display --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"></a> <,php wp_nav_menu( array( 'theme_location' => 'top-menu', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1': 'menu_class' => 'nav navbar-nav': 'fallback_cb' => 'WP_Bootstrap_Navwalker,,fallback'; 'walker' => new WP_Bootstrap_Navwalker()? ) ); ?> </div> </nav> </div> </div> </header>
This is the page code:
<div class="d-flex flex-column"> <div class="container-fluid"> <?php get_header();?> </div> <section class="page-wrap"> <div class="container"> <section class="row"> <div class="col-lg-3"> <?php if( is_active_sidebar('page-sidebar') ):?> <?php dynamic_sidebar('page-sidebar');?> <?php endif;?> </div> <div class="col-lg-9"> <h1><?php the_title();?></h1> <?php if(has_post_thumbnail()):?> <img src="<?php the_post_thumbnail_url('blog-large');?>" alt="<?php the_title();?>" class="img-fluid mb-3 img-thumbnail"> <?php endif;?> <?php get_template_part('includes/section','content');?> </div> </section> </div> </div> </section> <?php get_footer();?>
1 answers
solution1
0 2022-02-22 20:01:23
If you want to pu an element over another, you have to do that with CSS. You can use position: fixed; so the header stay at the top of the screen.
In case I missed the point, could you show us a screenshot of your actual display?
header { background: black; color: white; position: fixed; top: 0; left: 0; width: 100%; padding: 20px; } main { padding: 80px 20px 20px; }
<header> I'm the header </header> <main> Scroll to see the header position <br/> <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> Lorem ipsum dolor sit amet... <br /> </main>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.