CODEWITHSUNDEEP
c#cssasp.nettwitter-bootstrapvisual-studio
Mr.AwfulAtProgramming
Mr.AwfulAtProgramming

Reputation: 73

fixed top navbar covering buttons

I'm sure this is a very basic question. I first had a default navbar with 2 buttons directly below it. I changed the navbar to a fixed top navbar and now the buttons are behind it. How do I specify the breaks for the buttons, or if there is a better way to specify the location of the buttons without using breaks (which I am sure there is), what is it?

Upvotes: 0

Views: 584

Answers (3)

TJR
TJR

Reputation: 3732

You could add a spacer that sits under the navbar. If you define the height of the spacer and the navbar in the same CSS you have the added benefit of only needing to specify the height in one place. After the spacer, then everything else will be positioned as if the bottom of the navbar is the top of the page. 

.navbar{
  position:fixed;
  width: 100%;
  background:grey; 
}

.spacer, .navbar{
  height: 50px;
}
<nav class=navbar>Hey I'm the navbar</nav>
<div class=spacer>I'm hidden under the nav bar</div>
<button class=button>button 1</button>
<button class=button>button 2</button>

Upvotes: 0

nurdyguy
nurdyguy

Reputation: 2945

When you made the position fixed you took it out of the flow of the page. For the buttons I'd recommend using a top margin to space them down. You can play with the specific sizes and names but something like this. Also, add the class="topRow" to the container which holds the buttons.

.topRow{
    margin-top:25px;
}

Upvotes: 1

Moose
Moose

Reputation: 1317

The simplest solution might be to just add a relative position on the buttons and set the distance from the top to whatever the height of the fixed navbar is (plus a few extra pixels for padding).

Upvotes: 1

Related Questions