[Resolved] Navigation margin with sections & gp hooks

[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!!!

[Tom]

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 🙂

[Heath]

Great! I knew it was simple.

This worked…

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

[Tom]

Perfect 🙂

[Author]

Posts