✨ Website: Fix mobile css styles for website navigation - search and drop down (css / SASS)
Closed this issue · 8 comments
there are a few quicks with our mobile menu that i'm trying to resolve.
- in mobile view (375 px width here) you can see that there is a small blue box over the X that closes the hamburger that is too narrow. i don't understand where that is coming from and how i can fix it to align with the size of the x used to close the hamburger.
- When you scroll, you can see the search bar follows the page rather than staying at the top. Should i include the search. button in the mobile menu or should i allow it to float? if so how can i make this a better experience for the user?
- The hover underline works for the non drop down items in our menu but NOT for the drop down items. Could use some help with understanding how to style both so hover action is the same.
Can anyone help guide me in how to fix these issues. i'm still learning mobile responsive design but am getting there!
update: i moved the search icon so it's atleast on the right side of the page as it scrolls.. but still need to work on the other items..
Hi this comment is to test the assigning feature on Github.
Documenting some observations while troubleshooting
I'm seeing the search magnifying glass stay fixed in view when the page is scrolled. (So I don't think the checked item above is fully resolved).
I'm also seeing when going from 769px width to 768px width that there is a jump of the search icon to the left of the hamburger icon. It jumps again to the right of the hamburger icon when going from 481px width to 480px width.
769px width
768px width
481px width
480px width
i'm sure this is something i did @willingc i remember fighting with that.
What essentially happened here was that the theme we are using and have used for 5 years - minimal mistakes didn't support drop downs. i read that bootstrap wasn't an option with minimal mistakes (but i'm open to trying it) so i ended up hard coding some javascript to create the drop downs and worked on the hamburger and search as well.
i really am not adept with javascript so we probably should move to bootstrap but what i read is that it might clash with our current theme's styles given it's an old theme.
we probably can patch this up somehow - in fact i bet someone like Jonny would know how to fix this. or we could just consider rebooking the entire website to a new theme that has the features that we need. if we did that i might want to move to hugo and get away from all things ruby.
very open to any thoughts you have and appreciative of this issue comment!!
I will try to poke at correcting with the existing theme.
The border around the "x" thing is fixed, idk if I did that or u did that but its done :)
I didnt know we wanted the underline animation in the menu dropdown items, but that would also be simple, just tweaking the CSS selectors a lil.
Re: bootstrap, I only ever used it back in the days of it being a humble layout tool but I think pretty much all that can now be done with css grid? Ig it is more of of a widget tool now. Anyway I think it probably would add more complexity than it resolves, and to use it everywhere would be a decent amount of work. But obvi always open to trying it out!!!!!
of course. i do think we can close this. the work you just did @sneakers-the-rat fixes everything.
the reason why i keep thinking about bootstrap is that while i LOVE css i seem to have a hard time making things consistently responsive and also screen reader friendly. but if we can just slowly move away from minimal mistakes with the goal of eventually moving to a new theme that maybe is more optimized out of the box that is likely the best option!! for now let's close this as it has been fixed!!
and thanks to you the search button isn't hiding anymore either 😆