We’ve just made our site live and notice 2 minor glitches that we need to fix.
1. When you access our AutoLion page, its loads really small and then pops to full screen. The other pages I’ve checked are fine but maybe because this page has a banner it is causing it to do this? How can we make the page load at its actual size?
2. When accessing the main menu bar, when I mouse over a main heading, it is fine. But, when I scroll down to choose an item from the drop down menu, the drop down menu flashes on all pages. How can we make it so it does not flash?
Thanks!
Hi Rashoemaker
1. The rows on this page: http://ecpowergroup.com/autolion-2/ are set to Full Width Stretched. You can change the row stretch by editing each row in Page Builder, clicking the Layout tab and adjusting the Row Layout drop down menu.
2. The flash is caused by the negative top margin that’s been added to the #main container in Custom CSS.
If you add your first image via Meta Slider you can do away with the top margin in #main as the slider will sit above the #main div.
Alternatively. Remove the #main negative margin-top and add the following in its place:
.layout-full .panel-row-style:first-of-type { padding-top: 0; } #main { padding-top: 0 }Hi Andrew-
1. We need the rows to be Full Width Stretched as they need to go across the whole page. When the page first loads, it is very small and then, after maybe 2 seconds, it goes to full screen, which is the way we want it. I’m wondering if there is a way to make it load at the full screen size instead of having our users see it load small and then stretch out? Our homepage is set up the same way but it loads correctly at the full width size.
2. I tried both suggestions and they do eliminate the flash but our banner is sitting low on the page. Is there a way to eliminate some of the header space without bringing the flash back? Ultimately, we want the top of the banner as close to the bottom of the main menu as possible. I currently have the banner as a Meta Slider.
Thanks!
1. Unfortunately not much we can do there. On a fast connection you shouldn’t see this. Page Builder is calculating the screen width to add negative margins in order to create the 100% width rows that sit outside of the regular container.
2. Change this rule as follows:
.layout-full .panel-row-style:first-of-type { padding-top: 0 !important; }There is padding on your logo and menu items, adjust as required:
header#masthead.masthead-logo-in-menu .logo { padding: 12px 0; } .main-navigation ul li a { padding-top: 40px; padding-bottom: 40px; }