Archived topic
Exempt home header container from mobile CSS, change button location mobile only
5 replies · Started by Susanne on December 4, 2017
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!
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
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?
Button as the main navigation?
@media (max-width: 768px) {
.inside-top-bar {
padding: 10px;
}
.main-navigation .main-nav ul li a {
text-align: center;
}
}Thank you so much!
No problem!
