That’s of no use to anyone and devices or windows less that 565px tall get nothing as the element will be out the top of the viewport. Use logical numbers that make sense.
Also the menu just sits on content and obscures it. It should probably be a position:sticky element rather than fixed and then only gets sticky when the page scrolls.
Remember when we talked about magic numbers (in almost every thread)?
Yes I do remember. But like I said in my message to you, it is hard to keep everything in mind while going through all this. So much to remember, difficult to keep track of it all.
I guess it’s impossible to do it all without courses. But I’ve gotten far without, with help of course. I’m just interested in knowing how to build these, such as the side menu. I mean, I find it fascinating when I watch tutorials on it on YouTube, and see it elsewhere.
There’s no need to create a new side menu you just restyle the existing horizontal one for smaller screen. You then just need a hamburger menu toggle to show and hide the nav as required.
The navigation is the same html and you just move it to the side for smaller screen. I’ll try and put up a small demo tomorrow using your nav html
@PaulOB yeah I realize that. Ok I’d appreciate that, thanks.
There’s no need to create a new side menu you just restyle the existing horizontal one for smaller screen. You then just need a hamburger menu toggle to show and hide the nav as required.
The navigation is the same html and you just move it to the side for smaller screen.
I understand. Seems easier said than done. Is what I want to try and do, but as you say I have it all going the wrong way. Could you please also put up a demo for putting up the search box up top for my current navigation? I made it out on CodePen, how it would look like on phone…
I’ve put up a rough demo here of your header with a sticky search bar added and then a mobile nav appears at smaller screens.
I have not been that careful with the styling but just wanted to show the implementation.
Notice that the nav has been pulled out of the header div to make it easier to reposition for mobile. I moved the search input css to the end of the css panel along with the new css rules for the hamburger and menu re-positioning code.
A hamburger menu appears at smaller screens and is linked to the js which toggles a class to open the menu.
You can change the hamburger to whatever you want it to look like. Just adjust the css for #toggle. However if you change it just to that half arrow then I guess no one will ever click it as they won’t know what it’s for unless you keep the menu text in place.
Also note that ⪢ is far too small for someone to hit with their thumb or fingers and a menu should be the most accessible thing on the page otherwise all bets are off. You would need to ensure that the target area is wide enough for touch which can be achieved by ensuring there is some padding around the arrow.
@PaulOB so that would be in place of the hamburger / X icon.
You can change the hamburger to whatever you want it to look like. Just adjust the css for #toggle. However if you change it just to that half arrow then I guess no one will ever click it as they won’t know what it’s for unless you keep the menu text in place.
Yeah, good point. Maybe I should just leave it as is then.
Also note that ⪢ is far too small for someone to hit with their thumb or fingers and a menu should be the most accessible thing on the page otherwise all bets are off. You would need to ensure that the target area is wide enough for touch which can be achieved by ensuring there is some padding around the arrow.
Could make it larger w some padding. Or if larger, just without as it would be big enough to use with thumbs, other fingers.
Yes just place your icon inside the button called #toggle and remove the relevant styling from it. You won’t need the :before and :after rules but of course you lose the hamburger animation from hamburger to close.
Remember a hamburger is now the standard icon for opening menus and used everywhere. Substitute the icon at your own risk.
That is to show you how the sticky search bar works on desktop as it will stick to the top of the screen. On mobile the search bar is at the top of the navigation screen instead.
No it was just to show the sticky search bar effect because you wouldn’t have noticed it otherwise as it only sticks to the top when you scroll. You can of course delete that text and replace it with your actual content.
