[Resolved] Exempt home header container from mobile CSS, change button location mobile only

[Susanne]

Hi,

I’ve added the following code to correct the header padding on my mobile-only pages:

@media (max-width: 768px) {
.page-header-content-container {
padding-top: 35%;
padding-bottom: 5%;
}

It works great but is messing with the settings on the home page, where the merged header uses a meta slider in the content rather than a background image. What’s the code I need to add/alter to exempt that single page/header? TIA!

Second, as you can see from my site, I’ve used a custom link in my main navigation to have an item styled like a button to stand out (“Make An Appointment”). Is there a way to remove that from the main navigation on the mobile view only, and it separately to the mobile-only page? Perhaps make a section on the home page and add in some CSS to hide it from desktop? I know just enough to cause problems for myself 🙂 Please advise, thanks!

[Leo]

Hi there,

– You can do this to exclude home page:

@media (max-width: 768px) {
    body:not(.home) .page-header-content-container {
        padding-top: 35%;
        padding-bottom: 5%;
    }
}

– Try the hide-on-mobile class: https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

[Susanne]

Thank you, those were perfect! Now the only thing I need to do is center a few things on mobile only: The top bar content (that phone number) and my buttons. Can you point me in the right direction on those?

[Leo]

Button as the main navigation?

@media (max-width: 768px) {
    .inside-top-bar {
        padding: 10px;
    }
    .main-navigation .main-nav ul li a {
        text-align: center;
    }
}

[Susanne]

Thank you so much!

[Leo]

No problem!

[Author]

Posts