Viewing 7 replies - 1 through 7 (of 7 total)
  • Hi,
    you might want to take a look at the STICKY HEADER SETTINGS
    in Appearance -> Customize -> Header -> Design and Layout.

    Thread Starter Chandresh2

    (@chandresh2)

    I checked there earlier too, but the option there is only to enable/disable the shrinking on logo. No option to prevent the shrinking on complete header. Can you please suggest me how to do that?
    Thanks again.

    If you check all the “display” check boxes and uncheck “shrink title/logo” you have the normal sizes then for the menu items add this to your custom css:
    .sticky-enabled .navbar .nav>li>a{ font-size: inherit;}
    and to display the social block:
    .sticky-enabled .tc-header .social-block{display: block}
    What else?.. the navbar on the left, if you have it on the left:
    .sticky-enabled .nav-collapse {float: left;}

    Did this help? Let me know ??

    Thread Starter Chandresh2

    (@chandresh2)

    It went pretty well, but it is not getting the job done for me. ?? Here is my site : equonomix.com
    I added the code you give to custom CSS, but on scrolling down, fonts are still shifting a bit and the colour and size of header is also changing. I want a sticky header but its size or logos should remain unaltered during scroll. Please help me out. Also suggest me how to change the colour of header.
    Thanks a lot! ??

    Header background on sticky:

    .tc-solid-color-on-scroll.sticky-enabled .tc-header {
        background: inherit; /* will inherit the parent background*/
    }

    or

    .tc-solid-color-on-scroll.sticky-enabled .tc-header {
        background: #dd0000; /* red */
    }

    Change the normal header background:
    header.tc-header {background: #dd0000; /*red*/}
    more about colors

    I want a sticky header but its size or logos should remain unaltered during scroll.

    Logo is unaltered indeed

    To avoid the shifting upward:

    .sticky-enabled .navbar-wrapper { margin-top: 4px;}
    .navbar .navbar-inner {margin-bottom: 19px;}

    And if you want to keep also the border size:
    .sticky-enabled .tc-header { border-bottom-width: 10px;}

    play with these values.
    It’s just about css…

    hope this helps

    Thread Starter Chandresh2

    (@chandresh2)

    Immense help! It helped. ?? ??
    I know I am bothering you a lot, but during scroll, the colour of header is getting changed. Can you please suggest me CSS to keep header colour intact during scroll. The border is also shifting upwards during scroll. Is there any way to remove border completely?

    Thread Starter Chandresh2

    (@chandresh2)

    Figured a way from CSS codes you gave. Thanks a lot. Awesome support! ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to prevent header from shrinking’ is closed to new replies.