What File Do I Modify to Change Header Layout and Design

[cartess3]

I'm currently using the AgentPress theme... I'd like to modify the layout at the top of the pages to look like the custom landing page I put on the front of the website. I'm trying to determine where I should go.

Here's the inner pages of the site which shows the default layout up top:

http://ameliahomes.wpengine.com/image-aligned-right/

Here's the page I want the top to look like:
https://ameliahomes.wpengine.com/

I made that page using a landing page builder ... But now I want to make the inner pages of the AgentPress theme to look like the top because I like the features inside of AgentPress.

Please advise where I should go to look at making these changes so I can have a consistent look throughout the website.

[Victor Font]

There is no single file to change. All the styles, i.e., borders, colors, etc., need to be changed or added to the child theme's style.css.

To get the top bar, you register a new sidebar in functions.php and display it in the genesis_before_header hook. Google Carrie Dills tutorial for adding a utility bar to a Genesis theme.

You have to remove_action for the menu in functions.php and display it in the header right widget area instead. If the header right widget area is not available on the appearance/widgets page, then it has been disabled in functions.php. You would have to remove the code that disables it.

This all requires php, CSS, and HTML skills to accomplish and should take about an hour to complete.

---

Regards,

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

[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]

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’ ),
) );

[Victor Font]

Carrie's code is correct, but somewhere along the line the quotes in the code were converted to curly quotes instead of straight quotes. The quotes in PHP have to be straight quotes, otherwise the code crashes.

Also, in Carrie's code, you have to change the theme-prefix to match your child theme's prefix. The theme-prefix for your theme is agentpress.

---

Regards,

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

[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]

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/

[Victor Font]

You have to add the CSS to styles.css to display them properly.

---

Regards,

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

[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]

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]

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

[Victor Font]

When I view your site, the widgets are side-by-side. They are not on top of each other.

---

Regards,

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

[cartess3]

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

Thanks!

[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]

Any suggestions?

[Author]

Posts