[cartess3]

Doesn't work ... I too use wistia. I don't wanna host the file on my website.

[cartess3]

Any suggestions?

[cartess3]

I know y'all are tired of hearing from me ... And please know that I've been trying and trying. Spent 8 hours trying to short this out but can't seem to figure it out. I've restored my backup countless times but can't figure it out. Probably staring me right in the face.

I'm trying to get the dark grey utility bar to be the same width as the blue navigation menu:
https://ameliahomes.wpengine.com/contact/

ANd then I"m trying to get the text within each of the widgets to be responsive when it's viewed on mobile devices.

I almost got that figured out as I've managed to get the right utility bar to be centered. But no matter what I do, I can't get the left utility bar to respond, nor get it centered.

Prior to the few changes I made, when it responded, the content in both utility boxes sat side by side.

The few changes I've made finally got it some they stack on top of each other when the screen resizes.

Any help is appreciated.

[cartess3]

hmmmm ... That's odd. Looks like it corrected itself.

Thanks!

[cartess3]

Does anyone know why the widgets appear on top of each other in the header?

I followed Carrie Dills tutorial for adding a utility bar to a Genesis theme.

Any advice would be appreciated.

Sincerely

[cartess3]

I'd assume this part of the code would make it work:

}

.utility-bar-left,
.utility-bar-right {
width: 50%;
}

.utility-bar-left p,
.utility-bar-right p {
margin-bottom: 0;
}

.utility-bar-left {
float: left;
}

.utility-bar-right {
float: right;
text-align: right;

[cartess3]

I'd added the following earlier to styles.cc

Did I do something wrong?

/* Utility Bar
--------------------------------------------- */

.utility-bar {
	background-color: #333;
	border-bottom: 1px solid #ddd;
	color: #ddd;
	font-size: 12px;
	font-size: 1.2rem;
	padding: 10px 0;
	padding: 1rem;
}

.utility-bar a {
	color: #ccff33;
}

.utility-bar a:hover {
	text-decoration: underline;
}

.utility-bar-left,
.utility-bar-right {
	width: 50%;
}

.utility-bar-left p,
.utility-bar-right p {
	margin-bottom: 0;
}

.utility-bar-left {
	float: left;
}

.utility-bar-right {
	float: right;
	text-align: right;
}

.utility-bar input[type="search"] {
	background: inherit;
	padding: 10px 0 0;
	padding: 1.0rem 0 0;
}

[cartess3]

Ugh... I thought I was making process, but now the two widgets seem to display on top of teach other in the header. They're not showing in the right side (only the left)

https://ameliahomes.wpengine.com/listings/

[cartess3]

AWESOME Victor. That fixed it!!!

Here's the corrected code with the 'straight-quotes'

/** Register Utility Bar Widget Areas. */

genesis_register_sidebar( array(
'id' => 'utility-bar-left',
'name' => __( 'Utility Bar Left', 'theme-prefix' ),
'description' => __( 'This is the left utility bar above the header.', 'theme-prefix' ),
) );

genesis_register_sidebar( array(
'id' => 'utility-bar-right',
'name' => __( 'Utility Bar Right', 'theme-prefix' ),
'description' => __( 'This is the right utility bar above the header.', 'theme-prefix' ),
) );

[cartess3]

Hmmmm...

When I added that code from Carrie's page, my site crashed and had to restore from back up... Is the code no longer working. I copied and pasted as shown below:

I'm using AgentPress Pro Theme

/** Register Utility Bar Widget Areas. */

genesis_register_sidebar( array(
‘id’ => ‘utility-bar-left’,
‘name’ => __( ‘Utility Bar Left’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the left utility bar above the header.’, ‘theme-prefix’ ),
) );

genesis_register_sidebar( array(
‘id’ => ‘utility-bar-right’,
‘name’ => __( ‘Utility Bar Right’, ‘theme-prefix’ ),
‘description’ => __( ‘This is the right utility bar above the header.’, ‘theme-prefix’ ),
) );

[cartess3]

Thank you Victor for taking the time to explain. I sincerely appreciate it. I have css/html skills, but never modified a theme on my own before. I will start here. Thanks again!

[cartess3]

That worked! Muchas Gracias!

[cartess3]

WOW ... That was it. Thanks soooo MUCH!

[cartess3]

Thanks Victor. I'm in there now but can't seem to figure which one controls all the white space under the header graphic. Any suggestions?

I appreciate it!

[cartess3]

Not resolved

[cartess3]

Thanks for your feedback Christoph. I appreciate it.

You've provided some great ideas for a starting point. Did u have a link to that 'German' tourist site? I didn't see a link?

[cartess3]

Thanks for your help Anita. I really appreciate it!
How do I mark as resolved?

[cartess3]

I want the header to remain the width of the header area (1068 px) .

Is this something you can help me with?

[cartess3]

That worked... Thanks soooo much Andrea!!!

[cartess3]

Thank you Sridhar...that worked!!!

[Author]

Posts