Hi Chris, first of all you should create a child theme or install a custom css plugin. That way you will not lose your changes when your theme or plugins update. Add this to your custom css:
.fullwidthbanner-container {
width: 100%;
position: relative;
top: 72px;
padding: 0;
overflow: hidden;
}
That will move the slideshow down just below the main header which is 72px heigh.
Now you will have to move the main content area down slightly as well by adding this for the home page only:
body.home #main {
max-width: 1160px;
margin: 0 auto;
margin-top: 82px;
position: relative;
z-index: 10;
clear: both;
}
here I changed the margin-top from 55px to 82px and it will give you a small gap between the slideshow and carousel.
Now you will have to add the media queries for the specific view ports for the breakpoints you want the menu to change in and they have to be exactly the same as the breakpoints in the original css file only the menu styles should change otherwise you will get some strange behavior.
Unfortunately this is a bit complex for posting in this form, but you want to change the ‘#rightheader’ and ‘.searcharea a’ styles for the break point between 979px and 768px to match the styles of the max 767px break point. After getting the menu to work as required you will want to add the two top blocks of code to these two media queries again only this time changing the value for top 72px and margin-top 82px to something bigger to push them further down for these views.
You will have to play with these values a bit to get it just right for all the views.
[ Contact offer redacted ]
Regards
Ernest Close
