My First Gallery Page - Plus a bonus question

1

How do I get a navbar that is fixed to the top of the screen, to push the elements down when I press the button that appears when the navbar is collapsed, like it does when I use a navbar-default?

Please keep in mind this is a work in progress since I’m still learning how to do this.

https://codepen.io/Cold_Dog/full/Vzrprd/

2

In Bootstrap:

nav class=“navbar navbar-fixed-top”

will get you, a fixed navbar.

In order to scroll down by pushing a navbar button you have to use jQuery. If it’s not what are you asking for, please clarify your question.

4

Well…if I do that, the navbar loses it’s “fixed” status, and starts moving around, so it is not what I want, I wanted it to stay fixed and the top and only to push things down when it collapsed, thanks for the suggestion, it worked anyways, but I see no difference between doing it your suggested way, or just using a simple navbar-default class. I’ll leave it as is for the moment, and thanks for taking your time in answering my question.

5

@Folrunge not really, I managed to make the button work by using jQuery and Bootstrap javascript, what I wanted to know was how to make the elements push the page down, like it does when you are using a default navbar in bootstrap, because when you set it as fixed-top it stops doing that.

6

If you want to mantain the fixed positioning and have the navbar push the content down when you open it, you could use the navbar events to achieve this.

Something like this:

$(function(){
  $('.navbar-collapse').on('show.bs.collapse', function() {
      $('body').css('padding-top', '254px');
  });
  $('.navbar-collapse').on('hide.bs.collapse', function() {
      $('body').css('padding-top', '70px');
  });  
});

To have it look smooth, you can add a transition to your body, like:

transition: padding .5s ease;

Forked your pen to make an example here.

1 Like
8

Thanks…your solution worked like a charm, but I also learned that pushing the elements down when you click on the hamburger button only looks good if you’re at the top of the page, if you are somewhere down in the middle, and you click on it, it will move the other elements down and won’t look so good. I’m not familiar with JavaScript yet, but that will give me something to experiment on a little bit when I get there.

9

Thanks for your suggestions, but I’ll go with @noyb ’ solution just because his doesn’t require the installation of any additional plugins, even thought yours seems to need less code.

Thanks anyways.

10

Yeah, thought the same. Just wanted to give an example of what you were asking. Happy to have helped anyway!

@SkyC solution doesn’t require any additional plugin. The affix plugin is included in bootstrap, so his solution would be actually better if you want the navbar to push down your page only at the top of it.

2 Likes
12

@SkyC @noyb thank you both for your answers, it’s true that Sky’s solution works better for what I wanted, but now I have two different ways of doing the same thing which I didn’t know about.

In the end I’m going to go with Sky’s solution because it accomplishes what I wanted to do, which is to just push down the contents if I’m at the top of the page, I had to change the padding a little bit for it to look better.

Now I have it like this:

body {
	padding-top: 20px;
	background: #535456;
	transition: padding .5s ease;
}

And

.affix-top {
  position: relative;
  top: -20px;
}
2 Likes