diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 89fbbec83..4199e5461 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -321,6 +321,10 @@ StTooltip StLabel {
     icon-shadow: black 0px 2px 2px;
 }
 
+.panel-menu {
+    -boxpointer-gap: 4px
+}
+
 /* The rounded panel corners we draw don't
  * support transitions, so disable transitions
  * for the buttons at the left/right edges
diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 992a954ed..811695d06 100644
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -609,7 +609,7 @@ AppIconMenu.prototype = {
         if (St.Widget.get_default_direction() == St.TextDirection.RTL)
             side = St.Side.RIGHT;
 
-        PopupMenu.PopupMenu.prototype._init.call(this, source.actor, 0.5, side, 0);
+        PopupMenu.PopupMenu.prototype._init.call(this, source.actor, 0.5, side);
 
         // We want to keep the item hovered while the menu is up
         this.blockSourceEvents = true;
diff --git a/js/ui/boxpointer.js b/js/ui/boxpointer.js
index 705184816..1523ef650 100644
--- a/js/ui/boxpointer.js
+++ b/js/ui/boxpointer.js
@@ -180,7 +180,7 @@ BoxPointer.prototype = {
         this.bin.allocate(childBox, flags);
 
         if (this._sourceActor && this._sourceActor.mapped)
-            this._reposition(this._sourceActor, this._gap, this._alignment);
+            this._reposition(this._sourceActor, this._alignment);
     },
 
     _drawBorder: function(area) {
@@ -306,19 +306,18 @@ BoxPointer.prototype = {
         cr.stroke();
     },
 
-    setPosition: function(sourceActor, gap, alignment) {
+    setPosition: function(sourceActor, alignment) {
         // We need to show it now to force an allocation,
         // so that we can query the correct size.
         this.actor.show();
 
         this._sourceActor = sourceActor;
-        this._gap = gap;
         this._alignment = alignment;
 
-        this._reposition(sourceActor, gap, alignment);
+        this._reposition(sourceActor, alignment);
     },
 
-    _reposition: function(sourceActor, gap, alignment) {
+    _reposition: function(sourceActor, alignment) {
         // Position correctly relative to the sourceActor
         let sourceNode = sourceActor.get_theme_node();
         let sourceContentBox = sourceNode.get_content_box(sourceActor.get_allocation_box());
@@ -338,6 +337,9 @@ BoxPointer.prototype = {
         let margin = (4 * borderRadius + borderWidth + arrowBase);
         let halfMargin = margin / 2;
 
+        let themeNode = this.actor.get_theme_node();
+        let gap = themeNode.get_length('-boxpointer-gap');
+
         let resX, resY;
 
         switch (this._arrowSide) {
diff --git a/js/ui/panelMenu.js b/js/ui/panelMenu.js
index dd559ca29..6cb96e222 100644
--- a/js/ui/panelMenu.js
+++ b/js/ui/panelMenu.js
@@ -23,7 +23,8 @@ Button.prototype = {
         this.actor._delegate = this;
         this.actor.connect('button-press-event', Lang.bind(this, this._onButtonPress));
         this.actor.connect('key-press-event', Lang.bind(this, this._onSourceKeyPress));
-        this.menu = new PopupMenu.PopupMenu(this.actor, menuAlignment, St.Side.TOP, 0);
+        this.menu = new PopupMenu.PopupMenu(this.actor, menuAlignment, St.Side.TOP);
+        this.menu.actor.add_style_class_name('panel-menu');
         this.menu.connect('open-state-changed', Lang.bind(this, this._onOpenStateChanged));
         this.menu.actor.connect('key-press-event', Lang.bind(this, this._onMenuKeyPress));
         Main.chrome.addActor(this.menu.actor, { affectsStruts: false });
diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 9e256b58f..9ee304dab 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -985,12 +985,11 @@ function PopupMenu() {
 PopupMenu.prototype = {
     __proto__: PopupMenuBase.prototype,
 
-    _init: function(sourceActor, alignment, arrowSide, gap) {
+    _init: function(sourceActor, alignment, arrowSide) {
         PopupMenuBase.prototype._init.call (this, sourceActor, 'popup-menu-content');
 
         this._alignment = alignment;
         this._arrowSide = arrowSide;
-        this._gap = gap;
 
         this._boxPointer = new BoxPointer.BoxPointer(arrowSide,
                                                      { x_fill: true,
@@ -1048,7 +1047,7 @@ PopupMenu.prototype = {
 
         this.isOpen = true;
 
-        this._boxPointer.setPosition(this.sourceActor, this._gap, this._alignment);
+        this._boxPointer.setPosition(this.sourceActor, this._alignment);
         this._boxPointer.show(animate);
 
         this.emit('open-state-changed', true);