Title: dynamic margin? is it possible
Last modified: April 10, 2017

---

# dynamic margin? is it possible

 *  Resolved [losrack](https://wordpress.org/support/users/carlos-jaramillo/)
 * (@carlos-jaramillo)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/dynamic-margin-is-it-possible/)
 * _[ Moderator note: [moved to Fixing WordPress](https://wordpress.org/support/topic/before-posting-in-everything-wordpress/?view=all).]_
 * Hi,
 * I have this page that I just did, and there is this element that has position:
   fixed. So it always stays in its place.
 * I am using it to provide links to different parts of the page, with links to 
   ids. The margin for this division is set just to be right after the navigation
   with negative margin. So far so good.
 * Is there a way to adjust the margin again when the navigation is out of the screen
   so it can go closer to the top? … obviously when the navigation os off the screen?
 * So far I have the desktop version of this page. It looks better on tablets and
   desktops or big screen cells. I am editing the mobile version but it is not ready
   yet.
 * [This is the page](http://programa-arte.com/web-design/)
 * Thanks for reading !

Viewing 2 replies - 1 through 2 (of 2 total)

 *  [Shariq Khan](https://wordpress.org/support/users/shariqkhan2012/)
 * (@shariqkhan2012)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/dynamic-margin-is-it-possible/#post-9013288)
 * 1. First of all, assign an id to your sticky element for us to have something
   to work on.
 * So its markup should be something like this:
 *     ```
       <div id="sticky-menu" style="float: left;width: 15%;height: 80%;position: fixed;z-index: 1;margin-top: -4em;border-style: solid;border-color: #c0c0c0;border-width: 1px;box-shadow: 2px 2px 5px #c0c0c0;overflow: auto;line-height: 0.9em;font-size: 10pt;background-color: #fff;">
       <hr>
       <p style="text-align: center;"><a style="color: #333333; font-weight: 300;" href="#online">Pagos Online</a></p>
       ....
       </div>
       ```
   
 * 2. Next use some Jquery to detect when the navigation menu goes above the viewport
 *     ```
       <script>
       	jQuery(window).scroll(function() { //animate elements on scrolling
   
       		navMenuTop = jQuery('#site-navigation')[0].getBoundingClientRect().top; //get current top coordinate of the navigation bar
       		navMenuHeight = jQuery('#site-navigation').height();
   
       		//Detect whether the nav-bar has gone completely above the viewport
       		if (navMenuTop < (-1 * navMenuHeight) )
       			jQuery('#sticky-menu').addClass('pushedUpMenu');
       		else
       			jQuery('#sticky-menu').removeClass('pushedUpMenu');
   
       	});
       </script>
       ```
   
 * 3. Add this class to your CSS:
 *     ```
       .pushedUpMenu {
       	margin-top: 5px !important;
       	top: 0 !important;
       }
       ```
   
 * You are good to go now.
 *  Thread Starter [losrack](https://wordpress.org/support/users/carlos-jaramillo/)
 * (@carlos-jaramillo)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/dynamic-margin-is-it-possible/#post-9015403)
 * OMG it works.
 * Thanks a lot !!!

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘dynamic margin? is it possible’ is closed to new replies.

## Tags

 * [margin-top](https://wordpress.org/support/topic-tag/margin-top/)
 * [position fixed](https://wordpress.org/support/topic-tag/position-fixed/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 2 replies
 * 2 participants
 * Last reply from: [losrack](https://wordpress.org/support/users/carlos-jaramillo/)
 * Last activity: [9 years, 2 months ago](https://wordpress.org/support/topic/dynamic-margin-is-it-possible/#post-9015403)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics