How to fix a div outside the theme in WordPress

In the non-responsive WordPress themes, it's easy to stick a div element outside the sidebar as you scroll.

If the width of the page is 1,000px, you can try the following CSS code:

position: fixed;
top: 0;
left: 50%;
margin-left: 505px; /* (The width of the page) / 2 + (space between the page border and the fixed element) */
margin-top: 225px; 
z-index: 100;

The value of "margin-top" indicates the distance from the top of the page. The value of "margin-left" is how far the element is to the right from the center of the page.

When it comes to the responsive WordPress themes, the CSS code above does not work. I added "transform property" to the above CSS code snippet to make a div fixed outside the theme.

position: fixed;
top: 5px;
left: 50%;
transform: translateX(1000%); /* Added this line */
margin-left: 50px; /* determines the position of the element horizontally */

The value of "margin-left" needs to be adjusted depending on the theme you are currently using. I tested the above code in the TwentyTwelve theme and this theme, and it worked well.
Stick a div outside the theme
Using this CSS code, you can fix any elements such as menu navigations and banners outside the WordPress theme without using a plugin.

Leave a Comment