Topbar: Modify announcement message space for mobile

If you'd like to hide or adjust the announcement message area for mobile devices, you can use this modification. This will help keep the area clean or make room for a language switcher.

Option 1: Hide announcement bar on mobile

/* -- code to hide topbar announcement message on mobile -- */
@media all and (max-width: $small) {
.header-message {display:none;}
}
/* - end - */

Before example:

After code example:

Option 2: Increase area size

/* -- code to adjust topbar height and announcement message on mobile -- */
@media all and (max-width: $small) {
.info-bar {min-height:3rem;}
.header-message {width:12rem;}
}
/* - end - */

You can adjust the values depending on the size of your message.

After code example:

Where do I add the code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code