[Resolved] css style only on page hero

Home Forums Support [Resolved] css style only on page hero

Home Forums Support css style only on page hero

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1032988
    Al

    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?

    #1033012
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #1033140
    Al

    That worked exactly how I wanted. Thank you Leo

    #1033162
    Leo
    Staff
    Customer Support

    No problem 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.