I have been working on my first website for a uni project, come across a really weird bug in my CSS (or in my HTML, not too sure) that means a sticky nav bar at the top of the page which I had working fine now will unstick and show 'position: relative' properties at a random point near the top of all 3 pages of my site.
I noticed this bug after adding responsive functionality to the site using two @media (max-width/min-width) articles for more than and less than 512px
Have played around with different overflows in both the parent and native containers to no luck, only breaking it further.
the webpage in its current and bugged format is online here: http://db814.brighton.domains/ci435/learningJournal.html
and here are the relevant HTML and CSS snippets,
<div class="desktop-menu">
<ul id="page-links">
<li class="active" ><a href="learningJournal.html">Learning Journal</a></li>
<li><a href="tutorial.html">Tutorial</a></li>
<li><a href="contact.html">Contact Me</a></li>
</ul>
@media (min-width: 512px) {
.desktop-menu {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index:1;
}
.desktop-menu ul {
margin: 0;
padding: 0;
list-style-type: none;
background-color: #AEA79F;
overflow: hidden;
width: 100%;
bottom 0;
}
.desktop-menu li {
float: left;
}
.desktop-menu a {
display: block;
color: #fff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.desktop-menu a:hover {
color: #E95420;
}
.mobile-menu {
display: none;
}
