# Fixed Top Menu Issue

**URL:** <https://forum.pinegrow.com/t/fixed-top-menu-issue/2052>\
**Category:** Styling (CSS)\
**Created:** [July 13, 2018, 12:05am UTC](https://forum.pinegrow.com/t/fixed-top-menu-issue/2052 "2018-07-13T00:05:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Badboy](https://avatars.discourse-cdn.com/v4/letter/b/f4b2a3/32.png) [@Badboy](https://forum.pinegrow.com/u/Badboy)\
**Post date:** [July 13, 2018, 12:05am UTC](https://forum.pinegrow.com/t/fixed-top-menu-issue/2052/1 "2018-07-13T00:05:13Z")

</div>

Hi Everybody,

I got my menu from a block. I have about a 50px gap between my block header and my menu. When I select “Fix Top” for my menu, it pulls my header block right up tight to it so it takes my gap away. What causes this? Any help is appreciated.

Thanks  
Randy

---

<div class="post-metadata">

**Author:** ![SureWeb](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@SureWeb](https://forum.pinegrow.com/u/SureWeb)\
**Post date:** [July 13, 2018, 12:51pm UTC](https://forum.pinegrow.com/t/fixed-top-menu-issue/2052/2 "2018-07-13T12:51:03Z")

</div>

Add a CSS rule to your stylesheet  
nav.fixed-top {  
top: 50px;  
}

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [July 15, 2018, 12:19am UTC](https://forum.pinegrow.com/t/fixed-top-menu-issue/2052/3 "2018-07-15T00:19:42Z")

</div>

Just curious, which block did you use that you had this problem with?

---

<div class="post-metadata">

**Author:** ![Badboy](https://avatars.discourse-cdn.com/v4/letter/b/f4b2a3/32.png) [@Badboy](https://forum.pinegrow.com/u/Badboy)\
**Post date:** [July 15, 2018, 1:08am UTC](https://forum.pinegrow.com/t/fixed-top-menu-issue/2052/4 "2018-07-15T01:08:55Z")

</div>

Hi,

Not at my computer right now. I think it was nav block 1-4. I tried Sureweb:s css solution. It put the gap above the navbar. I tried to at it to bottom with no success. I will double check tomorrow for you on the block.

---

<div class="post-metadata">

**Author:** ![SureWeb](https://avatars.discourse-cdn.com/v4/letter/s/71e660/32.png) [@SureWeb](https://forum.pinegrow.com/u/SureWeb)\
**Post date:** [July 15, 2018, 11:01pm UTC](https://forum.pinegrow.com/t/fixed-top-menu-issue/2052/5 "2018-07-15T23:01:52Z")

</div>

Hi,

I think I misunderstood what you were asking. Scrap what I said…  
After you have applied fixed-top to the navbar select div.top-bar in the tree and give it a top-margin of 50px.

 ![Capture](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/3/30f9628544db293ce94f1083174c08f403165c76.PNG)

Or else you are looking for one of these effects

[https://www.w3schools.com/howto/howto\_js\_navbar\_sticky.asp](https://www.w3schools.com/howto/howto_js_navbar_sticky.asp)

[https://www.w3schools.com/bootstrap/bootstrap\_affix.asp](https://www.w3schools.com/bootstrap/bootstrap_affix.asp)

[https://codepen.io/twisty/pen/qZmRPK](https://codepen.io/twisty/pen/qZmRPK)

---

<div class="post-metadata">

**Author:** ![Badboy](https://avatars.discourse-cdn.com/v4/letter/b/f4b2a3/32.png) [@Badboy](https://forum.pinegrow.com/u/Badboy)\
**Post date:** [July 16, 2018, 1:54am UTC](https://forum.pinegrow.com/t/fixed-top-menu-issue/2052/6 "2018-07-16T01:54:46Z")

</div>

Sorry, about that. I don’t always explain things properly. Thanks I will give that a try. James, I have confirmed it was Nav Block 1-4 I 'm using.