Mobile Header

[isampatterson]

Hello,

Is there any way I can add a different header on mobile while still keeping my original header on desktop & tablet?

For some context, I love the look of my current header on desktop and tablet, but it’s too small on mobile so I’ve redesigned it just for that device.

Thanks,
Sam

[Zex]

Hello,isampatterson!

There is a possibility to slightly modify the appearance of the mobile menu, only for certain screen widths, but not completely replace it for a different menu.

What exactly would you like to change in the mobile menu?

Maybe you should try to use the plugin for that.

I found this plugin work nicely with our theme and has a lot configuration options:
https://wordpress.org/plugins/mobile-menu/

Regards

• This reply was modified 4 years, 2 months ago by Zex.

[isampatterson]

Hi Zex,

Thanks for the help with the mobile menu, but I was wondering about the mobile header.

Thanks,
Sam

[isampatterson]

Oh and one more thing on the topic of headers if I may – on desktop, is there any way to cut the blank space between the header and first piece of content?

[Zex]

Hello Sam!
If you decide to go with the plugin I suggested,
There is the option in the plugin setting to insert your logo into the header, so they will look mostly the same as you currently have, so you don’t need to worry about that.
(The default plugin settings have the site text only but you can change that.)

To remove the white space, simply edit your homepage (dashboard->Pages… your home page)
then scroll down to the bottom of the page to find the “Agama options” meta box.
– Open the “Page” tab, and insert the “0px ” value into Page Content Padding margin-top text box.
https://prnt.sc/nh4qir

That should remove the white space.

Regards

[isampatterson]

Thanks for your help! One more question – I’d like to display a full-screen (720px X 1080px) image-based header on mobile while keeping the same header as current on desktop and tablet. Is this possible to do?

Here’s a link to the mobile header I’d like to upload:
https://infinitemgmt.com/wp-content/uploads/2019/04/Header-mobile.jpg

And here’s a link to the desktop / tablet header:
https://infinitemgmt.com/wp-content/uploads/2019/04/Desktop-Header.jpg

Thanks,
Sam

[Zex]

Hello, Sam!

Try to insert the next code into Customizing->General->Additional CSS:

@media (max-width: 600px){
#wp-custom-header img{
    content: url(https://infinitemgmt.com/wp-content/uploads/2019/04/Header-mobile.jpg) ;  
}
}

Change the max-width value per your needs.(Depending on the screen width at which you want the image to appear.)

Regards

[isampatterson]

Amazing, thank you!!

[Author]

Posts