Title: Responsive banners
Last modified: August 31, 2016

---

# Responsive banners

 *  Resolved [HenryAhokas](https://wordpress.org/support/users/henryahokas/)
 * (@henryahokas)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-banners/)
 * Hi,
 * I need to place two different banners via javascript above the header and main
   navigation, mobile and normal versions. Tried it out by placing the script in
   the header.php directly with an if statement for screen resolution.
 * This might work but difficult to say now as the ads are not yet active for the
   site. But I wanted to ask if there is another method? Is it possible to use css
   [@media](https://wordpress.org/support/users/media/) to select which script/banner
   the page displays?
 * Thanks!

Viewing 1 replies (of 1 total)

 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-banners/#post-6981912)
 * Hi Henry,
 * Thanks for choosing Apex!
 * For something like this, you’ll want to use a “[child theme](https://codex.wordpress.org/Child_Themes)“.
   You can [click here](https://www.competethemes.com/wp-content/uploads/child-themes/apex/empty/apex-child.zip)
   to download a starter child theme for Apex.
 * The trouble with directly editing the header.php file in Apex is that you will
   lose these modifications when you update the Apex theme. A child theme keeps 
   your changes protected.
 * You’ll want to copy the header.php file from Apex into your Apex child theme,
   and then the child theme’s version will be loaded instead. Then, include the 
   markup/javascript for the ads where you want them displayed in the header.
 * Lastly, you can control the mobile/desktop display entirely with CSS like this:
 *     ```
       .desktop-ad {
         display: none;
       }
       @media all and (min-width: 600px) {
   
         .desktop-ad {
           display: block;
         }
         .mobile-ad {
           display: none;
         }
       }
       ```
   
 * I made up these class names as examples, but you can use this code as a starting
   point. This code would hide the desktop ad by default while the mobile ad is 
   allowed to display. A media query is then applied to tell the browser when the
   screen is 600px or wider to hide the mobile ad and display the desktop ad instead.
 * I hope that helps, and let me know if you have any further questions.

Viewing 1 replies (of 1 total)

The topic ‘Responsive banners’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/apex/1.41/screenshot.png)
 * Apex
 * [Support Threads](https://wordpress.org/support/theme/apex/)
 * [Active Topics](https://wordpress.org/support/theme/apex/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/apex/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/apex/reviews/)

## Tags

 * [banner](https://wordpress.org/support/topic-tag/banner/)
 * [header](https://wordpress.org/support/topic-tag/header/)
 * [if](https://wordpress.org/support/topic-tag/if/)
 * [media](https://wordpress.org/support/topic-tag/media/)
 * [mobile](https://wordpress.org/support/topic-tag/mobile/)
 * [script](https://wordpress.org/support/topic-tag/script/)

 * 1 reply
 * 2 participants
 * Last reply from: [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-banners/#post-6981912)
 * Status: resolved