I am not certain what is causing a large margin to appear above the logo and toggle-menu in the toolbar row at narrow widths and on phones. The space is so great that the row overlays the banner position on the home page and the article titles on the article pages.
I turned sticky nav off but the problem isn't solved. I also tried turning on and off some of the code in my custom CSS and that also did not seem to effect the problem.
ssartjb Try add this to custom.css file :
@media only screen and (max-device-width: 480px){.responsive-enabled.toggle-menu #toolbar.zen-row-wrap{margin-top:0 !important;}}
Kindly ensure to clear your browser cache if changes dont reflect
Thank you Aman
What i see now is that your custom code does eliminate the gap created by the top margin so that the mobile-logo and menu are now flush with the top of the window. However the content that should appear below is also still flush with the top. On the home page the slidehshow and on the article pages the title are still hidden behind the logo. Is it possible to add a top margin to this content that will only be visible at the narrow widths? would that work?
ssartjb On the home page the slidehshow and on the article pages the title are still hidden behind the logo. Is it possible to add a top margin to this content that will only be visible at the narrow widths?
Try change this and adjust margin-top value accordingly:
@media only screen and (max-device-width: 480px){.responsive-enabled.toggle-menu #toolbar.zen-row-wrap{margin-top:0 !important;}}
to
@media only screen and (max-device-width: 480px){.responsive-enabled.toggle-menu #toolbar.zen-row-wrap{margin-top:0 !important;}#bannerwrap,#mainwrap{margin-top: 9em !important;}}
