Hi there folks!
I’m trying to use this responsive menu on a page but am having the following issue. When collapsed, my menu does two things. It breaks over two lines and it’s not clickable. Here’s what it looks like collapsed:
I’m sure it’s an issue with my implementation of the code but I can’t figure out what I’ve done wrong. Could someone let me know what I’ve messed up?
Thanks for your time!
Just the link to a working version does not help identify where you messed up, we need to see your messed up version to do that. 
I’m such a maroon. I’ve edited the OP to include the link to my attempt 
In the demo they used line spacing the centre the “logo” text vertically, though they did that in pixels, which I don’t approve of, it’s a magic number and will break if fonts are zoomed.
You are setting the height of the nav bar by the size of the hamburger. To be responsive, set the hamburger (header_icon) height to about 4em, then the line-height for header_logo to 4.
As for the clickability, that’s more a JS problem I think.
Hi there Sam and thanks for the help!
I think I’ve made the changes dictated but while the logo/hamburger remain side by side, I have managed to make the navbar crazy fat:
Making the line-height smaller made the navbar thinner, but returned my alignment to over/under for the logo/hamburger.
I don’t see any obvious difference in that version.
This is what I see when making the changes I suggested:-
I made it bigger, to match the size of the bar.
There is a horizontal scroll, but that’s another issue.
Hi there Sam, I think I’m having problems understanding how these containers are working. I would like to both vertically and horizontally center the hamburger and menu. The logo and hamburger containers are properly centered vertically but the menu entries are not. I can not figure out how to horizontally center either. I tried both text-align:center and vertical-align:middle in header and navigation but nothing seems to change.
What might I need to do to center the menu and hamburger in both directions?(The hamburger is vertically aligned properly already)?
If you want to center the text items horizontally then don’t float the nav and then just set text-align:center.
e.g.
.menu{float:none;text-align:center}
The text is vertically centred in the black bar except that it is allowing room for ascenders and descenders but as you have all capitals then there will appear to be more space at the bottom. You will just have to manually move the items until they look perfect (add position:relative to the anchors and nudge them up or down with top.)
Assuming that was what you meant as I just skipped to the last post 
Hi there Paul,
I’ll try to do better to illustrate my issues so everyone doesn’t have to do an archaeological dig through the thread to find out what I need. Sorry about that.
(edit)I have validated everything, so am assuming that none of my issues are caused by invalid code(/edit)
I was able to horizontally center the menu thanks to your help. I have three remaining issues.
First, I would like the hamburger horizontally centered as well, but it’s remaining on the left.
Second, clicking the hamburger is not resulting in a menu. As far as I can tell, the menu is completely inaccessible when in mobile view.
Finally, the menu gets vertically fat during mobile and I’d like to try to keep it the same vertical size as the desktop view.
Here’s some screenies for explanation:
Looking fantastic!
Fat, hamburger to the left and no menu to be found:
It’s the height of the hamburger that’s making the mobile menu bar fat. I said 4em because that matched close to what it was, but if you want it like the wide one ~42px, the set it about 1.4em.
That will in turn throw off your hamburger icon, so you will have to adjust the top value on that in .header_icon::after
Thank you Sam, I made the changes (header_icon:after required a change to top:-4px) and it’s working great. Do you know how I could get it horizontally centered as well?
On the hamburger, remove: float: left and add: margin: 0 auto
Fantastic!
Do you think my issue with the menu not showing up from the hamburger is a css or javascript error? Should I be asking the in JS section concerning why it won’t show up? I’m not getting any errors, but I might have inadvertently removed an important bit while I was cleaning up the demo code.
Probably yes.
Hi there Sam,
I was able to figure out something I missed. I wasn’t calling the js for the flyout, I’ve added it and I now get a flyout menu from the left, but it’s completely blank. Looking at the javascript, it’s using the following CSS to bring the menu out:
.with--sidebar .site-pusher {
-webkit-transform: translateX(250px);
transform: translateX(250px);
}
.with--sidebar .site-cache {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
}
I was just wondering if you see an issue with the CSS. I’ll also ask the in JS section to see if it’s on the JS side of things that I’ve messed up.
The original demo is here: http://codepen.io/hanlinC/pen/dJwil
Ok, I think I may have narrowed this down to the following portion of the CSS. I looked at the demo and see that they have the following at the beginning of the CSS:
@import "compass/css3";
@import "compass";
/* VARIABLES */
$header-bg: #3f51b5;
$menu-width: 250px!default;
If I place this at the beginning of my CSS however, it results in a blank page.
Is there something I should be including to be able to add this portion of the CSS?
That code is not CSS, it appears to be SCSS which needs to be compiled (preprocessed) and turned into ordinary, browser-friendly CSS. The author of the menu wrote it in SCSS. I assume you have compass on your computer.
I do not use preprocessors. Someone else will have to help.
Hi there Ron,
I think there are some shenanigans afoot. Although codepen shows that at the top of the CSS, when I view the frame source(and then subsquently host a local example), the section I’m mentioning does not exist. Here’s a clean version of the demo: http://schwim.net/after5/orig.html
I’m going to start from scratch and begin adding one change at a time until I can figure out what I’m doing that breaks everything. I will update the thread once I have a real and concrete portion of code that results in the breakage.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.