Я хочу переместить левую боковую панель, которая содержит sticky сверху вниз, потому что она ниже основной header при прокрутке вниз.
Однако я не могу добавить margin top к sticky -top ниже col-sm-1 .
<style>
.col-sm-1 .sticky-top { margin-top: 50px}
</style>
50px не важно. Длина должна быть достаточной для перемещения div ниже заголовка.
коды страницы:
<?php get_header(); ?>
<div class="container-fluid">
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-10" >50%
<main role="main">
<!-- section -->
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<!-- article -->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<!-- post thumbnail -->
<?php if ( has_post_thumbnail()) : // Check if Thumbnail exists ?>
<!-- <a href="<?php //the_permalink(); ?>" title="<?php //the_title(); ?>"> -->
<?php the_post_thumbnail(); // Fullsize image for the single post ?>
</a>
<?php endif; ?>
<!-- /post thumbnail -->
<!-- post title -->
<h1>
<!-- <a href="<?php //the_permalink(); ?>" title="<?php //the_title(); ?>"><?php //the_title(); ?></a>-->
</h1>
<!-- /post title -->
<div class="row">
<div class="col-sm-1 " >50%
<?php global $post; ?>
<style>
.logo-img2{
border: 1px solid #d0d0ff;padding:20px; margin-top: 0px; margin-bottom: 0px;
}
</style>
<style>
.col-sm-1 .sticky-top { margin-top: 50px}
</style>
<div class="sticky-top ">
<a href="https://www.facebook.com/sharer/sharer.php?u=<?php echo get_permalink($post->ID);?>">
<div>
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/facebook.png" alt="Logo" class="logo-img2"">
</div>
</a>
<a href="https://twitter.com/share?url=<?php echo get_permalink($post->ID);?>">
<div>
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/twitter.png" alt="Logo" class="logo-img2"">
</div>
</a>
<?php $pinterestimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); ?>
<a href="http://pinterest.com/pin/create/button/?url=<?php echo urlencode(get_permalink($post->ID)); ?>&media=<?php echo $pinterestimage[0]; ?>&description=<?php the_title(); ?>">
<div>
<img src="<?php echo get_template_directory_uri(); ?>/img/icons/pinterest.png" alt="Logo" class="logo-img2" >
</div>
</a>
<div class=" logo-img2" style="padding: 0px; text-align: center">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#" data-toggle="tooltip" title="Default tooltip">Tooltip</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col-sm-11" >
<!-- post details -->
<span class="date"><?php the_time('F j, Y'); ?> <?php the_time('g:i a'); ?></span>
<span class="author"><?php _e( 'Published by', 'html5blank' ); ?> <?php the_author_posts_link(); ?></span>
<span class="comments"><?php if (comments_open( get_the_ID() ) ) comments_popup_link( __( 'Leave your thoughts', 'html5blank' ), __( '1 Comment', 'html5blank' ), __( '% Comments', 'html5blank' )); ?></span>
<!-- /post details -->
<?php the_content(); // Dynamic Content ?>
<?php the_tags( __( 'Tags: ', 'html5blank' ), ', ', '<br>'); // Separated by commas with a line break at the end ?>
<p><?php _e( 'Categorised in: ', 'html5blank' ); the_category(', '); // Separated by commas ?></p>
<p><?php _e( 'This post was written by ', 'html5blank' ); the_author(); ?></p>
<?php edit_post_link(); // Always handy to have Edit Post Links available ?>
<?php comments_template(); ?>
</div>
</article>
<!-- /article -->
<?php endwhile; ?>
<?php else: ?>
<!-- article -->
<article>
<h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
</article>
<!-- /article -->
<?php endif; ?>
</section>
<!-- /section -->
</main>
</div>
<div class="col-md-2" style="background-color:orange;height: 100%; width: 100%;">50%
<?php get_sidebar(); ?>
</div>
</div>
</div>
<?php get_footer(); ?>
Есть несколько восстановленных строк, которые показаны с <!--, извините.
Ссылка: http://www.themeforest-deneme2.deniz-tasarim.site/2020/01/10/yazi-9/