Responsive page - scale menu up to a certain size

Responsive Responsive Layouts
1

Hi there,

I have a full responsive page where all contents will perfectly scale up and down as the browser window changes size. I have chosen this option as almost the majority of the page contains images which I would like to remain scaled to the browser window size as it is a photography website.

I have since seen this page of the website on a iMac 27" and found that the menu featured on the top of the page looks to big when full screen.

So my question is, is there a way I can make the menu scale up to a certain point. When it reaches that point it stops scaling and the images continue?

I have looked into using some code for the inner html of the menu but I started to struggle quickly so would be greatly for any suggestions.

Thanks,

Ollie

2

Responsive layouts provide complete control of this. You can set as many breakpoints (and as many menu sizes) as you want.

3

Thanks for your reply.

Something which I forgot to mention previously is that I have had to use some html code for the scaling as I was having issues with Firefox scaling properly with the normal flexible layouts and this seemed to be the only work around.

The code I have included works just like flexible layouts so allows the page to just keep becoming bigger or small depending on the how much the browser size is increased or decreased to.

I have added the code below in a separate message as this may be needed to help solve this and stop the menu increasing in size after reaching a certain point in size.

Thanks

4 
function isScalePossible() {
can = 'MozTransform' in document.body.style;
if (!can) can = 'webkitTransform' in document.body.style;
if (!can) can = 'msTransform' in document.body.style;
if (!can) can = 'OTransform' in document.body.style;
if (!can) can = 'transform' in document.body.style;
if (!can) can = 'Transform' in document.body.style;
return can;

}

if (isScalePossible()) {
window.myHypeContainerId = hypeDocument.documentId();
$(’#’ + window.myHypeContainerId).css({
’-moz-transform-origin’: ‘0% 0%’,
’-webkit-transform-origin’: ‘0% 0%’,
’-ms-transform-origin’: ‘0% 0%’,
’-o-transform-origin’: ‘0% 0%’,
‘transform-origin’: ‘0% 0%’,
“position” : “absolute”,
margin: 0
});

scaleSite();
$(window).resize(scaleSite);

}
return true;

function scaleSite() {
var hypeContainer = $(’#’ + window.myHypeContainerId);
var containerWidth = hypeContainer.width();
var containerHeight = hypeContainer.height();
var parentWidth = hypeContainer.parent().width();
var parentHeight = hypeContainer.parent().height();
var scaleWidth = parentWidth / containerWidth;
var scaleHeight = parentHeight / containerHeight;
var scale = Math.min(scaleWidth, scaleHeight);
var scale = scaleWidth;
var left = (containerWidth * scale < parentWidth) ? ((parentWidth - (containerWidth * scale)) / 2) + ‘px’ : ‘0px’;
var top = (containerHeight * scale < parentHeight) ? ((parentHeight - (containerHeight * scale)) / 2) + ‘px’ : ‘0px’;
hypeContainer.css({
"-moz-transform": “scale(” + scale + “)”,
"-webkit-transform": “scale(” + scale + “)”,
"-ms-transform": “scale(” + scale + “)”,
"-o-transform": “scale(” + scale + “)”,
“transform”: “scale(” + scale + “)”,
“left”: left,
“top”: top
});
}