Custom header on mobile

Support
#1

Hello, I want to make a header that will only appear on mobile devices at the bottom so it looks like an app. I can create the header in pro and make it just appear when in mobile view but the problem I have is to get a “normal” header to show at the top with logo and links but on mobile just logo and no hamburger menu. Similar to this website https://stormystudio.com/
Any help would be appreciated, thank you

#2

Hi There,

Thank you for writing in, you can create a separate bar and add just the logo to it, and only show that bar on mobile screens.

If that does not work, please provide us the site URL and login credentials in a secure note, so we can take a closer look.

Cheers!

#3

Thank you I have set that up but I am having trouble getting things to work, I can have only 1 header as the global header so how do I get the headers to swap when viewed on mobile, I can’t have both headers active on the same page.

#4

Hey @cheesydoodles,

I checked your Global Header and saw you only have 1 bar. Please create another bar in your global header like this.

Now hide Bar 2 and only show Bar 1 in desktop. Hide Bar 1 and show Bar 2 in mobile.

To fully utilize Pro, it is best that you learn its usage. You can check out our Knowledge Base for that.

Thanks.

#5

Brilliant thank you for our help, another thing is I am trying to get the footer on screens above 980px to always be at the bottom of the screen I have tried this
jQuery(document).ready(function($) {
var $main = $(’.x-main’),
$windowHeight = $(window).outerHeight(),
$masthead = $(’.masthead’).outerHeight(),
$wpbar = $(’#wpadminbar’).outerHeight(),
$footer = $(’.x-colophon.bottom’).outerHeight() + $(’.x-colophon.top’).outerHeight() + 80;

$main.css(‘min-height’, $windowHeight - $masthead - $wpbar - $footer);
});
it works (almost) but it seems to be just below the screen area, around the size of the header I have so you have to scroll a bit to see the footer, any ideas on how to fix this?

#6

Hey @cheesydoodles,

If you’re using the Classic Footer, this would require custom development which is outside the scope of our support.

Pro has a Bottom header which is fixed at the bottom of the screen. You can use that one.

To only show the bar inside the bottom header on screens above 980px, use the Hide During Breakpoints feature like this.

Thanks.

#7

Ok thank you for your help

#8

You’re welcome.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.