Content overlaps menu in Pavillion

Tagged: Pavilion

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Posts
August 22, 2022 at 2:49 pm #56204

Jase Payne
Guest

Hey, we are having issues with our menu bar, specifically on mobile version. The menu with our social icons and “Jobs” and “Public Notices” is being cut off on mobile. I have reviewed your pages for suggestions on how to alleviate the issue. Padding is one of the things I found, but I do not see any capability to address the padding. However, it could be something else that I am just not seeing. Please help us determine the best way to fix this. Thanks!

Jase

August 22, 2022 at 2:59 pm #56223
Joseph W
Keymaster
Hi Jase,

I took a look at the mobile view for your website and I see exactly what you are talking about. The overlap that occurs on mobile displays has to do with some of the default settings for the Pavillion theme you are using, but fortunately we can work around these configurations by adding a little Custom CSS to your website.

There is a negative position assigned to the main website content that is responsible for the overlap you see on mobile and the following CSS uses a Media Query to adjust the positioning only for mobile display sizes, you should not see any changes on other screens.
```
@media (max-width: 767px) {
    .site-content .main {
        top: 0;
    }
}
```
The Pavillion theme is one of Classic WordPress themes which unfortunately means that it does not have all of the features available in our latest theme framework. If you ever want to see some of the additional features provided in the new framework then you might want to check out our newest theme Crio.

I hope that solution works for you Jase and please let us know if you ever have any other questions for us!
Author

Posts