Hi Alison

To reduce your header height on smaller screen devices could you try adding the following to the Custom CSS field of your templates parameters...

@media only screen and (max-width: 767px) {

#container_header {height: 150px;}

#container_header_bg {top: 130px;}

#nav-toggle {top: 146px;}

#socialmedia {top: 150px;}

}

Ciarán

Hi and thanks for the reply

I'm sorry but that doesn't seem to work - it just moves the slideshow higher into the menu bar instead? See attachment.

Or I'd be happy to do an alternate logo that was more square and less letterbox shaped for mobile devices if easier?

Hi Tiggia

That suggestion does seem a bit off on some screen sizes. May I suggest the following custom CSS which will stop your logo from resizing which may be an option for you...

.logo > a {

    overflow: hidden;

}

.logo > a img {

    max-width: none;

}

Ciarán