Return to previous page

Mobile Header Background… - by appdevtr33

This topic has 2 replies, 2 voices, and was last updated 6 years, 7 months ago ago by Rose Tyler

  • Avatar: appdevtr33
    appdevtr33
    Participant
    July 6, 2018 at 08:55

    Hi,
    I could change the hader background and paddings (top and bottom).
    I want a different mobile header background on the mobile screen. But mobile header background is
    using the picture I use for the big screen header backgorund. I couldn’t.
    In summary, what I want to do is;
    I want to use different images in the mobile hader background (480×200) and the normal header background (1902×200) and give them different paddings.
    Thanks for now.

    Please, contact administrator
    for this information.
    #196197 Copied
    1 Answer
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 6, 2018 at 10:17

    Hello,

    Header padding can be changed in Theme Options > General > Header Settings.
    To change bg image on mobile you can add this css code in Theme Options > Styling > Custom css > Custom css for mobile:

    @media (max-width: 992px) { 
header.header.main-header.header-bg-block {
    background-image: url(url of your image);
    background-size: cover;
    padding-top: 20px;
    padding-bottom: 20px;
}
}

    Also, you can disable “Header overlap” for Home page if this is not required http://prntscr.com/k382k8

    Regards

    #196213 Copied
  • Viewing 2 results - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.Log in/Sign up

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Architecture Studio – WordPress WooCommerce Theme
lazy-placeholder
Minimal Fashion Store – WordPress WooCommerce Theme
lazy-placeholder
Animals Store – WordPress WooCommerce Theme
lazy-placeholder
Online Courses – WordPress WooCommerce Theme
lazy-placeholder
Gaming – WooCommerce Theme
lazy-placeholder
Marseille04 – WordPress WooCommerce Theme
lazy-placeholder
Designers – WordPress Theme
lazy-placeholder
Ecotransport Store – WordPress WooCommerce Theme
lazy-placeholder
Electron Store 01 – WordPress WooCommerce Theme
lazy-placeholder
Poster – WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.