Menu pushing content down

HTML & CSS
1

I am trying to figure out, what is wrong with my html. As my container div wraps around the dropdown menu, when its opened. Pushing the website content downwards. The only glitch is, i might be using something wrong as i ported in from bootstrap, my code is here and what i want something is here.

2 
.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px; /** here **/
    border: 1px solid transparent;
}

Override it in your custom stylesheet:

.navbar {
    margin-bottom: 0;
}
3

@mawburn It didn’t help. didn’t do anything. I see it now on page of bootstrap example, but .navbar isn’t reflecting, anything expect display:none on my css.strange.

4

It has to come after your bootstrap css and if it still doesn’t work, just use margin: 0 !important;

5

yes, i did. but menu opened still pushes content down. whereas i just want header static like this

6

I was looking at the wrong thing thing. heh I didn’t realize that was a boostrap.com link. Sorry. Your codepen is broken. PHP doesn’t work there.

Is this what you’re looking for?

7

yes. here is the link again to codepen . If you see it. it pushes the element with border down, when it opens up.

8

Hi,

If you are talking about the sub menus then you need to remove them from the flow with absolute positioning so that they don’t take part in the flow.

e.g.

.dropdown li{position:relative;}
ul.sub-menu ul { position:absolute;left:0;top:100%}
2 Likes
9

yep. it helped. Gotta study more about this.
Just a question, how can i replace text of website menu with a icon like SP have, and open a menu when it’s clicked?

10

That is a completely different topic (different mechanism). I recommend that you start a new thread for that question.

1 Like
11

@PaulOB it works fine but, the content falls behind. when navbar on this page is margin-bottom:20 and i have it but my doesn’t and content falls behind the navbar

12

Can you post a link to your code?

13

If you are talking about the fact that the fixed header covers content on the page then yes that’s what a fixed header does. You need to add some padding-top to the body to match the height of the fixed header as the bootstrap css does.

navbar-fixed-top.css

body {
  padding-top: 70px;
}
14

Can you explain me, why and where should this be applied. My code is fine but i wanted to know why didn’t we user relative on the header that get pushed down, instead of li?
A simple example would help.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.