Is it possible to have a transparent area above the hero image? I would really love for it to possibly resemble the header like its displayed on the computer screen?
Can the control items above the carousel be styled? l think that it should be enlarged and/or centered.
Also, why isn't the font not being responsive in mobile view in the header of the internal pages, http://dev.parents4publicschools.org/resources/. Would I need to create media queries to adjust that? Or is there a way to use % over px for the text size and the line height.
1) About a transparent header on mobile, it's possible if the instances stated at salient \ header navigation - transparency - Use Transparent Header When Applicable? - small text under that, are met i.e. a slider on the top of the page, page header set - page header settings section on the edit pages.
You might also need to disable the header secondary nav on header navigation - layout related. Just use standard header.
2) About those control items, you can use this CSS to enlarge them:
body .carousel-wrap[data-full-width="false"] .control-wrap {
left: 60%;
}
3) About the header of the internal page, could you set the header secondary nav to standard header. If that does not help then give us temporary admin access and we will take a closer look from that page's edit page.
In regards to the control items, how can I style them for example, I would like for them to stand out more, change the background to a color and the text white. Does this make sense?
Lastly, I will use the header as is so no problems there.
Yes, you can change the background of the carousel controller. Please add the code below as well.
/*change background*/
.carousel-wrap .carousel-heading {
background: blue !important;
}
/*change text color to white*/
.ascend .carousel-next i, .ascend .carousel-prev i, .item-count {
color: #fff !important;
}
Hi there,
Sorry for the late reply.
1) About a transparent header on mobile, it's possible if the instances stated at salient \ header navigation - transparency - Use Transparent Header When Applicable? - small text under that, are met i.e. a slider on the top of the page, page header set - page header settings section on the edit pages.
You might also need to disable the header secondary nav on header navigation - layout related. Just use standard header.
2) About those control items, you can use this CSS to enlarge them:
.ascend .carousel-next i, .ascend .carousel-prev i{ font-size:2em; } .carousel-wrap .control-wrap .item-count span.current,.carousel-wrap .control-wrap .item-count span.total{ font-size:2em; }For centering you can use this CSS:
body .carousel-wrap[data-full-width="false"] .control-wrap { left: 60%; }3) About the header of the internal page, could you set the header secondary nav to standard header. If that does not help then give us temporary admin access and we will take a closer look from that page's edit page.
Thanks.
Thanks Andrew!
In regards to the control items, how can I style them for example, I would like for them to stand out more, change the background to a color and the text white. Does this make sense?
Lastly, I will use the header as is so no problems there.
Hi again,
Thank you for writing back to us.
Yes, you can change the background of the carousel controller. Please add the code below as well.
/*change background*/ .carousel-wrap .carousel-heading { background: blue !important; } /*change text color to white*/ .ascend .carousel-next i, .ascend .carousel-prev i, .item-count { color: #fff !important; }Hope this helps.
Best regards.