Home>Support>masthead transparent
  1. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Mai Box

    Please add the following to your custom CSS

    #masthead {
    background-color: transparent;
}

body {
    background: url(http://toet.sierink-wp.nl/wp-content/uploads/2015/05/achtergrond-13.png) no-repeat top center fixed;
    background-size: cover;
}

    Navigate to Appearance->Customize->Theme Settings->Page and clear all settings for the page background

    Let us know how you get on

    Magus

  2. 9 years, 4 months ago mail box

    That worked for the masthead, but now the body is ‘white’.

  3. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Mail Box

    This is because you have also removed the option from your custom CSS please add the following

    #main {
  background-color: transparent;
}

    thanks

    Magus

  4. 9 years, 4 months ago mail box

    Ah, of course, thank you Magus.

    2 more items:
    I noticed that when i decrease the size of the screen, to see the responsive behavior, the menu has no padding on the left like the logo and main site area.
    I tried different solutions with padding or margin but can’t get it looking good. How would i do that.

    Second, when decreasing the screen size, the logo stays left but at a certain screenwidth the logo jumps to centered, can i keep it left always?

    Regards

  5. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Mail Box

    Please try the following in Custom CSS.

    For the logo

    @media all and (max-width:680px) {
body.responsive #masthead .hgroup {
    text-align: left !important;
}
}

    Try this one for the menu, we may need to tweak it a bit

    @media all and (min-width:680px) and (max-width: 1115px) {
.main-navigation {
    margin-left: 10px;
}
}

    Magus

  6. 9 years, 4 months ago mail box

    The logo is perfect now.
    The menu has 2 jumps to the left. I can remove the second jump to set the min-width to 500 (600 will not do it).

    I have set the figures to your suggestion at the moment, so maybe you can have a look yourself.

  7. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Mail Box

    Please change the last css to this

    @media all and (min-width:480px) and (max-width: 1133px) {
.main-navigation {
    margin-left: 1px;
}
}

    and add the following

    .support-text {
  display: none !important;
}

    Magus

  8. 9 years, 4 months ago mail box

    there is still a small sliding of the menu

  9. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Mail Box

    Please change the existing @media query to this

    @media all and (max-width:480px){
.main-navigation {
    margin-left: -35px !important;
}
}

    and add the following

    .main-navigation {
  margin-left: 0px ;
  margin-right: 0px;  
}

    Magus

  10. 9 years, 4 months ago mail box

    Magus, that’s the solution, thanks a lot.

    Only chrome on android seems not to adhere to the :cover css. Firefox works fine. So i guess it is not a theme issue.

  11. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Mail Box

    To fix the issue with Android please try adding the following

    html{
 height:100%;
 min-height:100%;
 }
body{
 min-height:100%;
 }

    this should not affect anything else

    Magus

  12. 9 years, 4 months ago mail box

    Just found it by google: the
    body {
    min-height:100%;
    }
    is not needed

    Thanks again for the support

  13. 9 years, 4 months ago Magus
    Hi, I Work Here

    Hi Mail Box

    You are welcome. If you need any more help just let us know

    Magus

  14. 9 years, 4 months ago mail box

    For future reference and other readers:

    I solved the sliding of the menu by changing the menu width from
    width: 400px to
    max-width: 400px

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