Header alignment with smartslider

  • emanuelmeier

    (@emanuelmeier)


    1 year, 8 months ago

    Hello!

    I’ve put a smart slider 3 into my header. Also I had the quad menu in vertical style and I recognized, that the menu always disappeared on the right side in mobile.
    I set the settings in smartslider to “force full width” and It’s looking good but the allignment is still not right.

    I’ve added some CSS (in additional CSS) but It’s not bringing my slider into the middle. I’m leaving the settings like this now that you “pro’s” can have a look to my site (flyhealthy.club)

    Here is my current css:
    `.header-widget {
    float: left;
    /*max-width: 50%;*/
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
    margin-left: auto;
    margin-right: auto;
    }
    .separate-containers .widget {
    margin-bottom: 0px;
    }
    .header-widget .widget {
    padding-bottom: 0px;
    }

    I also don’t like the grey border on top and bottom in the header. Actually I’d like to have the slider and the menu under it without any borders. Then the content like it is…
    Thanks in advance!

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • fernandoazarcon2

    (@fernandoazarcon2)

    1 year, 8 months ago

    Hi @emanuelmeier,

    Try adding these CSS:

    main#main {
    margin: 0;
}

.inside-header.grid-container {
    padding: 0;
}
    Thread Starter emanuelmeier

    (@emanuelmeier)

    1 year, 8 months ago

    Wow, so cool!
    I forced full width again and the problem is solved with the menue. I could now add one “offcanvas” menu under the header and when the user scrolls down, there are the 3 bars as a vertical menu also that the menu can always be accessed. Cool!
    If you are near, come and fly Tandem with me for free! 😉
    On my mobile on top there is still approximately 10px over the slider. Can this maybe also removed?

    fernandoazarcon2

    (@fernandoazarcon2)

    1 year, 8 months ago

    You can try this:

    @media (max-height: 768px) {
    .site-header .header-widget {
        margin-top:0;
    }
}
    Thread Starter emanuelmeier

    (@emanuelmeier)

    1 year, 8 months ago

    Perfect, also this worked!
    Now I just recognized that the menu which I’ve added under the slider sometimes moves a little to the right. When I then resize the window of the browser, the menu is on the same position like when initially loaded. So on the right position.
    Is there any way with the CSS to reload e.g. the menu everytime when the user opens the same page again?

    Thanks so much!

    fernandoazarcon2

    (@fernandoazarcon2)

    1 year, 8 months ago

    Are you using a plugin for your menu? If so, it would be best to reach out to them with regards to this issue.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Header alignment with smartslider’ is closed to new replies.