next-wordpress-starter
next-wordpress-starter copied to clipboard
colbyfayock
Responsive Site Navigation
I'm happy with the "desktop" experience for larger devices, but I didn't put a ton of thought into how mobile should look.
We should figure out a good way to present the navigation for all device sizes.
Things to consider:
- How does this look on smaller devices (mobile)
- How does this look on larger devices (desktop)
- Is a hamburger menu appropriate? maybe instead do a sideways scrolling menu like how Google does it on mobile?
- How would search look on mobile?
A solution should be proposed before this Issue gets picked up to get worked on, ideally with a design mockup of sorts (doesn't need to be perfect for the mockup)
^
position: fixed;
justify-content: flex-start;
top: 0;
left: 0;
display: flex;
flex-flow: column;
background: whitesmoke;
padding: 10px;
height: 100vh;
z-index: 2;
overflow-y: auto;
width: 70vw;
transition: left 0.45s ease-in-out
have a toggle menu that sets left to 70vw onclick with simple js click Its all a really Simple css media screen break
if you wanted to go menu scroll way, You could just have an overflow-x: auto; But this isnt really pretty.
Search bar Could be a very simple toggle overlay, Or just have it relocate below the header with positioning
Just realised ive not specifed where the code should be placed. Would be best on the nav UL tag
hey @Arxhtects thanks for putting that together - was that just a mockup or did you make a proof of concept somewhere? id be curious to see an example of how that would look when it's not open for instance
hey @Arxhtects thanks for putting that together - was that just a mockup or did you make a proof of concept somewhere? id be curious to see an example of how that would look when it's not open for instance
Hey it was a proof of concept from the inspect window. and the x button was just a quick paint job.
Tbh making a toggle button is easy, i normaly do it with a div as a wrapper and 3 divs or spans inside. Some people do it with one div and before and afters, but i don't like doing it that way, I'm currently swamped work wise if i had time i would have forked and made a working concept, Maybe if i get some time ill make something, but tbh any one could pick this up and work from the code ive roughly put to geather.
A simple $("nav").toggleClass("show") [or w/e code you wana do it in] on the toggle button would work bringin the menu out from the left, hell you could add it to the body if you wanted and move the body over for a extra bit of fancy 👍
Its just a basic of canvas menu.
just put the code
position: fixed;
justify-content: flex-start;
top: 0;
left: 0;
display: flex;
flex-flow: column;
background: whitesmoke;
padding: 10px;
height: 100vh;
z-index: 2;
overflow-y: auto;
width: 70vw;
transition: left 0.45s ease-in-out
into the element style and you will see it, all it would need is a media tag [mobile first, for that tasty google rankings] on the ul for it to change between resolutions :)
@Arxhtects I would like to pick it up and work with the ground work you have laid.
@Arxhtects I would like to pick it up and work with the ground work you have laid.
I have no issue with that 👍 However I'm not the owner of this repo :D Might want to check with them first
as long as @Arxhtects didn't want to do the work and submit the PR that sounds good
when working through it we'll want to make sure that we're providing a good experience for both mobile and desktop :)
@allenjamesvinoy14 - let me know if you'd like any support with this. :)
@Ambareen09 sure that would be great! let me know if you have any questions
Can you please help me with setting up the WORDPRESS_GRAPHQL_ENDPOINT? I am unable to follow the documentation for this part.
@Ambareen09 check these tutorials out:
https://spacejelly.dev/posts/how-to-create-a-headless-wordpress-blog-with-next-js-wordpress-starter/ https://www.youtube.com/watch?v=X8fY011u0tE
you could try using a local wordpress instance: https://localwp.com/
there's also a service to spin up a temporary one but i can't find it right now, ill comment back if i find it