CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapaffix
givemesnacks
givemesnacks

Reputation: 336

Bootstrap Navbar (Affixed Navbar) Resizes During Scroll

I have a bootstrap-themed website in early development, and am experiencing strange behavior from the sticky navbar. After scrolling down halfway in Chrome (and when scrolling initially in Firefox), the navbar shrinks to half its width. Can anyone think of a cause for this?

You can see a demo of this behavior at http://studiomimo.com

Thanks!

Upvotes: 1

Views: 4381

Answers (2)

Alexis
Alexis

Reputation: 5075

Try this in your css in base a nav-wrapper id

html

<nav id="nav-wrapper" class="navbar-default" role="navigation" data-spy="affix" data-offset-top="60">

css

#nav-wrapper.affix {
top: 0 !important;
width: 100% !important;
}

it should fix your resize problem, regards!

Upvotes: 0

frostyterrier
frostyterrier

Reputation: 1912

It looks like you're using both affix and scrollspy. I don't think you need to use both together and that's probably what's causing the problem. You would be better off just using scrollspy.

To do that, change your body tag to this:

<body data-spy="scroll" data-target=".navbar" data-offset-top="50">

Then change your navbar div to this:

<div class="navbar navbar-inverse navbar-fixed-top">

This will stop that resizing problem while letting the scrollspy work. However, if you want your navbar to be less than full width, you're better off not using navbar-fixed-top and instead fixing the nav bar to the top yourself, doing something like:

@media (min-width: 481px) {
  .navbar {
    position: fixed;
    z-index: 1030;
    width: 80%;
    margin: 20px auto;
  }

}

Upvotes: 1

Related Questions