Make WordPress Widget Sticky without using any plugin

dailydose

#1

We love two column themes, isn’t? It comes with beautiful sidebar. But sad thing is when we write a long form content our sidebar goes blank, and people see just content. That’s not cool…!!

This is where Sticky widget comes into play which can help in keeping useful widget in the sticky way, without annoying readers. Every pro-bloggers uses this feature to display some kind of popular guides, call-to-action button, offer, etc.

Before, I was using a plugin called Sticky Widget. It load some JS, requires settings, which was never easy for me to deal with it. Every time, I could do mess up. Sometime, at desktop sticky widget looks good, then at mobile things goes overlay.

Now, Here’s the solution… works fine with Genesis.

@media only screen and (min-width: 1024px) {
	.content-sidebar-wrap {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}
	.sidebar-primary .widget:last-child {
		position: -webkit-sticky;
		position: sticky;
		top: 40px;
	}
	.admin-bar .sidebar-primary .widget:last-child {
		top: 72px;
	}
}

shared by @Abhishek

I hope this helps. Enjoy!

#DailyDose

Thanks & Regards,
Gulshan


How to Sticky Footer in WordPress?
#2

With this, are all widgets made sticky?

P.s - Anyone using Q2W3 widget - please note that it does have slow mysql queries which have been observed with query monitor plugin. So be careful of this plugin.


#3

Only last widget of sidebar. Not all.
Demo: please check my blog.


#4

This is nice. Fast too.


#5

Nice.

We can put AdX as a sticky ad for more $$$$ :heart_eyes:


#6

It is allowed???


#7

After taking to the concerned company two months back… They told me to do not do this, even if you have Adx ad unit…
For sticky adx ad unit… They will provide the ad unit code… According to them adx normal ad unit and adx sticky ad units are different…


#8

Adx, yes. AdSense, no. But for me and @Morshii, everything is allowed :stuck_out_tongue: :joy:

Nope. I am using AdX Sticky Ads for one year.

Roadblock requires a special ad unit, but the Sticky ads does not.


#9

I just used for only one month and now not using any thing of adx… But they told me. By the way thanks for updating


#10

THIS IS NOT WORKING WITH THRIVE THEMES?:frowning_face::frowning_face:


#11

Use the inspect element tool and get the class(s) and replace .content-sidebar-wrap, .sidebar-primary .widget:last-child, .admin-bar .sidebar-primary .widget:last-child.


#12

I did it! I got the ID and replaced it. :frowning_face:


#13

Which theme are you using?


#14

Thrive!


#15

Thrive have many themes, which one do you use? Or send me a link to the demo of the theme.


#16

https://thrivethemes.com/themes/rise/ This is it bro


#17

Okay, let me check and try :slight_smile:


#18
element.style {
    position: fixed;
    top: 30px;
    width: 380px;
    margin-top: 100px;
}

#19

I will try this and update you bro…


#20

How to make this code work for Generatepress theme?? @GulshanKumar