Home Forums Porto Template Sticky header (Shrink)

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #10031164
    wolkanwolkan
    Participant

    Hi,
    I’m using sticky header on top of page but content stays behind header not below header. Another thing is header not fit phone screen width on mobile.

    code on: http://444car.com/example.html

    Sincerely
    Birhan Taşkıran


    #10031171
    Support2
    Keymaster

    Hello,

    As you are using a header semi transparent you need increase the space on top of content. Try adding the class pt-4 like the code below:

    Regarding the mobile issue the reason is some of your custom css code. Please try changing the code in (css/custom.css) to this:

    @media (max-width: 991px) {
        body {
            /*padding-top: 65px !important;*/
        }
    
        body #header {
            border-bottom: 1px solid #e9e9e9;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
            filter: none;
            position: fixed;
            /*top: -57px;*/
            width: 100%;
            z-index: 1001;
            /*top: -57px !important;*/
        }
    
        body #header .logo img {
            height: 40px !important;
            width: 82px !important;
            top: 28px !important;
            margin-top: -6px !important;
        }
    
        body .btn-responsive-nav {
            top: 60px !important;
        }
    }

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031182
    wolkanwolkan
    Participant

    Hi,
    using pt-4 solved first issue but changing custom.css doesn’t work on mobile.

    I used the full video background page example. So header is semi-transparent.
    But overall height of header is too much for other pages, how can I set to stretched height all the time?

    for mobile issue
    You can look http://444car.com I’m using same header block (<html> to <body>) on all pages.


    #10031189
    Support2
    Keymaster

    Hello,

    To set stretched height all the time change the option stickyHeaderContainerHeight to:

    <header id="header" class="header-transparent header-transparent-dark-bottom-border header-transparent-dark-bottom-border-1 header-effect-shrink" data-plugin-options="{'stickyEnabled': true, 'stickyEffect': 'shrink', 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': true, 'stickyStartAt': 30, 'stickyHeaderContainerHeight': 101}">

    Also we say that’s missing the mobile button for menu. For add you need this code in your header navigation:

    ..
    ...
    ...
    <div class="header-nav-main header-nav-main-mobile-dark header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-effect-2 header-nav-main-sub-effect-1">
        ......
        .......
    </div>
    <button class="btn header-btn-collapse-nav" data-toggle="collapse" data-target=".header-nav-main nav">
    	<i class="fas fa-bars"></i>
    </button>
    ...
    ...
    .

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031198
    wolkanwolkan
    Participant

    Hi again,
    mobile button is cool way for menu bar and fix the problem but header height still remain.

    Changing 70px to 101px just make header look like not stretching but my problem is opposite this,
    when page load first, header renders 101px, if user scroll down, header shrinks and stays on top (70px i think) , thats okay,
    problem is when scroll back to top, header grown back to 100px not 70px. I was change 101 to 70 because I want to set height 70px always.
    On first load and when grow back. Shrinked height can be same (no shrink) or can be smaller.
    101px header occupied too much space on other pages.

    Cant find grow back size (100px) where came from (Java I suppose?) or how to set different value.

    Sincerely
    Birhan Taşkıran


    #10031200
    Support2
    Keymaster

    Hello Birhan,

    Ok, please try the following:

    1) Add in (css/custom.css):

    #header.header-effect-shrink .header-container {
    	min-height: 70px;
    }

    * This will starts the page with height 70px and when you scroll down will stretch to 101px. When scroll back to top will back to 70px.

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


    #10031202
    wolkanwolkan
    Participant

    Hi,
    problem solved!.

    Thank you,
    Sincerely
    Birhan Taşkıran


    #10031207
    Support2
    Keymaster

    Hello Birhan,

    Great!

    If you need further assistance feel free to contact us.

    Kind Regards,

    Rodrigo.


Viewing 8 posts - 1 through 8 (of 8 total)