Outreach Pro – Modify how the header looks in mobile view

[TJohnson]

Hi all,

We are attempting to dramatically change the header in Outreach Pro so that it is more compact. Essentially, we would like to reduce it to a small horizontal bar with the logo on the left and a navigation sandwich icon on the right when viewed within certain screen sizes.

Normally, I would import the header file into the child theme and make the changes there, but the genesis header is different from what I am used to. So I am looking for advice on how best to accomplish this.

Currently, I am researching whether we can add code directly using Genesis Simple Hooks that we would display via CSS media queries. But I don't think this is the right approach either.

I am going to continue digging into this and will post any findings here, but in the meantime any advice or direction would be greatly appreciated.

Thank you.

http://www.thinkprofits.com/blog/

[TJohnson]

Just in case this may help others, here is the interim solution I came up with. The objective was to reduce the rather large header that came with the Outreach Pro theme into something much more compact, specifically for screen dimensions of 480 (typical smart phone in portrait mode).

Originally, we wanted the logo on the left and the sandwich nav icon on the right in a single small horizontal bar at the top of the page. The nav bar though was not playing nice, so we went with the logo on the left, our blog name on the right and the responsive nav bar directly underneath. Now, there has been about an 80% reduction in the size of the header, and the content is much more prominent from the initial view.

I wanted to avoid messing with the templates as much as possible, so we went with a mostly CSS solution.

1) installed a plugin that allowed us to attach individual classes to widgets
2) added our blog name to the header right widget via a text widget and attached a class that only showed in mobile view
3) added a class that would hide the other content in the header right widget in mobile view
3) added the following css to the existing media query:

@media only screen and (max-width: 480px) {
.mobile-only {
display: inline;
}
.hide-in-mobile {
display: none;
}
.title-area {
float: left;
min-height: 25px;
width: 35%;
}
.site-header .widget-area {
padding-top: 3px;
float: right;
width: 55%;
}
.site-description, .site-header .title-area, .site-header .widget-area, .site-title {
height: 25px;
}
.header-image .site-title > a {
float: left;
min-height: 30px;
}
.site-header {
background-color: rgb(88, 155, 55);
color: rgb(255, 255, 255);
min-height: 65px;
}
.site-header .widget-area {
line-height: normal;
}
.site-header .wrap {
padding: 5px;
}
h1.site-title {
margin-top: 3px;
}
.home-bottom {
background-color: #fff;
padding-top: 15px;
}
}

There's room for improvement for sure, but it did the trick in a tight timeline.

[Phids]

Thanks for the code! Just what I needed.

[Author]

Posts