[Resolved] Navigation margin with sections & gp hooks

Home Forums Support Navigation margin with sections & gp hooks

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #135591
    Heath

    My problem is with a banner ad I’m using for mobile only, and the way it conflicts with the Sections add-on I’m using for the home page.

    Here is my process: First, I used GP Hooks to create a div class “mobilebanner” and placed it and the html “inside content container”. Then, I used CSS to set .mobilebanner to display on mobile screens only.

    My home page uses Sections. So, my problem now is that the navigation menu adds a margin, but not when combined with Sections. So, to make the banner ad display consistently, I need to add a margin to my home page navigation menu (Sections), but only on mobile screens… Can I do conditional CSS code and apply @media screen to my home page only?

    Here’s my website: http://www.dadkingdom.com

    Thanks for all your hard work and amazing support!!!

    Dad Kingdom - powered by GeneratePress

    #135592
    Tom
    Lead Developer
    Lead Developer

    Hi Heath,

    You can use the .home selector to apply CSS to the homepage only.

    So you just place .home in front of the class you’re selecting.

    Let me know if you need more info 🙂

    #135597
    Heath

    Great! I knew it was simple.

    This worked…


    @media
    screen and (max-width: 770px) {
    .home .main-navigation {
    margin-bottom: 20px;
    }
    }

    Dad Kingdom - powered by GeneratePress

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