Adding Full Width Bar to Top of Corporate Pro

[MediaServices]

I've added a full width utility bar at the top of this site I'm working on to display a link to new practices due to the pandemic and it appears correctly, but when scrolling down the page, the utility bar scrolls away, leaving an empty space where it was above the nav bars. I've tried CSS fixes and spent over an hour googling last night and just can't get that utility bar to stay.

I got most of the code I'm using from Carrie Dil's post here, but I've modified it to create one bar instead of 2: https://carriedils.com/widget-area-above-header-genesis/

This has been added to the functions.php

/** Register Welcome Bar Widget Area */
genesis_register_sidebar( array(
 'id' => 'top-utility-bar',
 'name' => __( 'Top Utility Bar', 'theme-prefix' ),
 'description' => __( 'This is the full-width top utility/welcome bar above the header.', 'theme-prefix' ),
) );

add_action( 'genesis_before_header', 'utility_bar' );
/**
* Add utility bar above header.
*
* @author Carrie Dils
* @copyright Copyright (c) 2013, Carrie Dils
* @license GPL-2.0+
*/
function utility_bar() {
 echo '<div class="ce-utility-bar"><div class="wrap">';
 genesis_widget_area( 'top-utility-bar', array(
 'before' => '<div class="ce-top-utility-bar">',
 'after' => '</div>',
 ) );

 echo '</div></div>';
}

And this is the CSS added in Customize > Additional CSS

/* Top Utility/Welcome Bar */

.ce-utility-bar {
position: relative;
background-color: #333;
color: #ddd;
font-size: 14px;
font-size: 1.4rem;
padding: 10px 0;
padding: 1rem;
text-align:center;
}
.ce-utility-bar a {
 color: #ccff33;
}
.ce-utility-bar a:hover {
 text-decoration: underline;
}
.ce-top-utility-bar {
position: static;
width: 100%;
}
.ce-top-utility-bar p {
 margin-bottom: 0;
}

This is HTML added into the newly created widget at the page top

<div>
	Read our COVID-19 statement <a href="http://carolinaexterminating.com/covid19/"><strong>here</strong></a> to see how we are protecting the communities where we work.
&lt;/div&gt;

And this is some outputted HTML from the live website

<div class="ce-utility-bar"><div class="wrap"><div class="ce-top-utility-bar"><section id="custom_html-5" class="widget_text widget widget_custom_html"><div class="widget_text widget-wrap"><div class="textwidget custom-html-widget"><div>
	Read our COVID-19 statement <a href="http://carolinaexterminating.com/covid19/"><strong>here</strong></a> to see how we are protecting the communities where we work.
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/section&gt;
&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

---

– George (MediaServices)

http://carolinaexterminating.com/

[MediaServices]

Hmm, the HTML tags have broken down into HTML entities. Here is the HTML I entered into the newly created widget

<div>
	Read our COVID-19 statement <a href="http://carolinaexterminating.com/covid19/"><strong>here</strong></a> to see how we are protecting the communities where we work.
</div>

And this is some outputted HTML from the live website

<div class="ce-utility-bar"><div class="wrap"><div class="ce-top-utility-bar"><section id="custom_html-5" class="widget_text widget widget_custom_html"><div class="widget_text widget-wrap"><div class="textwidget custom-html-widget"><div>
	Read our COVID-19 statement <a href="http://carolinaexterminating.com/covid19/"><strong>here</strong></a> to see how we are protecting the communities where we work.
</div></div></div></section>
</div></div></div>

---

– George (MediaServices)

[MediaServices]

UPDATE: If anyone takes a look at this I've temporarily gone disabled "Enable sticky header" in theme settings so I'm not leaving my client with that empty space. Feedback to get it working with "Enable sticky header" turned back on would be appreciated.

---

– George (MediaServices)

[AnitaC]

You may want to reach out to SEOThemes support as Corporate Pro is a third party theme. They provide support for their themes here - https://seothemes.com/support/. Submit a ticket to them and they should be able to assist you.

---

Need help with customization or troubleshooting? Reach out to me.

[MediaServices]

Ahh, thank you!

---

– George (MediaServices)

[Author]

Posts