How to set mobile menu for higher resolutions

roquelage

Hi,

How could i activate the mobile menu for higher resolutions? For example, less than 768px

Thanks!

Air

That is rather not possible without modification in JavaScript. I wouldn't recommend it, but if you insist I will try to figure out something.

With regards.

roquelage

Hi again,

Why would you not reccommend it??

The thing is that its is impossible to show the menu as it is, in resolutions lower to 845px or something like that (have a look http:// nuevo.linc.es)

I think this would be the best solution, please, indicate the possible cons of it, so i can see what to do

Thanks!

Air

You mean that menu goes in two lines, and this is not acceptable by you?

roquelage said: Why would you not reccommend it??

JS changes are always first to be out of date. Also often one change causes lot of implications to other things. Anyway...

Go to js/script.js line ~307 and change this

layout = function(event, size){
                        //if wide screen
                        if(size > BP[0]){

to

layout = function(event, size){
                        //if wide screen
                        if(size > BP[1]){

Keep in mind that theme wasn't optimised for such change and not everything may look perfect just thanks to this change:-)

With regards.

roquelage

The odd part comes when i try to set a margin for it normal state, and sticky bar...

Anyway, can you think up about any other solution?

Thanks!!

Air

You dry description is not enough for me to understand what is problematic. Show me live example or/and screen shot.

With regards.

roquelage

Hi,

live example: nuevo.linc.es

What i was trying to explain is that if dont set margin top, assistive menu is near top of the bar. After setting margin, looks ok, but if i scroll down, when sticky bar is shown, that margin is pushing the menu button down almost out of header

Normal header
https://www.dropbox.com/s/qp4u2cdpd68ywq7/Captura de pantalla 2014-01-30 14.14.47.png

sticky header
https://www.dropbox.com/s/pu088cbcvni9ecm/Captura de pantalla 2014-01-30 14.15.27.png

Thanks for your help!!!!

Air

Try adding such custom CSS

@media only screen and (max-width: 800px){
header.fixed #access.touch.with-search h3.assistive-text {
    margin-top: 0;
}
}

With regards.

roquelage

Hi Air,

How can i replicate this change to the child theme?? Copying the file to child theme /js/script.js doesnt work

Thanks!!

Air

I think child theme doesn't support such changes, that is why I don't like giving them on forum :-) I think you will have to deregister JS file and register it again but it requires some testing. I don't have ready solution for you, and don't have time either to play with it right now.

Something similar is already done in child theme functions.php for stylesheet.

It will have to wait.

With regards.

roquelage

Thanks