Archived topic
Hide Secondary Navigation on Mobile
7 replies · Started by Debra on March 7, 2022
I am unsuccessful at hiding the secondary navigation for mobile. I've tried several suggestions I found here in the forum. Can you take a look and let me know what CSS to use?
Thanks!
Hi Debra,
Here is a CSS you may try:
@media (max-width: 768px) {
nav.secondary-navigation {
display:none;
}
}
Here is an article with regards to adding CSS: https://docs.generatepress.com/article/adding-css/#additional-css
Adding it through additional CSS should work.
Hope this helps! Kindly let us know how it goes. :)
Thanks, Fernando. I applied the CSS to my Child Theme's style sheet. It doesn't appear to work for me.
I can’t see the code I provided when viewing your site from my end. This should be visible if added correctly.
Can you try temporarily disabling the caching mechanisms set in place in your website?
Moreover, can you also check if there is any syntax error in the CSS codes you have in the stylesheet?
Kindly let us know how it goes.
I can see if the host can disable any caching.
The host provided this info when I asked them earlier today:
"It appears that all the properties for the secondary-navigation class are generated from the gp-premium plugin (screenshot attached). It is overwriting the css for secondary-navigation, so you may need to do this another way."
Does that mean anything specific to you besides what you mentioned above?
Even if it’s overwriting CSS, the CSS I provided should appear. :)
In any case, I found that there indeed is a Syntax error in your CSS style sheet.
This specific section has a missing closing bracket - }: https://share.getcloudapp.com/wbuz1Gbl
You can test that the code works if you place it on top: https://share.getcloudapp.com/rRu1q2jD
Hope this clarifies. Kindly let us know how it goes. :)
Oh my goodness, thank you!!!
No problem Debra! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. :)