Aligning hamburger menu in mobile menu

[hourtayter]

Hello,

Another one of hose small problems that hopefully someone will spot the solutino to quickly!

With the nav bar on this http://bit.ly/35JmVIJ everything works fine on desktop view, but when it collapses to the hamburger menu (or mobile menu if you prefer) the links aren't aligned. There's a screenshot attached just to make the issue clearer if need be.

Any help gratefully received!

[hourtayter]

Solution even, seem to be lacking an edit button on the forum!

[Nancy OShea]

"...seem to be lacking an edit button on the forum!"

============

Yes @hourtayter.  Owing to past abuses by some, editing of discussions is only allowed by Adobe Staff, moderators and high-ranking participants.  You have only 18 posts so far and haven't earned the privilege to edit your own posts yet.  But your ranking will improve the more you participate in these communities.

[osgood_ · Accepted solution]

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>

[hourtayter]

@osgood_ you can indeed encourage a better way/coding, and that is brilliant, thank you very much – worked like a charm! Thanks again

[hourtayter]

@Nancy OShea that is real pity, having been on and off these forums for a few years I'd seen the odd heated debate but it's a shame it's necessitated that action, but at least it doesn't seem to have put people off who give out some really good advice and tips on here