Jak zrobić, tak żby górne menu było cały czas przezroczyste

Mam taki problem mam górne menu, któ©e podczas przewijania strony jest cały czas widoczne i teraz jak jestna stronie jakiś div to ten div najeżdza na to menu i to menu jest nie widoczne a ja chcę zrobić coś takiego żeby to menu było cały czas widoczne nawet jak będzie się ztykało z divem daje kod źródłowy.

<link href="./bootstrap-3/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href=./style.css rel="stylesheet" type="text/css" >
<script src="./jquery.js"></script>
<script src="./bootstrap-3/js/bootstrap.min.js"></script>
<div id=page>

<div class=navbar>
  <div class=row>
  <div class=col-md-2>
  <img src=./logo.png>dd</img>
  </div>
  <div class=col-md-1 id=menu>
  <a href="#home" class=menu>Home</a>
  </div>
  <div class=col-md-1  id=menu>
  <a href="#news" class=menu>News</a>
  </div>
  <div class=col-md-1 id=menu>
  <a href="#contact" class=menu>Contact</a>
  </div>
  <div class=col-md-1 id=menu>
  <a href="#contact" class=menu>Galeria</a>
  </div>
  </div>
  
</div>

<div class="main">
  <br><Br><br><br>><br>
  <div id=page_left>
  d
  </div>
  <div id=page_center>
    <div id=page2_top>
      tomi
    </div>
    <div id=page2_top>
      <div id=page2_2left>
      aa
      </div>
      <div id=page2_2center>
	<div class=row>
	  <div class=col-md-3 id=center><span class=center>TOMI</span><br><span class=center2>123</span></div>
	  <div class=col-md-3 id=center><span class=center>JACEK</span><br><span class=center2>1253</span></div>
	  <div class=col-md-3 id=center><span class=center>MIREK</span><br><span class=center2>1953</span></div>
	  <div class=col-md-3 id=center><span class=center>SŁAWOMIR</span><br><span class=center2>1273</span></div>
	</div>
      </div>
    </div>
  </div>
</div>
<div class=main2>
  <div class=row>
    <div class=col-md-1>
    
    </div>
    <div class=col-md-10>
      <div class=bok>
      &nbsp;
      </div>
      <img src=./image/1.jpg width=200></img>
      <img src=./image/11.jpg width=200></img>
      <img src=./image/12033.jpg width=200></img>
      <img src=./image/12823.jpg width=200></img>
      <img src=./image/12826.jpg width=200></img>

  
    </div>
    <div class=col-md-1>
    
    </div>
  </div>
  <br>
  <div class=row>
    <div class=col-md-1>
    
    </div>
    <div class=col-md-10>
      <div class=bok>
      &nbsp;
      </div>

      <img src=./image/13673.jpg width=200></img>
    </div>
    <div class=col-md-1>
    
    </div>
  </div>

</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</div>




<script language="javascript">
//$(window).on('load resize', function(e){
/*
    if (screen.width<= 1024){
       // $('.menu_top').css({'display':'block'});
       //alert(screen.width);
       document.location.href = 'index640.php';
      }
      else if (screen.width< 1366){
        //$('.menu_top').css({'display':'none'});
       document.location.href = 'index.php';
      }
//});
</script>

I jeszcze plik style.cs

body {
  
  
 background-color: #4c1ea9;
  
  
  
  
  
}

.navbar {
    overflow: hidden;
    background-color: #333;
    position: fixed; /* Set the navbar to fixed position */
    top: 0; /* Position the navbar at the top of the page */
    width: 100%; /* Full width */
    opacity: 0.5;
}

/* Links inside the navbar */
.navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
#page {
  
 
}
/* Main content */
.main {
    margin-top: 30px; /* Add a top margin to avoid content overlay */
}
.main2 {
    width: 95%;
    float: left;
    margin-top: 30px;
    
  
  
}
.main_left {
  clear: both;
  float: left;
 width: 10%; 
  
}
.main_right {

 width: 10%; 
  
}
.bok {
    float: left;
    width: 25px;
}
#menu {
   padding: 30px 5px 25px;
    text-align: center;
}

#page_left {
float: left;
width: 10%;

}

#page_center {
float: left;
width: 75%;
height: 365px;
background-image: url('./menu.jpg');

}
#page2_top {
width: 100%;
height: 250px;
}
#page2_down {
width: 900px;
height: 50px;
}

#page2_2left {
float: left;
width: 10%;
height: 115px;
}
#page2_2center {
float: left;
width: 80%;
height: 115px;
opacity: 0.7;
background-color: #0A639C;
}

#center {
  padding: 45px 10px 10px;
    text-align: center;
  
}
span.center {color: #e0b42d; font-size: 20px;}
span.center2 {color: white; font-size: 16px;}
a.menu {color:white; font-size: 17px;}
a.menu:hover {color:#B7BC2E; font-size: 17px;}

aj, stary nie wal tyle breaków tylko ustaw element odpowiednią klasą/stylami w css

Breakow

Ja zauważyłem, że jak umieszcze jakiś obiekt w divach, które nie są elemenatmi bootstrapa to wtedy normalnie widac górne menu natoamist jak umieszczę to w diach bootstrpa to wtedy divy bootstrpa nakładają się na górne menu i górnego menu nie widać.

Poczytaj np. o z-index. Najprościej będzie Ci to ustawić.

css