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:
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, 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.
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
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
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.
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.