To remove the Ukrainian flag and leaflet section altogether, add:

/* remove the Ukrainian flag on the map */
.leaflet-control-attribution a {
    display: none!important;
}

If you use Joomla, please carefully take the following steps:

In your Joomla backend select System > Global Configuration > Site > Default Editor: Editor - None, and click on "Save & Close" in the toolbar.

This is important because most WYSIWYG editors (unrelated to YOOtheme) would "cleanse" the HTML markup when you save and simply delete a div element without content — like the one you are going to add. Once the widget is up and running, select the original editor, of course, and save.

Head over to Joomla Admin Menu > Content > Site Modules, create a new module of the type "Custom". Into the field "Title" enter the "WhatsAPP Widget", select Title: Hide, into the field "Position" type the precise string

  debug

and confirm the entry with the return key.

Into the content field of the module enter the following

  <div id="msgboxxWidget" class="widget"></div>

Mind: The closing is officially not supposed to be added, but I strongly recommend it. If you want to see the result without it, feel free to leave it out.

Make sure the module is set to Status: Published and Menu Assignment > Module Assignment: On all pages, and click on "Save & Close" in the toolbar.

Navigate to YOOtheme > SETTINGS > Custom Code > SCRIPT, and insert precisely the following at the very beginning of the field

  <script src="https://cdn.msgboxx.io/static/js/bundle.min.js" async onload="window.msgboxxClient='YOURID ';"></script>
  <link href="https://cdn.msgboxx.io/static/css/bundle.min.css" rel="stylesheet">

(With your ID instead of YOURID, of course ...)

Important in case the field is not empty and already contains any JavaScript content: If the existing script content in not wrapped in tags add a tag at the very end.

Save the changes.

Reload the page to test the result.

For posterity: From what I could see, they used

<div id="msgboxxWidget" class="widget"></div>

on their site.

This might seem a subtle difference, or even be considered as nitpicking or acting clever on my part, but I couldn't care less. Strictly speaking, this is not about a YOOtheme product. The support of "stitch-ai.com" is apparently not in the habit of providing assistance, so I just wanted to make sure you don't end up with a broken site if you use their product. Thank you

Style / text / Meta

Edit this menu item and either change the menu item type to System Links: Separator (recommended) or click on its tab "Link Type", and into the field labeled "Link Class" insert the string

collections

Yoko tempate

#tm-dialog-mobile .uk-close svg {

width: 30px; height: auto;

}

Row / Edit Column X / Settings / Padding 

Grid / Settings / Panel / Padding

Used with the Dennis Miller template.

YOOtheme > LAYOUT > Header > Dropdown:  Enable Dropbar.

YOOtheme > STYLE > Components > Dropbar > Background.

CSS if it doesn't work

.uk-dropnav-dropbar {
    background: #751310;
}

How can i get the content I have added to positions in my header to show in my smaller screens and mobile views?

There are several possible approaches:

• You could publish additional content via one or more modules (type "Builder" or other) set to Position: Logo Mobile [logo-mobile].

• In a similar way, with modules, you could add content to the offcanvas/modal that is opened when the toggle (a.k.a. "hamburger") icon is clicked, by setting them to Position: Dialog Mobile [dialog-mobile].

• To make the "Toolbar" show up for smaller resolutions you could add a customization. Navigate to YOOtheme > SETTINGS > Custom Code and into the field "CSS/LESS" insert the following CSS:

  .tm-page {
  display: flex;
  flex-direction: column;
  }
  .tm-toolbar.uk-visible\@m {
  display: block !important;
  order: -1;
  }

YOOtheme > LAYOUT > Site > Toolbar:   Inherit transparency from header - centre content - width

STYLE > General > Theme > Toolbar > Background colour apply.