Home>Support>Meta-Slider in Header don’t fit

Meta-Slider in Header don’t fit

By gerkof, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hello,

Via the Header-widget, I have added a Meta-slide to my header.
The slide’s position is too much to the right. Also the top of the slide is cut off.
Do you have a solution for this?

Kind regards, Gerko

URL: http://www.fontein-kampen.nl/subdomein

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, 10 months ago gerkof

    here a follow up of my reply..

    On mobile screens the slider is very small, with a whole white header area around it.
    My desktopscreen at home shows it also on a different way: not wide enough, but it is centered (which is good), and here the bottom (instead of the top) of the slider is cut of.

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

    Hi gerkof

    I see the challenge. The problem with doing this is that your “logo” is now not clickable which is a bit of a usability loss. Have you tried inserting this image via Appearance > Theme Settings > Logo?

  3. 9 years, 10 months ago gerkof

    Thank you! Didn’t thought about that..
    It already looks better that way. I added some code I found at the forum to eliminate the padding on sides, top and bottom.
    It looks perfect at small desktop screens en on mobile. On wide screens the slider moves to the right (it results in a white space at the left). And the slider looks stretched.

    I used the same slider as I previously used in the Homepage under my menu. There it looks great.

    The code I used for this (I changed the width to 1904px):

     

/* Full header logo */

header#masthead {
padding: 0 !important;
}

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

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

.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, 10 months ago Andrew Misplon
    Hi, I Work Here

    The following inserted under Custom CSS should work:

    /* Full header logo */

header#masthead {
padding: 0 !important;
}

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

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

body.responsive header#masthead .hgroup .support-text, body.responsive header#masthead .hgroup #header-sidebar {
display: none !important;
}

    If you remove the previous selectors for the same task.

    The logo image is over 3000px wide and over 1mb in size. It’s worth reducing that for load time.

  5. 9 years, 10 months ago Gerko

    Thank you for the tip! The load-time is indeed a bit long..

    The logo looks good this way.. It is centered now. But the problem still is that it’s not covering the whole header. There are still white spaces at the left and the right.
    Is this fixable?

    What I want to reach is a full header, so the slider with logo is visible on every page and post and I don’t have to put a slider in every new post and page to have the same style.

  6. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    You can try adding the following and then using a larger image like 1904px wide:

    body.responsive.layout-full #page-wrapper header#masthead .full-container {
    max-width: 100%;
    }

  7. 9 years, 10 months ago Gerko

    Alas, it’s not working..

    The ‘logo’ is now positioning completely at the left (and so is the menu).
    I tried a larger image, but it shows no image at 1904 px (at full width layout bound). Also in the boxed layout the image is not fully covering the header area.

    If there are no other possible solutions.. I have to think about other ways. I already tried to add a masthead background. i used this thread: Thread: How to Hide Site Title Behind Masthead Image

    But without the code in this thread, the background looks very bad responsive (on smartphone). With the code inserted: the background-image was zoomed very very much..

    I’m continuing my search, I ask at ‘Meta Slider Pro’ for support. If you have any more idea’s, they are more then welcome!!

  8. 9 years, 10 months ago Andrew Misplon
    Hi, I Work Here

    Try this.

    /* Full header logo */

body.responsive.layout-full #page-wrapper header#masthead .full-container {
max-width: 100%;
}

header#masthead {
padding: 0 !important;
}

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

header#masthead .hgroup .logo {
float: none;
text-align: center;
}

header#masthead .hgroup .logo img {
height: auto;
width: 100%;
}

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

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

    Hi Andrew,

    Thank you for that last code! It worked!
    I added another code to bring the menu-items back to the center.

    Thanks for your help!

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

    For sure, glad that helped.

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