Responsive Utility Bar

[definemedia]

Hello there,

I wonder if someone might be able to help me with this, I have lost errr, hours ( or maybe days ??) trying to figure it out and think I must be missing something fundamental here. Any help is really very much appreciated.

I have setup a Utility Bar using Carrie Dills excellent tutorial http://www.carriedils.com/widget-area-above-header-genesis/ my problem is not in setting it up, I have done this with two widgets left and right - one with primary menu and one with social media. My issue is making it responsive.

I have this in place to position the utility bar correctly at the first size of 1140 px.

.utility-bar {
background-color: #333;
border-bottom: 1px solid #ddd;
color: #ddd;
font-size: 9px;
font-size: .9rem;
padding: 5px 0;
padding: 0.5rem;
}

.utility-bar .wrap {
width: 1140px;
margin: auto;
}

.utility-bar-left {
float: left;
width: 60%;
}

.utility-bar-right {
width: 40%;
float: right;
}

My rudimentary logic thought this would work for responsive, but unfortunately not. This is driving me just a little crazy !! I wonder if anyone out there with more knowledge than me would be kind enough to help me over this hurdle / impasse / lack of knowledge.

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

.utility-bar .wrap {
width: 1023px;
margin: auto;
}

}

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

.utility-bar .wrap {
width: 800px;
margin: auto;
}
}

etc.

Many many thanks in advance for any assistance.

All the best,

Maria

http://www.tpiver5.definemedia.co.uk/

[Brad Dalton]

Did you ask the author of the code about this as they would know best?

---

Tutorials for StudioPress Themes.

[DTHkelly]

This is an alternate approach. Instead of the Utility Bar, try this:
http://briangardner.com/add-widget-area-site-header/

Use this widget https://wordpress.org/plugins/black-studio-tinymce-widget/ with columns https://wordpress.org/plugins/genesis-easy-columns/

The columns within the widget are responsive.

I just tested this with Daily Dish Pro.

[definemedia]

Hello ... thank you both very much for the response. I have posted with Carrie to see if she can help. Will also have a look at this alternative tutorial today and see how that works. Will post when I have reached the answer ... thanks so much for the tips. Maria

[definemedia]

Oh my ... another 3 hours later and this was the solution.

.utility-bar .wrap {
max-width: 1140px;
margin: auto;
}

not

.utility-bar .wrap {
width: 1140px;
margin: auto;
}

now the inner wrap is responsive - what a novice mistake.

[Author]

Posts