Header Image and Header Right widget area not right on mobile – Focus Pro

[Belinda]

I am using the Focus Pro theme for my blog.
When I view the site via a device the Header Image is sitting adjacent to the Header Right widget area and they don't stack vertically nicely. I've tried changing some CSS code to force the Header Right widget down underneath the Header Image but it doesn't work.
I'd like Header Image then below my social icons and then below that the search widget.

Also, both menu bars do not condense into a hamburger menu so not sure how I adjust that.

http://www.thetraininglady.com

[Brad Dalton]

Might be time to update your child theme.

Otherwise, you can use CSS Grid to control the stacking order of elements at any screen width wrapped in a media query. https://www.w3schools.com/css/css_grid_item.asp

---

Tutorials for StudioPress Themes.

[Belinda]

Hi Brad,
Thank you for the reply. Do you mean update to the latest version of the current theme, or get a new child theme?

[Brad Dalton]

Update to a new child theme.

---

Tutorials for StudioPress Themes.

[Belinda]

Oh, not really looking to get a new child theme at the moment, wanting to fix this issue. Will try the CSS grid option.

[Victor Font]

If you want to use CSS Grid, perhaps this tutorial will help: https://victorfont.com/customize-the-genesis-header-with-css-grid-layout/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Belinda]

For anyone who may have a similar issue here is the resolution:

1) The Header Right widget was designed to hold a menu widget and so the CSS styling is set up accordingly. I am in the process of CSS styling the Search & Simple Social Icons widget I am using so that they appear as needed when viewed at smaller screen sizes.

2) In relation to the menu bars not responding, Focus Pro does already have this included but my site was not loading the responsive-menu.js file needed. I uploaded new copies of responsive-menu.js and functions.php to ensure they were not the issue. I then disabled caching (did not resolve) but then found another plugin I was using for site performance and when I disabled that plugin my menus became responsive again.

I ended up contacting StudioPress directly and was given detailed explanations on this. Very happy with the support provided by Nick. Glad that a new child theme was not needed.

[Victor Font]

If you're satisfied with the response you received from Studio Press, please mark this topic as resolved.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Author]

Posts