Tagged: 

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • November 22, 2017 at 10:42 am #880148
    innobitag

    Hello,

    I want to have a sticky header + sticky breadcrumb bar on all screen sizes.
    So far I’ve tried several codes from the forum but the problem is that it always overlays the visibility of the top slider.

    This is what i’ve used:
    /**MOBIL STICKY HEADER**/
    .html_header_top.html_header_sticky #header {
    position: fixed !important;
    }
    @media only screen and (max-width: 767px) {
    .responsive #main {
    padding-top: 0px !important;
    }
    }

    /** BREADCRUMB STICKY **/
    .title_container {
    position: fixed;
    width: 100%;
    z-index: 99;
    }
    @media only screen and (max-width: 767px){
    .responsive #top #main .container_wrap:first-child {
    border-top: none;
    margin-top: 80px;
    }
    }

    Can you help me with that – adjusting the code or posting a clean new one?
    It’s important that the top sliders are 100% visible and not overlayed by the sticky header + breadcrumb, mobile & desktop!

    Thanks in advance,
    Timo

    November 24, 2017 at 11:50 am #881122
    Victoria

    Hey Timo,

    You can use the code above and add this

    
#main {
  padding-top: 90px !important;
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    November 24, 2017 at 12:12 pm #881136
    innobitag

    Hi Victoria,
    thanks for your advice.
    This is how i added the code – unfortunately it didn’t fix the problem. The sticky header and sticky breadcrumg are still overlaying title and slider area on top of the page…

    An other suggestions?
    Thanks a lot for your help!
    Best, Timo

    Home-3

    /**MOBIL STICKY HEADER**/
    .html_header_top.html_header_sticky #header {
    position: fixed !important;
    }
    @media only screen and (max-width: 767px) {
    .responsive #main {
    padding-top: 0px !important;
    }
    }

    /** BREADCRUMB STICKY **/
    .title_container {
    position: fixed;
    width: 100%;
    z-index: 99;
    }
    @media only screen and (max-width: 767px){
    .responsive #top #main .container_wrap:first-child {
    border-top: none;
    margin-top: 80px;
    }
    }
    #main {
    padding-top: 90px !important;
    }

    November 25, 2017 at 12:56 am #881449
    Jordan Shannon

    Hi,
    Do you have any other custom css that may be formatted wrong? If so it could be preventing the suggested css from running.

    Best regards,
    Jordan Shannon

    November 29, 2017 at 10:25 am #882972
    innobitag

    Hi Jordan,

    there is a bunch of other css code in there but nothing really adressing the header…so i dont know exactly where the problem is.

    The only thing i’ve added in the header area is this code:
    /*** HEAD ***/
    .logo{width:190px;}
    .logo a img {margin-top:15px;}

    /*** LOGO ADJUST ***/
    @media only screen and (max-width: 1070px) {
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
    display: block !important;
    }
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
    }
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special a { border: none !important; }
    }

    /*** LOGO ADJUST SUPPORT ***/
    @media only screen and (max-width:635px) and (min-width: 480px) {
    .logo img {
    max-width: 30%!important;
    }}

    How do i proceed the best way? Because your solution isnt working so far.
    I really need to get the header und breadcrumb sticky, both mobile and desktop, without overlaying any top page content.

    Thanks a lot for your help
    Timo

    November 30, 2017 at 12:09 am #883234
    Jordan Shannon

    Hi,

    Please provide admin info so we can log in and look into this issue further.

    Best regards,
    Jordan Shannon

    November 30, 2017 at 12:02 pm #883338
    innobitag

    Hi Jordan,

    i put the login credentials in the private content box above.
    Thanks for your help in advance.

    Best regards
    Timo

    November 30, 2017 at 11:18 pm #883599
    Jordan Shannon

    Hi,
    Okay, if I could suggest to remove/comment out your custom css and leave only the concerning the header and what Victoria added on. Try this and see if it runs. Also be sure that you’re hard clearing your cache each time.

    Best regards,
    Jordan Shannon

    February 12, 2018 at 4:53 pm #911176
    innobitag

    Hi Jordan,

    i have tried Victorias Code from above and removed all of ours before.
    Unfortunately i am still confronted with the same issue: As soon as header and breacrumb bar both get sticky, they are overlapping the Easy Slider at top of every page. As desktop view the easy slider is still partially visible. On mobile devices, the slider is entirely overlapped by menu bar und breadcrumb bar.

    Do you have any suggestion how to fix this problem?
    Really urgent!

    Thanks again,
    Timo

    February 12, 2018 at 5:04 pm #911183
    Jordan Shannon

    Hi,

    Perhaps if you can add a screenshot so we can all have a clearer idea of what you are seeing on your end it can help speed things up a bit. Apologies for the delay.

    Best regards,
    Jordan Shannon

    February 12, 2018 at 9:01 pm #911349
    innobitag

    Hi Jordan,
    i have just put in the code for sticky header and sticky breadcrumb, both mobile and desktop, referring to the code posted on 24th of November.

    This is what you get:
    desktop: Desktop
    mobile_1: Mobile_1
    mobile_2: Mobile_2

    Problem:
    The code effects an overlapping of the easy slider by the sticky breadcrumb/header code. Without code there is a clean 100% visible slider but therefor no sticky breadcrumb:

    Do the screenshots help you for now?

    Thanks a lot for your help.
    Best, Timo

    February 12, 2018 at 9:04 pm #911350
    innobitag

    Screenshot Desktop: https://innobit.ch/wp-content/uploads/2018/02/Breadcrumb_Desktop.png
    Screenshot Mobile 1: https://innobit.ch//wp-content/uploads/2018/02/Breadcrumb_Mobile-2.jpg
    Screenshot Mobile 2: https://innobit.ch/wp-content/uploads/2018/02/Breadcrumb_Mobile-1.jpg

    February 14, 2018 at 1:27 am #912007
    Ismael

    Hi,

    Thank you for the update.

    Please turn on the custom css class field, then add a unique css class name to the slider (ex. custom-slider). You can then apply a margin above the slider using the following css code.

    .custom-slider {
    margin-top: 50px;
}

    To learn more about the custom css field, please refer to the following documentation.

    // https://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Ismael

    August 14, 2023 at 11:32 am #1416234
    klick.design

    Good day,

    I used this code, but in the mobile view the header no longer reduces and the breadcrumbs are no longer pinned to the top but have a gap when scrolling. Is there also a solution for this?
    Thank you, Matthias

    August 15, 2023 at 7:10 am #1416319
    Ismael

    Hi,

    Instead of increasing the margin above the slider, try to adjust its top padding in order to create more space between the slider and the breadcrumb container.

    @media only screen and (max-width: 989px) {
    #content-top {
        padding-top: 100px;
    }
}

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect.

    If you need further assistance, please feel free to open a different thread. We will close this one for now.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Sticky Header & Sticky Breadcrumb – Mobile & Desktop’ is closed to new replies.