Community Forums › Forums › Archived Forums › Design Tips and Tricks › Adding Full Width Bar to Top of Corporate Pro
Tagged: "corporate pro", full width header bar, full width message bar, full width welcome bar, notification bar
- This topic has 4 replies, 2 voices, and was last updated 4 years ago by MediaServices.
-
AuthorPosts
-
April 9, 2020 at 11:28 am #497853MediaServicesParticipant
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. </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)
April 9, 2020 at 11:33 am #497854MediaServicesParticipantHmm, 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)
April 12, 2020 at 1:54 pm #497910MediaServicesParticipantUPDATE: 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)
April 12, 2020 at 3:52 pm #497911AnitaKeymasterYou 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.
Love coffee, chocolate and my Bella!
April 13, 2020 at 11:53 am #497928MediaServicesParticipantAhh, thank you!
– George (MediaServices)
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.