Home>Support>Navigation/menu bar overlaps image in the header area

Navigation/menu bar overlaps image in the header area

By Rutger Henseler, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hello

I’m having the following problem with the header area and navigation bar. The navigation bar is in front of the image in the header area (you should be able to see the whole car). How do I separate these elements?

Thanks a lot!

URL: http://www.teammystery.nl

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 11 months ago Rutger Henseler

    I kinda solved it by increasing the Header Padding. Is there also a way to automatically adjust it to the header image size?

  2. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hi Rutger

    Please try heading to Appearance > Customize > General and increase Header Paddding to say 120.

  3. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    You could also add your image as a logo under Appearance > Theme Settings > Logo and remove it as a masthead background. Then, add the following under Appearance > Custom CSS:

    /* Full header logo */

header#masthead {
padding: 0 !important;
}

header#masthead .hgroup {
padding: 0 !important;
}

header#masthead .hgroup .logo img {
width: 1080px;
}

.main-navigation {
margin: 0 !important;
}

body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar {
display: none !important;
}
  4. 9 years, 11 months ago Rutger Henseler

    That seems to be working. Thanks a lot!

  5. 9 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    For sure. Glad we could help.

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More