Style / NAVBAR 

Dropdown background colour

Text colour

Sub menu drop down font size

 Now the active state colour needs to be set up like this:

In the item settings: Item > Settings > Item > Type > click on dynamic and select, Item

Item > Active click on dyanmic and select, Active - Menu item.

Full Width

Layout / Header / Dropdown / tick the radio button for Enable dropbar

Grid / Settings / Image / Box Shadow and Floating Shadow.

Style / Components / Navbar / Dropdown / Padding,
Scroll down to Dropdown Nav Item / Padding Horizontal and insert the very same value say 20px.

Scroll up to Dropdown Nav / Margin Horizontal and insert the same value, but with a leading negative sign: -20px.

Then if using a mega menu - Menus / Main Menu / Heating (Builder) / Nav / Items / Settings / Active

make sure 'Enable active state' is not checked.

Change the text colour in Nav, not Navbar

Style / Button - right at the bottom of the Button style area

/* To Top Button style */

.uk-totop {

padding: 30px;

color: #ffffff;

background-color: #00000089;

}

Blue and green buttons

Add to the Joomla article

<button class="gf-button"><a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">Contact Eleanor</a></button>

/* Blue Button design */
.blue-button, {
color: #fff !important;
font-size: 16px;
background-color: #203ce1;
border-color: #000 !important;
border-width: 1px !important;
border-style: solid;
padding: 10px
}

.blue-button a:link {
}

.blue-button:hover {
color: #000 !important;
background-color: #0820ad;
border-color: #000 !important;
border-width: 1px !important; 
border-style: solid;
}
/* END Button design */

/* Green Button design */
.green-button, {
color: #fff !important;
font-size: 16px;
background-color: #15af52;
border-color: #000 !important;
border-width: 1px !important;
border-style: solid;
padding: 10px
}

.green-button a:link {
}

.green-button:hover {
color: #000 !important;
background-color: #176741;
border-color: #000 !important;
border-width: 1px !important;
border-style: solid;
}
/* END Button design */

Add to the Joomla article

<button class="gf-button"><a href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">Contact Eleanor</a></button>

Add to the template CSS

/* Button design */
.gf-button, {
color: #000 !important;
font-size: 20px;
font-family: playfair display;
background-color: #00dbf1;
border-color: #000 !important;
border-width: 1px !important;
border-style: solid;
padding: 10px
}

.gf-button a:link {
color: #000 !important;
}

.gf-button:hover {
color: #000 !important;
background-color: #fff;
border-color: #000 !important;
border-width: 1px !important;
border-style: solid;
}
/* END Button design */

Add to, Settings / CSS - (CHANGE depending on your link path.)

/* Change the bullet point image */
@internal-list-bullet-image: "/images/graphics/bullet.png";

Add to each bullet list. (This stays the same.)

<ul class="uk-list uk-list-bullet">

Here it is to just copy.

 class="uk-list uk-list-bullet"

Padding

.uk-list-bullet > ::before { left: -40px; }
.uk-list-bullet > * { padding-left: 40px; }

Further steps

Second bullet too

/* Bullet - Change the bullet point image */
@internal-list-bullet-image: "/images/graphics/list-bullet.png";

/* Bullet - Change the second indent bullet point image */
.uk-list-bullet li:before {
&:extend(.uk-list-bullet > ::before);
}
/* Bullet - remove the original bullet */
.uk-list-bullet li {
list-style-type: none;
}
/* Bullet - improve the layout */
.uk-list-bullet li:before,
.uk-list-bullet>::before {
background-position: 0 50%;
}

Drop Kick Brewery

List make the images go above the second column

Add code to List / Advanced / CSS

@media(max-width: 640px) {
    .el-item > .uk-grid {
    display: flex;
    flex-direction: column;
    }
}

Click into the Grid

Settings / General / Text Alignment - center

Click into the grid.

settings / panel / padding