Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!
Does anyone know how I can make this header sticky on this theme and keep it responsive
Hi,
On this site here http://ballinabyronglass.com.au/newsite/
Id like to make the header sticky but it isn't an option in the bluecollar theme.
Does anyone know how I can make it sticky without ruining the whole theme and making it unresponsive?
Thank you so much
On this site here http://ballinabyronglass.com.au/newsite/
Id like to make the header sticky but it isn't an option in the bluecollar theme.
Does anyone know how I can make it sticky without ruining the whole theme and making it unresponsive?
Thank you so much
Do more with
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Try starting with:
There is a media query for width < 1199px that sets "position: relative;" such that it's no longer sticky below that screen width. You may or may not want to alter that too.
#header {
position: fixed;
width: 100%;
}
There is a media query for width < 1199px that sets "position: relative;" such that it's no longer sticky below that screen width. You may or may not want to alter that too.
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).
First remove the "margin-top: -30px; " against #header.
Then try adding:
However there is some extra height in the header for screen width less than 768px, being applied by the following style in style.css:
Then try adding:
#core {
padding-top: 41px;
}
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;
}
The only problem though, is you see a big gap from the header strip so I think it should be higher or perhaps wider?
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?
The header is sticky, however when you slide down the site, there is a 20px or so high gap that shows the site so the header isn't completely covering the top of the site. Its sticky but I think the header needs to be a bit taller so there isn't a gap at the top of the header. Do you know what I mean
top_gap.jpg
top_gap.jpg
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?
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?
Um, I think I have it managed, but I am still having trouble, as you can see if you go to
http://ballinabyronglass.com.au/newsite/services/doors-and-windows/
you see a gap between the header name and the slider? Can anyone help me bring this gap up, or remove it, whatever, and not have it affect the whole header and layout??
http://ballinabyronglass.com.au/newsite/services/doors-and-windows/
you see a gap between the header name and the slider? Can anyone help me bring this gap up, or remove it, whatever, and not have it affect the whole header and layout??
for page: http://ballinabyronglass.com.au/newsite/services/doors-and-windows/
similarly, go to line: 22 to 27, replace:
with:
should work and will not affect other pages.
similarly, go to line: 22 to 27, replace:
.page-title {
margin-top: 40px;
}
.vc_column_container {
margin-top: -200px;
}
with:
.page-title {
margin-top: 140px;
padding: 1px 0;
}
.vc_column_container {
margin-top: -290px;
}
should work and will not affect other pages.
Premium Content
You need an Expert Office subscription to comment.Start Free Trial