1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Navbar - fixed height

gabbi free asked 9 years ago

Hi, I would have a simple question: how can I have a navbar of fixed height? I would like to inhibit the behavior that makes the navbar thin once the page get scrolled down. Any help? Thank you!

dazer pro answered 9 years ago

I just realized something more: Since the class is added by some Javascript-code attached to the scroll event, you can also remove the event handler: $(window).off('scroll') This prevents adding the CSS class comlpletely and may push the client performance a bit. Not sure about any side-effects though.

Michal Szymanski staff answered 9 years ago

I forgot to mention with this code you have to remove from your navbar class "navbar-fixed-top" Dazer's code will work fine too, but I think it will be cleaner if your html markup looks like this: 
<nav class="navbar">
....
 </nav>
And then CSS 
 .navbar {
        position: fixed;
        width: 100%;
 }

gabbi free answered 9 years ago

This seems to do the trick. Thank you!

dazer pro answered 9 years ago

Hi, the animation is done by adding the .top-nav-collapse-class to the navbar. The original padding is removed then. This worked for me: override the padding and set it to the original padding: 
.top-nav-collapse {
    padding: 10px 0;
}

gabbi free answered 9 years ago

Hi Michal, thank you very much for the kind help. Unfortunately it doesn't seem to work. Here's an example of what I'm building: http://gabbi.altervista.org/test/ I would like that the top blue navbar doesn't change thickness on page scroll.

Michal Szymanski staff answered 9 years ago

You have to set a navbar postion to "fixed" and width to "100%" via CSS. 
 .navbar {
        position: fixed;
        width: 100%;
 }

gabbi free answered 9 years ago

Hi, thanks for reply. Yes, I've checked the navbar section. I would like to have a navbar fixed at the top of the page that does not become thinner once page scrolls. Hope I have explained myself properly.

Michal Szymanski staff answered 9 years ago

Hi Gabbi, so you want to have a Navbar with a fixed height or the Navbar with the height which get smaller after scrolling? Have you looked at our Navbars Section?
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
navbar
About author
gabbi
10Support score
1Questions 3Answers 0Snippets