Black Friday Sale! Get up to $40 off GP Premium!Learn more

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

Home Forums Support Exempt home header container from mobile CSS, change button location mobile only

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #441778
    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!

    GP Premium 1.5.6
    #441831
    Leo
    Staff
    Customer Support

    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

    #442102
    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?

    #442262
    Leo
    Staff
    Customer Support

    Button as the main navigation?

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

    Thank you so much!

    #442553
    Leo
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.