Adding more text to the bar

This is not something I would be adding into the plugin since it’s so niche. But it should be possible already. What you’ll want to do is add the text in the same customizer field but separate the text in their own divs with custom classnames so you can add CSS to space them out.

The tricky part of this specific design is you want the main notice to remain in the center while adding content to the left. This can’t be done perfectly with flex containers unless you give the left content a fixed width or it’s done using absolute CSS.

Example Video: https://a.cl.ly/X6uvJxP5

The CSS:

.easy-notification-bar-message {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex-grow: 1;
	justify-content: end;
}

.notice-left {
	margin-right: auto;
}

.easy-notification-bar-button {
	display: flex;
	flex-grow: 1;
	justify-content: start;
}

So as you can see the items won’t stay perfectly centered in the middle because of the flex layout. You could use a negative margin added to the notice-right class to push it back a bit, example: https://a.cl.ly/eDuKAQm2

You may want to use media queries though to ensure it looks good on mobile and the negative margin doesn’t cause the text to go over eachother.

• AJ

Hi AJ,

Thank you very much for your solution. The CSS doesnt seem to be working as expected. I’ve captured it here – https://www.loom.com/share/d078d5f6922f4962913dbbd309cdd723

When looking at your site it looks like the CSS you added is being rendered inside a media query:

only screen and (max-width: 768px)

Sounds like you have an unclosed media query in your custom CSS field so any CSS you add at the bottom is being added inside this media query.

I’m so stupid. Thanks a ton AJ. It all works wonderfully.

No you aren’t stupid! We’ve all made that mistake before. Glad I could be of help ??

Hi AJ,

One more question. How do I put the email and phone number to the right, instead of the left?

Thanks!

I assume you mean before the close button? If so, this is much much more complex. Because the way the notification bar works by default is there is a flex container that holds the text and the button separately, if you try to move text to the right using flex styles would also flip your button to the left.

The only “good” way I can really think of moving the text to the right would be using absolute positioning but it wouldn’t look good on mobile. Example CSS:

.notice-left {
	position: absolute;
	right: 50px;
}

And of course you would need to remove the previous CSS that was intended to shift the text to the left.

It looks like you are using the Flatsome theme and they have a Top Bar section (similar to my Total theme) why don’t you use the theme’s Top Bar area instead of the notification bar plugin? This way you may have more control and you don’t need the added plugin.

For example in my Total theme you could easily do what you want like this: https://a.cl.ly/04u80r0w (basic example) – when I look at the Flatsome demos it appears they have a “similar” top bar area that you should be able to modify to accomplish something similar to what you need.

Unless your client specifically wants the ability to “close” the notice at the top, but if you are adding important information like phone/email it seems like a bad idea for the section to allow itself to become hidden because then the visitor may come back and not be able to find such crucial information.

• AJ

Thanks for the reply AJ. I usually use Flatsome’s top bar header customizer for this. But the client wants the top bar to close. That’s why I’m using your plugin. I’m pulling my hair out with these weird requests.?

I saw the video that you have sent. Looks very easy. But since it took weeks to develop this website and its a huge website, migrating over to Total would be a pain. Next project, I’m definitely switching over to Total.

The CSS you gave worked. I’m hiding the email and phone on mobile because I’m unable to get it to look as I want it on mobile, email and phone on top and “become loan originator” text and button on bottom. I just don’t want to spend time customizing this for mobile but I’m sure I’ll come back to ask you about how to do this. Hopefully not lol. Thanks again for all the support!

@media screen and (max-width: 768px) {
	
	.notice-left {
		
		display:none;
	}
}

Oh ya, I wouldn’t want you to switch themes now. The site looks great (nice work). But thank you for considering for future projects ??

I tried messing in the browser but can’t really see a good way to make it look really nice on mobile. But also, it doesn’t seem good to have the phone number and email hideable and the content is already in the footer (most common and where people look for it). I would probably suggest to the client to just not even have it at the top.

Also, one thing I want to mention is when you insert an email as you’ve done in the top bar directly onto the site it will be picked up by scanners. Ideally you will want to obfruscate the email to prevent bots from spamming the email address.

Same thing with how the email is added in the footer.

You may want to consider using a plugin such as this one to prevent your client from being spammed and their email address from ending up in unwanted places. The plugin makes use of the core antispambot function – so you could just write your own child theme code for this instead of using a plugin.

• AJ