Archived topic
css style only on page hero
3 replies · Started by Al on October 12, 2019
SO I was successful in detaching my site's logo from the navigation menu using css you suggested in another topic
@media (min-width: 769px) {
#site-navigation .navigation-branding img {
position: absolute;
left: 20px;
top: 50px;
height: 200px;
}
}However, I only wanted it to be detached on the front page which I am using a page hero header element on. With the css in customize, it applied the detachment to all pages, which makes the logo an overlay on all other pages content.
My question is:
How to detach the logo with the above specifications only on the front page? could it be done within the page hero content (if I enable display rules for front page and exclude the entire site). Or is there a front page specific css I can add to customizer?
Hi there,
This would make the CSS to apply on front page only:
@media (min-width: 769px) {
.home #site-navigation .navigation-branding img {
position: absolute;
left: 20px;
top: 50px;
height: 200px;
}
}That worked exactly how I wanted. Thank you Leo
No problem :)
