navbar-inner box on sticky-enabled

  • Resolved Parwaiz Khan

    (@parwaiz-khan)


    9 years, 2 months ago

    Hello friends,

    I have applied the following snippet to keep the navbar box remain sticky upon scroll. But, the menu fonts reverts to ‘inherit’ and the box ‘twitches’, despite the code for the fonts (see below).

    Any ideas to fix the fonts and the twitch?

    The subject website is : https://nonmsm.com/
    ___________________________
    /* background on sticky enabled */
    .sticky-enabled .navbar-inner { background-color : #fff !important; }

    /* navbar-inner box on sticky-enabled */
    .sticky-enabled .navbar .navbar-inner {
    margin: 5px 5px 11px;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
    -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    background-color: #fafafa;
    background-image: -moz-linear-gradient(top,#fff,#f2f2f2);
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#f2f2f2));
    background-image: -webkit-linear-gradient(top,#fff,#f2f2f2);
    background-image: -o-linear-gradient(top,#fff,#f2f2f2);
    background-image: linear-gradient(to bottom,#fff,#f2f2f2);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffffff’, endColorstr=’#fff2f2f2′, GradientType=0);
    }
    .sticky-enabled .navbar .nav > li > a {
    font-weight: bold !important;
    color: #104E8B !important;
    }
    ________________

    Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)

  • The Twitch:

    .sticky-enabled .tc-header .navbar .navbar-inner {
    margin: 12px 5px 5px;
}

    Font:

    .sticky-enabled .tc-header .navbar .nav > li > a {
    font-size: 16px;
}

    Thread Starter Parwaiz Khan

    (@parwaiz-khan)

    Hello Dave,
    Both solutions worked perfectly – no twitch and no font misbehavior! Thank you very much.
    Now, while we are on it, I am trying to reduce the size of the ‘navar box’ (the idea is to give more blue bg color to the header area). Used this code:
    row-fluid .span9 {
    width: 70%;
    float: right;
    }

    Didn’t work. Obviously, need to increase the ‘span 3’ proportionally or some other tweak . Any ideas?

    Try:

    .navbar-inner {
    width: 71%;
}

    Thread Starter Parwaiz Khan

    (@parwaiz-khan)

    Thanks Dave. Worked perfect. I will remember you (and a few others) when I win the lottery (grin).
    Just modified it a bit for a better fit:
    .navbar-inner {
    width: 88%;
    float: right;
    }
    A minor issue, though: upon this ‘shrinkage’, the line “Math – Physics – ACT Prep” (put via widget) in front of the social icons breaks away in smaller viewports/mobile phones.

    You can check it at https://nonmsm.com/ (it is a dummy domain for testing – the actual site is https://mathonia.com/ – my handwork in pure html and css).

    Thanks again.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘navbar-inner box on sticky-enabled’ is closed to new replies.