Home Forums Porto Template Don't know how to control height of sticky header.

This topic contains 1 reply, has 2 voices, and was last updated by  Support2 4 months, 2 weeks ago. This post has been viewed 195 times

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #10029875

    AndeeR
    Participant

    The top section of my header is having height issues. I can’t find how to set the top and bottom padding, and I can’t get it to shrink when it goes into sticky mode. Also, the logo in the center column moves to the left when it shrinks instead of staying centered.

    Thank you for your help,
    Andee

    <header id=”header” class=”header-effect-shrink” data-plugin-options=”{‘stickyEnabled’: true, ‘stickyEffect’: ‘shrink’, ‘stickyEnableOnBoxed’: true, ‘stickyEnableOnMobile’: true, ‘stickyChangeLogo’: true, ‘stickyStartAt’: 130, ‘stickyHeaderContainerHeight’: 10}”>
    <div class=”header-body border-top-0″>
    <div class=”header-container container”>
    <div class=”header-row”>
    <div class=”header-column justify-content-start w-50 order-md-1 d-none d-md-flex”>
    <div class=”header-row”>
    <ul class=”header-extra-info”>
    <li class=”m-0″>
    <div class=”feature-box feature-box-style-2 align-items-center”>
    <div class=”feature-box-icon”>
    <i class=”far fa-calendar text-7 p-relative”></i>
    </div>
    <div class=”feature-box-info”>
    <p class=”pb-0 font-weight-semibold line-height-1 text-2″>October 17-20, 2019</p>
    </div>
    </div>

    </div>
    </div>
    <div class=”header-column justify-content-start justify-content-md-center order-1 order-md-2″>
    <div class=”header-row”>
    <div class=”header-logo py-1″>

    Florida Birding & Nature Festival

    </div>
    </div>
    </div>
    <div class=”header-column justify-content-end w-50 order-2 order-md-3″>
    <div class=”header-row”>
    <ul class=”header-extra-info”>
    <li class=”m-0″>
    <div class=”feature-box reverse-allres feature-box-style-2 align-items-center”>
    <div class=”feature-box-icon”>
    <i class=”fab fa-whatsapp text-7 p-relative” style=”top: -2px;”></i>
    </div>
    <div class=”feature-box-info”>
    <p class=”pb-0 font-weight-semibold line-height-5 text-2″>TICKETS</p>
    </div>
    </div>

    </div>
    </div>
    </div>
    </div>
    <div class=”header-nav-bar header-nav-bar-top-border”>
    <div class=”header-container container”>
    <div class=”header-row”>
    <div class=”header-column”>
    <div class=”header-row justify-content-end”>
    <div class=”header-nav p-0″>
    <div class=”header-nav header-nav-links justify-content-lg-center”>
    <div class=”header-nav-main header-nav-main-square header-nav-main-dropdown-no-borders header-nav-main-dropdown-arrow header-nav-main-dropdown-center header-nav-main-dropdown-center-bottom header-nav-main-effect-3 header-nav-main-sub-effect-1″>
    <nav class=”collapse”>
    <ul class=”nav nav-pills flex-column flex-lg-row” id=”mainNav”>
    <li class=”dropdown”>

    Experts

    <li class=”dropdown dropdown-mega”>

    Schedule

    <li class=”dropdown”>

    EXPO

    <li class=”dropdown”>

    Sponsors

    <li class=”dropdown”>

    Venue

    <li class=”dropdown”>

    Students

    <li class=”dropdown”>

    Volunteer

    <li class=”dropdown”>

    About

    <li class=”dropdown”>

    Donate

    </nav>
    </div>
    <button class=”btn header-btn-collapse-nav” data-toggle=”collapse” data-target=”.header-nav-main nav”>
    <i class=”fas fa-bars”></i>
    </button>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </header>


    #10029887

    Support2
    Keymaster

    Hello Andee,

    Unfortunately the Header Effect Shrink is incompatible with header-nav-bar menus.
    For headers with header-nav-bar you should deactivate the shrink effect:

    <header id="header" data-plugin-options="{'stickyEnabled': true, 'stickyEnableOnBoxed': true, 'stickyEnableOnMobile': true, 'stickyChangeLogo': true, 'stickyStartAt': 252, 'stickySetTop': '-252px'}">

    * Probably this is the best setting for your header.

    Hope this helps.

    Let us know if you need further assistance.

    Kind Regards,

    Rodrigo.


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