highcharts download context menu size - highcharts

Question

I am using highcharts & highstock latest versions and been struggling ever since day 1 to get the download context menu width size right... there seems to be no way to control the context's menu width and I am not sure what I am doing wrong... please take a look on the below image.
Any help would be appreciated.
<div id='CurrentDemand' style='width:1124px; height:400px;'></div>
function Chart_CurrentDemand_Bar(DIVID, TITLE, CATEGORIES, yAxisLabel, Tooltip, SERIES1LABEL, SERIES1VALUES ) {
var Param_CATEGORIESS = JSON.stringify(CATEGORIES);
var Param_SERIES1VALUES = JSON.stringify(SERIES1VALUES);
var data_CATEGORIESS = JSON.parse(Param_CATEGORIESS);
var data_SERIES1VALUES = JSON.parse(Param_SERIES1VALUES);
$("#" + DIVID).highcharts({
chart: {
type: 'column'
},
title: {
text: TITLE
},
xAxis: {
categories: data_CATEGORIESS,
tickInterval: .5,
tickmarkPlacement: 'on',
gridLineWidth: .5
},
yAxis: {
min: 0,
title: {
text: yAxisLabel
}
},
tooltip: {
headerFormat: '<span style="font-size:20px">{point.key}</span><table width=150px>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:1f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true,
animation:true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: SERIES1LABEL,
data: data_SERIES1VALUES
}],
navigation: {
buttonOptions: {
verticalAlign: 'bottom',
y: -20,
height: 30,
theme: {
'stroke-width': 1,
stroke: 'silver',
r: 0,
states: {
hover: {
fill: '#bada55'
},
select: {
stroke: '#039',
fill: '#bada55'
}
}
}
}
}
});
}