Replace Header with different mobile header

[hackette]

I have a client who wants a completely different header for mobile (cell phones) than for desktop. I mean different content and layout. He wants hamburger far left, logo, email icon, phone icon, search icon/function.
What would be the best way to attack this (apart from drinking too much) and how? These are initial thoughts:
Adding a new mobile-header widget. Use custom html in widget to make layout.
THEN
1. use an after-header hook to install it and use css to display only on mobile and hide main header on mobile OR
2. use conditional php (based on screen size) in the functions.php file to remove_action and add_action on show regular header or the mobile-header (HELP).

Any help is appreciated. This is already costing me a ton of time.

http://webintheworks.com/KKM2/

[Brad Dalton]

You could use CSS for media queries to change the site header elements at any screen width.

@media only screen and (max-width: 1023px) {

Add your CSS rules here

}

---

Tutorials for StudioPress Themes.

[hackette]

Thanks Brad, I thought of that but am not sure how to implement it.
Wouldn't they still fall in the order they are now in the desktop view? Also, where/how would I add a bunch of stuff that isn't in the desktop view (or would I add them all in the right header and then just turn on or off display depending in which screen size)?

[andytc]

I think I’d start with the mobile view first and work my way up to desktop and hide what’s not required.

[Brad Dalton]

Here's the options for visibility https://www.w3schools.com/css/css_display_visibility.asp

You could also use jQuery .addClass() and .removeClass() at a specific screen width.

---

Tutorials for StudioPress Themes.

[hackette]

Thanks Brad. Worked great. I just thought it would be more difficult. Just goes to show the simple solution is often the best.

[Author]

Posts