CODEWITHSUNDEEP
javascriptcss
Oterox
Oterox

Reputation: 658

css fixed menu overlaps the content

I have a top menu which must be always visible so i've used position:fixed. It works and the menu is always on top of the window. The problem comes with the content, the next div with a big image gets cut by the menu:

#header {
   position: fixed;
   top: 0;
}

You can see the menu in this link:

http://212.48.86.94/~admin/el-cuartel-gana-el-tercer-premio-mejor-agencia-independiente-en-los-premios-control-2014/

I've tried modifying positions, overflows and everything in firebug with no luck.

Also the wp theme i'm modifying does some javascript calculations for the height and uses an on scroll event.

I'm not sure how to fix it.

Upvotes: 1

Views: 3326

Answers (2)

Ian Hazzard
Ian Hazzard

Reputation: 7771

Just add margin-top: 100px or whatever value your header is to your CSS. That will make sure your content doesn't get covered up at the top of the page. You could try something like this:

#nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: blue;
  color: white;
}
.content {
  margin-top: 100px;
  }
<div id="nav">Welcome</div>
<div class="content">bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>bla
  <br>

I hope this helps. Let me know in the comments below if you need additional help.

Upvotes: 0

John Ruddell
John Ruddell

Reputation: 25842

to your hero wrapper just add a margin..

#hero-wrapper{
    margin-top: 68px;
}

this will offset the width of your fixed header

a few other notes...

line 2549 has a console.log() you should remove that.

console.log('dentro1');

line 2551 of your main.js throws an error when scrolling

$categoryHash = document.URL.split('?')[1].replace( /^filter=/, '' );

Uncaught TypeError: Cannot read property 'replace' of undefined

Upvotes: 1

Related Questions