Question

您正在制作需要修改的wordpress主题。我没有编写主题代码。只是编辑它，但我还没有尝试制作wordpress主题。我了解一些代码。我想要的是导航保持在页面顶部。它适用于页面的其他部分，除了本节中带有图像滑块：

您看，导航栏位于滑块下方。我甚至尝试将导航div移动到滑块div上方：这里是代码：

<div class="home_area parallax" id="home">
        <div class="navigation_1" id="navigation_1">
            <nav class="navbar" role="navigation">
              <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="#"><img src="<?php the_field('rdc_logo','option'); ?>" alt="img"></a>
                  <div class="vertical-line">&nbsp;</div>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                  <ul class="nav navbar-nav navbar-right">
                    <!-- <li><div class="vertical-line">&nbsp;</div></li> -->
                    <li><a href="#home">Home</a></li>                                        
                    <li><a href="#about">About</a></li>
                    <li><a href="#portfolio">portfolio</a></li>
                    <li><a href="#video">video</a></li>
                    <li><a href="#specialproject">special project</a></li>
                    <!-- <li><a href="#event">event</a></li>
                    <li><a href="#socialmedia">social media</a></li> -->
                    <li><a href="#event">social media</a></li>
                    <li><a href="#contact">Contact</a></li>
                  </ul>
                </div><!-- /.navbar-collapse -->
              </div><!-- /.container-fluid -->
            </nav>
        </div>
        <div class="slider">
            <img src="<?php echo $template_path; ?>images/redlogo_website.png" alt="" class="web-logo"/>
            <div id="one-by-one-slider" class="one-by-one-slider">
                <ul class="one-by-one-slider-large">

                    <?php
                          $args = array(
                              'post_type' => 'rdc_home', 
                              );
                           query_posts( $args );
                           // The Loop
                          if ( have_posts() ) : 
                          while (have_posts()) :
                          //the post for declaration
                          the_post();
                    ?>

                    <li>
                        <img src="<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID, 'thumbnail') ); ?>" alt="<?php the_title(); ?>"/>
                        <div class="slider-content text-center">

                            <div class="slider-heading shp-12 slides" data-animation="bounceInDown" data-duration=4 data-delay=1>
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h1><?php the_title(); ?></h1>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="slider-heading shp-13 slides" data-animation="bounceInDown" data-duration=6 data-delay=2>
                                <div class=" container">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <h3><?php the_content(); ?></h3>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="slider-heading shp-14 slides" data-animation="bounceInUp" data-duration=8 data-delay=4>
                                <div class=" container">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <a href="#contact" class="btn lm-gallery btn-remore">For Bookings</a>
                                        </div>
                                    </div>
                                </div>
                            </div> -->
                        </div>
                    </li>
                    <?php 
                    endwhile;
                    endif;
                    wp_reset_query();
                    ?>

                </ul>
                <div class="one-by-one-slider-nav">
                    <ul class="one-by-one-slider-thumbs">
                        <li class="one-by-one-slider-element"></li>
                        <?php
                              $args = array(
                                  'post_type' => 'rdc_home', 
                                  );
                               query_posts( $args );
                               // The Loop
                              if ( have_posts() ) : 
                              while (have_posts()) :
                              //the post for declaration
                              the_post();
                        ?>
                            <li><a href="#"></a></li>
                        <?php 
                               endwhile;
                               endif;
                               wp_reset_query();
                        ?>

                    </ul>
                </div><!-- one-by-one-slider-nav -->  

            </div><!-- one-by-one-slider -->
        </div><!-- slider -->

    </div>                  <!-- End Of Home Area -->

滑块和导航的CSS

.slider-content{
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;    
    }

    .home_area{
        position:relative;
        z-index:99999;
    }

    .one-by-one-slider-nav {
        margin-top: -100px;
        z-index: 2147483647;
    }

    .slider{height:850px;}

    .shp-1,.shp-2,.shp-3,.shp-11,.shp-12,.shp-13, .shp-14{
        display:block;
        text-align:center;
        width:100%;
    }

    .slider-heading p{
        font-size:14px;
        line-height:24px;
        font-weight:600;
        width:40%;
        margin:0 auto;
        text-shadow:2px 2px 2px rgba(0,0,0,.5);
    }
    .shp-3{
        display:inline-block;
    }
    .slides{
        position:absolute;
    }
    .shp-1 {
        top:0%;
    }
    .shp-2{
        top:20%;
    }
    .shp-3{
        top:35%;
    }

    .shp-11 {
        top:10%;
    }
    .shp-12{
        top:30%;
    }
    .shp-12 p{
        width:60%;
        font-size:18px;
        line-height:30px;
    }
    .shp-13{
        top:53%;
    }

    .shp-14{
        top:70%;
    }

    .slider-ir0{
        bottom:-5px;
        left:20%;
    }
    .slider-ir1{
        bottom:-5px;
        left:50%;
        margin-left:-110px;
    }
    .slider-ir2{
        bottom:-5px;
        right:20%;
    }


    .slider-is1{
        left:50%;
        bottom:270px;
        margin-left:-215px;
    }
    .slider-is2{
        right:50%;
        bottom:270px;
        margin-right:-215px;
    }
    .slider-is3{
        left:50%;
        bottom:170px;
        margin-left:-215px;
    }
    .slider-is4{
        right:50%;
        bottom:170px;
        margin-right:-215px;
    }

    .slider-ig1{
        right:50%;
        bottom:220px;
        margin-right:215px;
    }
    .slider-ig2{
        right:50%;
        bottom:220px;
        margin-right:15px;
    }
    .slider-ig3{
        left:50%;
        bottom:220px;
        margin-left:15px;
    }
    .slider-ig4{
        left:50%;
        bottom:220px;
        margin-left:215px;
    }
    .slider a.btn-remore{
       background:#da0848;
       color:#fff !important;
    }
    .navigation_1 {
        position:absolute;
        width:100%;
        bottom:0;
        left:0;
        font-size:14px;
        text-transform:uppercase;
        font-weight:700;
    }
    .navbar {
        border-radius:0px;
        margin-bottom: 0px;
    }
    .navbar {
        border: 0px solid;
    }
    .navbar-brand{
        text-transform:uppercase;
    }
    .affix{
        position:fixed;
        top:0;
        height:50px;
        z-index:2147483646;
    }

    .web-logo {
        position:absolute;
        z-index:100;
    }

    div.vertical-line{
        border-left: 3px solid #FFFFFF;
        height: 64px;
        margin-left: auto;
        margin-right: auto;
        width: 1px;
        float: right;
    }

Answer 1

NVM。我现在修好了：

unittest

保持导航栏上方的图像滑块wordpress主题

1 个答案: