Support » Theme: Sydney » stick menu transition and add margin on Fullscreen slider

  • Resolved otc0101

    (@otc0101)


    Hi,

    I wish to have a smooth transition during the changing of header to sticky header when scrolling. I have the my site-header black colour same as the sticky menu, when start scrolling the website, you will notice a slight “jerk” during the transition. Any advice to make the transition smoother?

    Next is about the fullscreen header slider margin, tested with css using
    margin: 10px 10px 10px 10px but only top and left have margin, there is no margin on the right side. Any workaround on this?

    my url is http://www.lorakitchen.com.my

    Thank you.

Viewing 11 replies - 1 through 11 (of 11 total)
  • Hello there,

    It looks like your site’s menu bar has been modified. Do you still need an assistance with it?

    > margin: 10px 10px 10px 10px

    Please share the complete CSS code, so I know the selector you use.

    Regards,
    Kharis

    Thanks for the quick reply,

    I forgot what I done. Now the menu seems ok for me. I recalled I had changed one of the site-header position become fixed.

    I still need your kind help on setting margin for fullscreen header-slider.wish to have spacing on top, right and left.

    Hello there,

    Try this code:

    
    .header-slider {
      width: calc(100% - 40px) !important;
      width: -moz-calc(100% - 40px) !important;
      width: -webkit-calc(100% - 40px) !important;
      margin-left: auto;
      margin-right: auto;
    }
    
    @media only screen and (max-width:768px) {
      
      .header-slider {
        width: calc(100% - 20px) !important;
        width: -moz-calc(100% - 20px) !important;
        width: -webkit-calc(100% - 20px) !important;    
      }
      
    }
    

    Regards,
    Kharis

    Hi Kharis,

    Thanks for the code.
    header-slider is managed to have margin on left and right. but when i change your coding from “width” to “height”, the heder-slider went missing. Mind to teach me how to set margin for top margin? to have gap between menu and header slider.

    Besides that, when I set the width margin, the text in header-slider will be incomplete and out of center.

    Kindly advise.
    Thank you.

    otc0101

    (@otc0101)

    Hi Kharis ,

    After I used your code, the slider text is out of center alignment and some of the words are not showing. Anyway to make the slider text back to center? Besides that, I need advise to add margin on top of header too.

    Thank you.

    Hello there,

    To manage the text slider visibility, use this code:

    
    .slide-inner {
        top: 30%;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    

    You would do adjustment necessarily. For the use of CSS translateY, see this article.

    To add top margin to the slider, use this code:

    
    .header-slider {
       margin-top: 100px;
    }
    

    Regards,
    Kharis

    otc0101

    (@otc0101)

    Dear Kharis,

    Thank you for your help.

    otc0101

    (@otc0101)

    Hi Kharis,

    The margin can be adjusted by applying your code. Thanks.
    But I cant adjust the text and button in the slider to be center in the slider. (both laptop and mobile).
    here is the url: lorakitchen.com.my
    Need your advise please.
    Thank you.

    Hello there,

    Try to use the following CSS code:

    
    .slide-inner {
      min-height: auto;
    }
    
    @media only screen and (min-width:1025px) {
      
      .slide-inner {
        top: calc(50% + 35px);
        top: -moz-calc(50% + 35px);
        top: -webkit-calc(50% + 35px);
      }
      
    }
    

    instead of:

    
    .slide-inner {
        top: 30%;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }
    

    Regards,
    Kharis

    otc0101

    (@otc0101)

    Hi Kharis,

    I used
    .slide-inner {
    width: calc(100%-160px);
    }

    to adjust the position of text in header.

    Thank you for your advice.

    You’re welcome and best wishes!

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.