Theming site name in mayo over Flexslider slideshow header? I asked this originally in the Mayo support on drupal.org but got directed here.

Continuing my development of my main work website has continued to use Mayo as I find it brilliant and simple.

This week I've managed to implement the Flexslider module using views slideshow and views to construct a new header.

The issue I have which i could do with some support with and that is theming the sitename and slogan to overlay on the left to match the title on the right. Ultimately I will link the title on the left to content of that service but first i need to get this sitename issue sorted.

No matter what i do, i cannot get the sitename to display in front of the flexslider?

I have managed to theme the title of the image within the view fine so i dont think its a flexslider issue but wondered if there is any thing i need to over ride with additional css within the mayo theme itself using css?

I currently have the sitename off until i sort this issue out but see the attached picture which shows the inspected code and where the div is currently via chrome inspect tool.
Ok I've sorted it. 

Use the Module: Views variable field

Add the field to the View for the slideslow / flexslider.

Add the site_name variable to the field.

Rewrite as Link and type in 

Rearrange the fields so that it is Site name then Slideshow then Caption

Save. 

Rewrite the CSS to grab the site name div and place it where you want. 

Remove some annoying div whitespace

Be happy!