0

i am developing one wordpress responsive website. but now i am facing problem menu issue. please see the bellow image for my navigation. on top black bar "Check our Town" will have drop down menu and on blue bar About Us also have drop down menu

enter image description here

so i want when screen resolution bellow 800 then top menu and logo part will be different. i know one way like i can make separate header part then hide it via css and call it via css media query. for that i need to keep that code always in body. but i don't want it i want it will code will be in body only when it required.

say if make top area separate html/php file if i can call it when screen resolution will 800/480 etc that would be work i guess. i can be possible thru php/js but i have no idea how.

see the image there is two part for navigation one is black area and another is blue area. when i will be bellow 800px it will be all menu in one drop down.

see bellow menu i want this type when screen resolution bellow 800px

enter image description here

Accore LTD
  • 287
  • 1
  • 4
  • 18
  • How about Bootstrap? http://getbootstrap.com/ http://stackoverflow.com/questions/4180134/how-to-get-users-screen-resolution-with-php http://stackoverflow.com/questions/1504459/getting-the-screen-resolution-using-php – Trinh Hoang Nhu Nov 26 '13 at 02:44
  • @TrinhHoangNhu So Bootstrap is the new jQuery now? OP: try using existing elements. Can you scale your logo down with CSS? Could you use a sprite? – Aurelia Nov 26 '13 at 02:46
  • @TrinhHoangNhu thanks .. i am not expart on bootstrap but i think bootstrap can not include two nav to one drop dwon i think the way i want for that i need to seperate.. but i am not sure.. idea welcome – Accore LTD Nov 26 '13 at 03:05

3 Answers3

1

I wouldn't recommend the ajax to load the 2 navs. Its adding an extra http request, which is slower than just giving both desktop and mobile the little bit of extra markup required.

I think using media queries is your best approach.

This is what i think you're trying todo: http://jsfiddle.net/krismeister/CNr5y/

The relevevant portion is the @media screen and (min-width:800px){

LessQuesar
  • 2,997
  • 1
  • 17
  • 26
  • thanks. yes if i can not do anyother way then media query i will use.. but personally i don't add extra those code on body. – Accore LTD Nov 26 '13 at 03:36
  • heres one with no extra markup: http://jsfiddle.net/krismeister/CNr5y/1/ it uses nav:before to add any mobile content. – LessQuesar Nov 26 '13 at 19:31
0

I think the only way to achieve it is to use ajax. Send an empty page to a client, check window size, and request the content via ajax with a screen width as a param.

Arek S
  • 2,913
  • 4
  • 19
  • 29
0

i am not so good on jquery and json.. do you bellow way can work ?

$(function() {
    $.post('some_script.php', { width: 800px }, function(json) {
        if(json.outcome == 'success') {
           header-800px.php;
        } else {
            header.php;
        }
    },'json');
});

ref :Getting the screen resolution using PHP

Community
  • 1
  • 1
Accore LTD
  • 287
  • 1
  • 4
  • 18