-1

I'm working on a responsive web design which has 2 different header menus i.e., desktop header and mobile header.[Please see: I can't make it responsive as the content of menus are different]. Depending on the screen resolution the header file is called. My code is:

<style type="text/css">
@media only screen and (min-width: 768px) {
    /* tablets and desktop */
    .mobile {
        display: none
    }
}

@media only screen and (max-width: 767px) {
    /* phones */
    .desktop {
        display: none
    }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
    /* portrait phones */
    .desktop {
        display: none
    }
}
</style>
<div class="mobile">
    <?php


    include_once( WWW . 'inc/layout/mobile_header.php' );

    ?>
</div>
<div class="desktop">
    <?php 
{
  include_once(WWW . 'inc/layout/desktop_header.php');
}

?>

</div>

This code is working fine but what I have noticed is that both the files are loaded, the files are hidden/shown depending on the screen size. I want a code in which would only load/execute one PHP file depending on its screen size.

Krina Joshi
  • 1
  • 2

1 Answers1

0

You can't do this with CSS since the page is already loaded from the server, it is then hiding the elements.

Why not just design your header to be responsive and not deal with this?

bones
  • 808
  • 3
  • 10
  • 23
  • I need to use 2 different headers as the menu in both the headers are different. – Krina Joshi Jul 12 '17 at 15:01
  • I'd personally hide the elements that you want to get rid of via css or redesign it so it works in both. If you're stuck on your path, you'll have to use JS and grab the header via ajax. – bones Jul 12 '17 at 15:04