On my homepage at www.tudorcoaching.com, as well as a few other pages on the site, I have the hero image (full width) at the top using page builder. When I first inserted it, there was a white line in between the blue menu and the top of the hero image. To resolve this, I did some researching and found what appeared to be a similar problem, so I used the solution by putting into the CSS Styles of the hero image row:
#main {margin-top: -60px;}
Visually, that appeared to fix it and take away the white space, but now the menu is hard to navigate on my desktop, and it seems like something is covering the bottom portion of the menu as the mouse scrolls over. I have this same issue on a few different pages. How can I get that fixed, get rid of the white space, and allow for full functionality of my menu?
Thank you very much for your support and guidance. I always appreciate your expertise.
Hi Kevin
So the first thing I’d suggest is removing all the row styling you’ve applied to the Hero Image widget row. Then navigate to AppearanceCustom CSS and add the following:
.home #main { padding-top: 0 !important; }This will remove the top padding on the home page.
Hi Greg,
I did that and still get a thin white line (about half the size as before) at the top between the menu and the hero image. I have this same set-up with the hero image full width at the top so this will need fixing on about 5 different pages.
Hi Kevin
Add the following below the rule Greg sent:
.home.layout-full .panel-grid:first-of-type .panel-row-style.panel-row-style-full-width { padding-top: 0; }Please, send links to the other pages you’d like to do this on. Thanks.
Excellent. That works perfectly on the homepage.
The links to the other pages are:
http://www.tudorcoaching.com/what-we-do/
http://www.tudorcoaching.com/stocks/
http://www.tudorcoaching.com/financial-coaching/
http://www.tudorcoaching.com/udemy/
On those ones, I still have my old fix which blocks the bottom half of the navigation menu. Thanks for your help.
Sure :)
Try replacing our previous CSS with:
/* Home */ .home.layout-full .panel-grid:first-of-type .panel-row-style.panel-row-style-full-width { padding-top: 0; } /* What We Do */ .page-id-992.layout-full .panel-grid:first-of-type .panel-row-style.panel-row-style-full-width { padding-top: 0; } /* Financial Coaching */ .page-id-1111.layout-full .panel-grid:first-of-type .panel-row-style.panel-row-style-full-width { padding-top: 0; } /* Udemy */ .page-id-1126.layout-full .panel-grid:first-of-type .panel-row-style.panel-row-style-full-width { padding-top: 0; } /* Stocks */ .page-id-1052.layout-full .panel-grid:first-of-type .panel-row-style.panel-row-style-full-width { padding-top: 0; }Great. That fixed it, along with adding the first CSS Greg used, replacing home with the page ID. Thanks a lot for your help.
That’s great news :) Thanks for keeping us updated. All the best.