Use Different Headers on Mobile and Desktop

Hi, this is Jeppe from Oxyelements and this tutorial will guide you on how to make two different headers, one for desktop and one for mobile.

If you would rather watch a video of how I did it, find the video at the bottom of the post.

Protip: This post assumes you have a subscription with oxyelements as you will need it to follow the steps. Register Now and follow the guide.

Step 1: Creating a Template

  • Templates can be controlled inside the WordPress Admin by selecting Oxygen > Templates.
Hover image to play animation
  • First, go to Add a Template. I'll call mine ‘Main’ because I will display this Template on all of my pages.

  • Click on Other > Catch All > Publish.
Hover image to play animation

Step 2: Choose a header that will be displayed on Desktop

  • After you published a template click Edit with Oxygen.

  • Click on the Add button > Library > Design sets > Oxyelements > Sections & Elements.
Hover image to play animation

  • Click on the ‘Structure’. Here you can rename the header. I will name it ‘Main Header’ as it will be our main header for desktop.
Hover image to play animation

Protip: Click the Save button regularly so your past work doesn’t get lost. This is a quick way of getting around the fact that Oxygen Builder doesn’t have an “undo” function. Simply reload the editor to last saved state.

Step 3: Pick a responsive header

  • Again, select Add button > Library > Design sets > Oxyelements > Sections & Elements
Hover image to play animation

Go down to ‘Headers’ and choose a responsive header that you like. I’ll take- Basic Modal Menu 5 for this tutorial.

Step 4: Making different headers appear on desired devices

  • Go to Structure > collapse Main Header tab > delete Responsive Header tab.
    The reason we’re doing this is that we want different header (in this case Basic Modal Menu 5) to be displayed on mobile.
Hover image to play animation
  • Select Main Header tab > collapse ‘Devices’ (top left) > Less than 992px.
Hover image to play animation
  • Go to Advanced tab > Layout > Select None.
Hover image to play animation
  • Now select Structure > Basic Modal Menu 5 > Devices > All Devices.
Hover image to play animation
  • Go to Advanced tab > Layout > Select None.
    Now this Basic Modal Menu 5 will not be displayed on the desktop.
Hover image to play animation
  • Click ‘Class’ > Choose ‘Section’ > None.
Hover image to play animation
  • Select ‘Devices’ > Less than 992 pixels > block.
    This will make the responsive menu visible only on mobile.
Hover image to play animation

That’s it!

Now you should have one menu on the desktop and one menu on mobile devices. Let's just add some inner content, save that and let's see how it will look in the front end.

We are in ‘development mode’ in Safari and here, you can see that it displays different headers on different browser sizes and how it works. You can see that one menu will be displayed for devices above 992 pixels, and the second menu for devices under 992 pixels.


That's all for now, guys and I hope this tutorial helps you. Have a nice day, and see you soon.

If you prefer Video Tutorials take a look below

twitterfacebooklinkedin