• Hello,
    On my website: I am trying to alter the sticky header so that it appears static (i.e. so that the header height remains the same the navbar items and logo don’t jump around when the user scrolls down). I have used the snippets in this forum, but it seems to keep happening…. what do I need to do?

    ==========================================
    CUSTOM.CSS
    ==========================================
    .tc-solid-color-on-scroll.sticky-enabled .tc-header {
    background-color: #007db7;
    border-bottom: 1px solid red;
    }

    header.tc-header {
    min-height: 35px;
    background: #007db7;
    border-bottom: 1px solid red;
    }

    /* Adjust Menu colors – Normal */
    .navbar .nav > li > a, .navbar .nav > li > a:first-letter {
    color: white;
    text-shadow: none;
    font-weight: bold
    font-size: 14px
    }
    /* Adjust Menu colors – Hover */
    .navbar .nav > li > a:hover, .navbar .nav > li > a:hover:first-letter {
    color: orange;
    text-shadow: none;
    font-weight: bold
    font-size: 14px
    }
    /* Adjust Menu colors – Active */
    .navbar .nav > li > a:active, .navbar .nav > li > a:active:first-letter,
    .navbar .nav > li.current-menu-item > a,
    .navbar .nav > li.current-menu-ancestor > a,
    .navbar .nav > li.current-menu-item > a:first-letter,
    .navbar .nav > li.current-menu-ancestor > a:first-letter {
    color: orange;
    text-shadow: none;
    font-weight: bold
    }

    .nav-collapse .nav > li > a,
    .nav-collapse .nav > li > a,
    .nav-collapse .dropdown-menu a,
    .nav-collapse .dropdown-menu a {
    background-color: #007db7; /* Adjust Background Color Level 2 */
    }

    .sticky-enabled .navbar .nav > li > a {
    font-size: 15px;
    }
    .pull-menu-left .nav-collapse {
    float: left;
    }

    .navbar .navbar-inner {
    border: 0 none;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.25);
    margin: 10px 0px 0px;
    padding-left: 0px;
    z-index: 200;
    }

    .sticky-enabled .navbar .navbar-inner {
    margin: px px px;
    min-height: 35px;
    }

    body, #main-wrapper .colophon {
    background-color: white;
    }
    body {
    color: #000000; /* Default Text Color */
    padding-bottom: 0px;
    }

    ==========================================
    CHILD THEME: CUSTOM.CSS
    ==========================================
    /*
    Theme Name: SidPersonalizations
    Version: 1.0
    Description: A child theme of Customizr
    Template: customizr
    Author: Administrator
    */
    /* Your awesome customization starts here */

    .page .entry-title { display: none; }
    .btn-navbar {
    width: 100%;
    height: 30px;
    vertical-align: top;
    }

    .btn-navbar:after {
    content: “Click here for menu”;
    float: right;
    margin: -16px 0 0 0;
    }

Viewing 1 replies (of 1 total)
  • Thread Starter siddkhar

    (@siddkhar)

    Also, when I use these snippets, the logo magically disappears on smartphones and tablets….

Viewing 1 replies (of 1 total)
  • The topic ‘Cannot make the sticky header *really* static’ is closed to new replies.