-1

1

i have a navigation bar that sticks to the top of the page as the user scrolls, however as the user continues to scroll down the page, the navigation menu seems to disappear behind some of the pages elements. any help with this matter will be greatly appreciated, below is all the code.

* { margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI'; } p, h5 { margin-bottom: 10px; line-height: 1.5; } h5 { text-align: center; border: 1px solid #ccc; border-width: 1px 0; } h5.fixed { position: fixed; top: 80px; left: 0; background-color: #fff; right: 0; } .nav a { text-decoration: none; color: #fff; display: block; transition: .3s background-color; } .nav a:hover { background-color: #005f5f; } .nav a.active { background-color: #fff; color: #444; cursor: default; } /* Option 1 - Display Inline */ .nav li { display: inline-block; margin-right: -4px; } <h5> <div class="nav"> <ul> <li class="home"><a href="#">Home</a></li> <li class="tutorials"><a class="active" href="#">Tutorials</a></li> <li class="about"><a href="#">About</a></li> <li class="news"><a href="#">Newsletter</a></li> <li class="contact"><a href="#">Contact</a></li> </ul> </div> </h5>

 Run code snippet

Expand snippet

html css

shareimprove this question

edited Dec 20 '15 at 17:28

 

asked Dec 20 '15 at 17:08

Josh

46210

add a comment

4 Answers

activeoldestvotes

2

 

There are few issues in you code. I could not understand why you using h5 in fixed div. To solve issue try this

h5.fixed { position: fixed; top: 80px; left: 0; background-color: #fff; right: 0; z-index:999; }

But my suggestion is use some better way to implement fixed top menu. Please check this example https://getbootstrap.com/examples/navbar-fixed-top/

shareimprove this answer

answered Dec 20 '15 at 17:20

Manish Shukla

1,1722721

  •  

    This solved my problem! works perfectly, thank you and ill take your advice on board and look into that. Thank you again! – Josh Dec 20 '15 at 17:31

 

https://stackoverflow.com/questions/34383547/how-to-bring-navigation-div-to-the-front

'WEB > CSS' 카테고리의 다른 글

CSS background-size Property  (0) 2019.07.05
CSS 입력시 주의사항  (0) 2019.05.03
[CSS] Media Query에서 Screen과 Only Screen의 차이점  (0) 2019.05.01
Box Shadow II  (0) 2018.06.07
Box-Shadow  (0) 2018.06.07

+ Recent posts