Can someone help me reposition the left-sidebar with a sticky top to be below the main header when scrolling down?
Adding margin-top to sticky-top under col-sm-1 is not working.
<style>
.col-sm-1 .sticky-top { margin-top: 50px}
</style>
The length of 50px doesn't matter. The important thing is to move the div below the header.
The page's code:
<?php get_header(); ?>
<div class="container-fluid">
<div class="row">
<div class="col-sm-10" >50%
<main role="main">
<section>
<?php if (have_posts()): while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h1>
</h1>
<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" >
<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>
<?php the_content(); ?>
<?php the_tags( __( 'Tags: ', 'html5blank' ), ', ', '<br>'); ?>
<p><?php _e( 'Categorised in: ', 'html5blank' ); the_category(', '); ?></p>
<p><?php _e( 'This post was written by ', 'html5blank' ); the_author(); ?></p>
<?php edit_post_link(); ?>
<?php comments_template(); ?>
</div>
</article>
<?php endwhile; ?>
<?php else: ?>
<article>
<h1><?php _e( 'Sorry, nothing to display.', 'html5blank' ); ?></h1>
</article>
<?php endif; ?>
</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(); ?>
Some lines that were not deleted are still visible as <!--. Apologies for that.
You can view the content at this link: