Another one of those small problems that hopefully someone will spot the solutino to quickly!
Can I encourage you to set up the top section i.e .logo and navigation slightly differently?
First make a backup of your page and css just incase things go wrong and you need to revert back to the original state.
Use the below html for the logo, navigation and hamburger icon, which goes directly after your opening 'container' <div> tag, instead of what you have currently.
<header>
<div class="corporate-logo">
<img src="https://www.simontgraphicdesign.co.uk/images/topbutton.jpg" alt="Website of the graphic designer Simon Thick" width="112" height="89" />
<a href="#" class="hamburger"><i class="fa fa-bars"></i></a>
</div>
<!-- end corporate-logo -->
<nav class="nav">
<a href="pages/contactpage.html">Contact</a>
<a href="#" class="active">Gallery</a>
</nav>
<!-- end nav -->
</header>
<!-- end header -->
Then use the css below:
/* header */
header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
/* Corporate logo */
.corporate-logo {
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 568px) {
.corporate-logo {
flex: 1;
}
}
/* Hamburger */
.hamburger {
display: none;
color: #888;
}
.hamburger:hover {
color: #FC3;
}
@media screen and (max-width: 568px) {
.hamburger {
display: block;
}
}
/* Nav */
@media screen and (max-width: 568px) {
.nav {
display: none;
width: 100%;
text-align center;
}
}
.nav a {
display: inline-block;
text-decoration: none;
font-size: 17px;
padding: 35px 0 14px 40px;
font-family: "museo-slab", Verdana, Geneva, sans-serif;
font-weight:700;
text-transform: uppercase;
color: #888;
}
@media screen and (max-width: 568px) {
.nav a {
display: block;
text-align: center;
padding: 0 0 10px 0;
}
}
.nav a:hover {
color: #FC3;
}
@media screen and (max-width: 568px) {
.nav a:hover {
padding: 0 0 10px 0;
}
}
.nav .active {
color: #FC3;
}
/* show hide nav for mobile */
.showHideNav {
display: block;
}
Then add the <script></script> code below to your page, directly before the closing </body> tag.
<script>
const hamburger = document.querySelector('.hamburger');
const nav = document.querySelector('.nav');
hamburger.onclick = function() {
nav.classList.toggle('showHideNav');
}
</script>
That should be it. I've avoided using the same css classes that you have currently incase of conflict. Once working you can go through the css and remove all the redundant css selectors relating to what was topNav, plus you will not need the below script any longer:
<script>
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
AdChoices