Responsive navigation bar with fixed position when scrolling
Question
When scrolling my list items do not show within the scroll bar. also when I have minimized the screen to a breakpoint the burger icons show and is clickable but when scrolling down the page that has all the links within it (white background page) does not scroll with the page. please compare this website for reference as this is very difficult to explain.. http://findmatthew.com/
I have tried making the position fixed when the break has been met but it still will not show the li tags when this has been done. likewise with the fixed bar when scrolling
.toggle { padding-left: 48.5%; width: 100%; font-size: 40px; color: red; box-sizing: border-box; display: none; } .nav { padding: 0 0 0 0; text-align: left; margin-bottom: 5px; } ul { width: 80%; margin: 0 auto; padding: 0; } ul li { list-style: none; display: inline-block; padding: 20px; } ul li a { text-decoration: none; color: olive; } #containernav.color { position: fixed; background: yellow; transition: 0.5s; width: 100%; top: 0; padding-bottom: 65px; z-index: 10; opacity: 0.2; ; } #logo { transform: translate(-20%, -5%); max-width: 5%; height: auto; -webkit-transform: translate(-20%, -5%); -moz-transform: translate(-20%, -5%); -ms-transform: translate(-20%, -5%); -o-transform: translate(-20%, -5%); } header #logo h1 { margin: 0; } header a:hover { font-weight: bold; } /* MEDIA QUERIES */ @media only screen and (max-width: 847px) { .toggle { display: block; } ul { width: 100%; display: none; } ul li { display: block; text-align: center; } .active { cursor: pointer; display: block; } }
<header> <div id="containernav"> <nav class="nav"> <div> <ion-icon class="menu toggle" name="menu"></ion-icon> </div> </div> <ul> <div id="logo"> <a href="index.html"><img src="/src/img/logo.jpg.png" width="60" height="60"></a> </div> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="work.html">Work</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#" download>Resume</a></li> </ul> </nav> </header>
I expect the output when scrolling the taskbar to be sticky.
and when the burger icon has been clicked once the media queries has been met for the li tags to also be shown.
2 answers
solution1
0 2019-06-06 08:34:19
I have tried making the position fixed
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } .navbar { overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar a:hover { background: #ddd; color: black; } .main { padding: 16px; margin-top: 30px; height: 1500px; /* Used in this example to enable scrolling */ } </style> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> </div> <div class="main"> <h1>Fixed Top Menu</h1> <h2>Scroll this page to see the effect</h2> <h2>The navigation bar will stay at the top of the page while scrolling</h2> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> </div> </body> </html>
solution2
0 2019-06-06 09:49:05
I looked at the web pages you referenced and ended up with this. Since you added javascript as one of the tags, I assumed it was ok to add some javascript. I also took the liberty to relocate some element open and close tags to be more correct. Although this may not be the exact result you are looking for, I hope it may help you get further.
The code is in the snippet below:
window.addEventListener("scroll", function() { var elementTarget = document.getElementById("frontpage"); if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) { // scrolled past frontpage document.getElementById('containernav').classList.add('fixed'); } else { document.getElementById('containernav').classList.remove('fixed'); } }); function dropdown(e){ var speed = 1; if ( e.classList.contains('open') ) { // If menu is open, close it: document.getElementById('dropdown').setAttribute("style", "display:none"); e.classList.remove("open"); } else { // If menu is not open, open it: document.getElementById('dropdown').setAttribute("style", "display:block"); e.classList.add("open"); } }
body { margin: 0; } .toggle { padding-left: 48.5%; width: 100%; font-size: 40px; color: red; box-sizing: border-box; display: none; } .nav { padding: 0 0 0 0; text-align: left; margin-bottom: 5px; } ul { width: 80%; margin: 0 auto; padding: 0; } ul li { list-style: none; display: inline-block; padding: 20px; } ul li a { text-decoration: none; color: olive; } .fixed { position: fixed; background: yellow; width: 100%; top: 0; z-index: 10; } .frontpage { background: dodgerblue; min-height: 500px; height: 100%; } #logo { transform: translate(-20%, -5%); max-width: 5%; height: auto; -webkit-transform: translate(-20%, -5%); -moz-transform: translate(-20%, -5%); -ms-transform: translate(-20%, -5%); -o-transform: translate(-20%, -5%); } header #logo h1 { margin: 0; } header a:hover { font-weight: bold; } /* MEDIA QUERIES */ @media only screen and (max-width: 847px) { .toggle { display: block; } #dropdown { width: 100%; display: none; } #dropdown.open{ display: block; } #dropdown li { display: block; text-align: center; } .active { cursor: pointer; display: block; } }
<header> <div id="containernav"> <nav class="nav"> <div> <ion-icon class="menu toggle" name="menu" onclick="dropdown(this)"><img src="https://picsum.photos/200" width="50px" height="50px" /></ion-icon> </div> </nav> <ul id="dropdown"> <li id="logo"> <a href="index.html"><img src="https://picsum.photos/300" width="60" height="60"></a> </li> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="work.html">Work</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#"download>Resume</a></li> </ul> </div> <div id="frontpage" class="frontpage"> </div> </header> <div class="content"> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <h1 style="height:1000px">loooong header</h1> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
responsive fixed navigation bar with a tall submenu list not scrolling
Navigation bar is not responsive after scrolling
To responsive horizontal, scrolling navigation bar
Fixed navigation bar after scrolling
Fixed position navigation bar not working
fixed navigation bar overlaying content when position is given dynamically
Using a fixed navigation bar with a parallax scrolling design
How to fixed the button in navigation bar on scrolling
position fixed div, when scrolling up and position absolute, when scrolling down: google now search bar type behavior
Fix navigation position when scrolling
Related Tags