This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Menu/Hero Image Issue

Resolved 7 replies customizationthemetheme-vantage
Kevin Tudor
10 years ago · Last reply by Support Assistants 10 years ago

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.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Greg Priday Staff 10 years, 2 months ago

    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.

  2. Kevin Tudor 10 years, 2 months ago

    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.

  3. Support Assistants 10 years, 2 months ago

    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.

  4. Kevin Tudor 10 years, 2 months ago

    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.

  5. Support Assistants 10 years, 2 months ago

    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;
}
  6. Kevin Tudor 10 years, 2 months ago

    Great. That fixed it, along with adding the first CSS Greg used, replacing home with the page ID. Thanks a lot for your help.

  7. Support Assistants 10 years, 2 months ago

    That’s great news :) Thanks for keeping us updated. All the best.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread