- This topic has 7 replies, 3 voices, and was last updated 3 years, 12 months ago by
Leo.
-
AuthorPosts
-
February 26, 2017 at 5:19 pm #284324
Martin
You helped me edit the CSS of my site to adjust the mobile header, but I realized the menu bar at the top is covering up the content on mobile so you can never see the top of the page.
Is there a way to tell all pages to have some padding at the top when the site is in mobile orientation?
Here’s the site: https://www.iwantoverflow.com/blog/
PS: Let me know if any change has been made in new updates such that the top bar with menu and logo can be the same from initial load to the sticky menu when scrolling. (Right now there is no logo when the page first loads, then the logo shows up when scrolling.)
Thanks!
GeneratePress 1.3.44GP Premium 1.2.94February 26, 2017 at 7:21 pm #284344Leo
StaffCustomer SupportHi Martin,
Try this CSS to see if it fixes the content overlap problem:
@media (max-width: 768px) { a.screen-reader-text.skip-link { position: relative !important; } }
Make sure you add CSS using this method here: https://docs.generatepress.com/article/adding-css/#simple-css
Let me know.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 26, 2017 at 10:22 pm #284388Martin
That didn’t change anything.
Here’s the custom CSS that’s already there, just in case this helps:
.column-container { max-width: 960px; margin-left: auto; margin-right: auto; margin-bottom: 0; padding-bottom: 0; } .inner-container { width: 55%; margin: auto; text-align: center; } .video-container { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 91%; } .gform_wrapper .ginput_complex .ginput_right { float: none !important; width: 100% !important; } .gform_wrapper .ginput_complex .ginput_left { float: none !important; width: 100% !important; } boxhighlight { background: rgba(0,0,0,0.5); padding: 5px 10px; } .main-navigation .site-logo { float: left; line-height: 77px; /* Adjust this to your menu item height */ margin-right: 1.5em; } h4 { font-size: 1.1em; font-weight: bold; margin-bottom: .67em; } .hero { position: relative; background-color: #607D8B; height: 0 !important; width: 100% !important; } .hero:after { content: ''; position: absolute; top: 100%; left: 0; right: 0; margin: 0 auto; width: 0; height: 0; border-top: solid 35px #607D8B; border-left: solid 35px transparent; border-right: solid 35px transparent; } li { margin-bottom: 10pt; } .tinytext { font-size: smaller; color: #CFD8DC; } @media (max-width: 768px) { .site-header { display: none; } .navigation-clone { -webkit-transform: translateY(0) !important; -ms-transform: translateY(0) !important; transform: translateY(0) !important; z-index: 500 !important; } body { padding-top: 0; /* change to height of menu */ } } div #my-text { max-width: 960px; position: relative; margin-left: auto; margin-right: auto; padding: 20px; text-shadow: 1px 1px #607d8b; } /* Accordion Styles */ .accordion { border-bottom: 1px solid #dbdbdb; margin-bottom: 20px; } .accordion-title { border-top: 1px solid #dbdbdb; margin: 0; padding: 20px 0; cursor: pointer; } .accordion-title:hover { } .accordion-title:first-child { border: none; } .accordion-title.open { cursor: default; } .accordion-content { padding-bottom: 20px; }
February 26, 2017 at 11:09 pm #284392Tom
Lead DeveloperLead DeveloperHave you tried using the mobile header option?: https://docs.generatepress.com/article/mobile-header/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 28, 2017 at 6:15 pm #285402Martin
Thanks that works! The only remaining issue is that the menu and logo aren’t lined up? in mobile view. It’s like the logo has too much top padding, but I’m not sure where to adjust that. Any idea what I can do?
PS: Congrats on the little one by the way! (I’m assuming that’s your child in the photo.)
February 28, 2017 at 6:25 pm #285405Leo
StaffCustomer SupportTry this CSS:
@media (max-width: 768px) { .mobile-header-navigation .mobile-header-logo { padding-top: 0; } .mobile-header-logo .mobile-header-navigation .menu-toggle, .mobile-header-logo .mobile-header-navigation .mobile-bar-items { padding-top: 10px; } }
Let me know.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/February 28, 2017 at 7:22 pm #285414Martin
That was it. Thanks!
February 28, 2017 at 7:23 pm #285415Leo
StaffCustomer SupportGlad we could help 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.