Does anyone know how I can make this header sticky on this theme and keep it responsive

Yes, it has affected it; the "hamburger" menu (ie the icon that the menu collapses to on narrow screens) is now too high, sitting partly out the top of the page on tablet sized devices, and not visible on smaller devices (at least, that is according to the responsiveness testing tool in Chrome).

Also, part of the logo is out the top of the page too.

First remove the "margin-top: -30px; " against #header.

Then try adding:

#core {
  padding-top: 41px;
}

Select all Open in new window

However there is some extra height in the header for screen width less than 768px, being applied by the following style in style.css:

@media (max-width: 767px)
style.css:33
.header-inner {
    padding: 20px 0;
}

Select all Open in new window

Try commenting out the padding, and then it looks good to me at all screen sizes.

Can you clarify what you mean? What should be higher or wider? The gap is between the header and what else? Do you mean under the slider?

I see what you mean in the screenshot, but I don't have the same problem when viewing the site at http://ballinabyronglass.com.au/newsite/.

I can't log in to the dashboard of course, so I don't know if that makes a difference.

I tried viewing the site from Edge, Chrome, Opera, and Firefox on Windows 10. Which browser were you using that has the problem? What screen width were you viewing it at?

for page: http://ballinabyronglass.com.au/newsite/services/doors-and-windows/

similarly, go to line: 22 to 27, replace:

.page-title {
    margin-top: 40px;
}
.vc_column_container {
    margin-top: -200px;
}

Select all Open in new window

with:

.page-title {
    margin-top: 140px;
    padding: 1px 0;
}
.vc_column_container {
    margin-top: -290px;
}

Select all Open in new window

should work and will not affect other pages.