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.

Replies

14
  1. Magus Staff 10 years, 10 months ago

    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. mail box 10 years, 10 months ago

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

  3. Magus Staff 10 years, 10 months ago

    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. mail box 10 years, 10 months ago

    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. Magus Staff 10 years, 10 months ago

    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. mail box 10 years, 10 months ago

    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. Magus Staff 10 years, 10 months ago

    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. mail box 10 years, 10 months ago

    there is still a small sliding of the menu

  9. Magus Staff 10 years, 10 months ago

    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. mail box 10 years, 10 months ago

    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. Magus Staff 10 years, 10 months ago

    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. mail box 10 years, 10 months ago

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

    Thanks again for the support

  13. Magus Staff 10 years, 10 months ago

    Hi Mail Box

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

    Magus

  14. mail box 10 years, 10 months ago

    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.

Have a different question or issue?

Start New Thread