The Icon Background Image & Colour

The icon background image is set in the following section of CSS:

/*Add the background image (this will only display in webkit browsers)*/

@supports (-webkit-background-clip: text) {
.ds-advent-14 .fa {
    background: url(http://advent2017.divisoupdemos.com/wp-content/uploads/sites/21/2017/11/menu-back.jpg) center;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }
}

If you wish to use the same image as in the demo, upload the menu-back.jpg file from the download package to your media library and then change the URL for the background in the above section of CSS to the URL of the file in your media library.

If you wish to use a different background image, simply upload an image approx 100 x100px to your media library and replace the URL in the CSS above with the URL of that image in your media library.

The color property in the below CSS is the colour the icons will display in non-webkit browsers, you can change this colour to anything you want.

/*Style font awesome icons*/

.ds-advent-14 .fa {
    display: block;
    font-size: 3em;
    text-align: center;
    margin-bottom: 10px;
    /*Icon fallback colour*/
    color: #000;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

Fixed Header

If you wish to have a fixed header, simply uncomment this section of CSS:

/*To have your new header fixed at the top of the screen, uncomment this section*/

/*
.ds-advent-14-section {
    position: fixed;
    top: 0;
    z-index: 99999;
    width: 100%;
}
*/

So that it looks like this:

/*To have your new header fixed at the top of the screen, uncomment this section*/

.ds-advent-14-section {
    position: fixed;
    top: 0;
    z-index: 99999;
    width: 100%;
}

Changing the Menu Items

The menu items are created using HTML as you can see below:

[one_third]<a href="#"><i class="fa fa-home" aria-hidden="true"></i>Home</a>[/one_third][one_third]<a href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i>About</a>[/one_third][one_third_last]<a href="#"><i class="fa fa-wrench" aria-hidden="true"></i>Services</a>[/one_third_last

Replace each # with the URL of the page you wish to link to and the link title (for instance 'Home') with the title of your menu item.

You can change the Font Awesome icons to anything you want, simply by changing the icon name, example: fa-home or fa-user-circle-o

Note: You will need to change both the menu links and icons in both the desktop and tablets version of each module.