Add a Full Width Notification Bar in Miva to the Shadows Theme

By Mr. Dif | May 6, 2020 |
hello sign lit up with miva logo

How to easily add a full-width notification bar in one of the latest Miva Ready Themes with these quick code snippets placed in your user interface and css.

This has been tested and works in the Shadows Ready theme. Go to User Interface > Settings in the admin. Scroll down to Global Header & Footer and find the following code:

Look for this code:

<mvt:item name="readytheme" param="contentsection( 'fasten_header' )" />

Add this code to your Global Header & Footer code immediately after the code above:

<!---Notification Bar start -->
		<section class="o-layout">
			<div class="o-layout__item">
				<div class="x-messages x-messages--info u-text-center">
					<span class="u-icon-info"> </span> Your message goes here.
				</div>
			</div>
		</section>
<!---Notification Bar End ---->
 

The next line of code afterwards is

<pre><code class="language-php"><mvt:item name="navbar" /></code></pre>

Next we can adjust the look with the following CSS added to theme-styles.css added in the //yourdomain.com/mm5/themes/shadows/ui/css/theme-styles.css file

.x-messages--info, .x-messages--warning {
    background-color: #e07405;
    color: #fff;
    font-weight: bold;
}


If there’s a space below your notification bar, you might want to add

margin-bottom: 0em;

to the styles above.

Here’s what the above looks like on the demo theme.

miva notification bar

Although the notification bar is full width and shows up on every page of your site, it’s not dismiss-able but easily could be with some added javascript. To not have it show up again for the user after dismissing the bar, you’d have to add a cookie for it also I believe.

Posted in Digital Life

Leave a Comment