- This topic has 3 replies, 3 voices, and was last updated 4 years, 4 months ago by
.
-
Posts
-
A bit off the usual questions here, so bear with me.
While I may not work with WordPress professionally (though I've done my fair share of contract jobs), I do consider myself relatively capable of editing almost anything, creating a custom theme, grabbing the occasional contract job, etc. My understanding of PHP and CSS is more than capable of tackling most issues, and a bit of Google-fu usual gets me the results I want, even if takes me a bit longer.
That being said, I find WordPress navigation to be an absolute mess. The sheer number of classes, the seemingly sloppy CSS hackjobs, the lack of using something like Flexbox, etc - it's just all so complicated, for something that doesn't seem too difficult. Even the Genesis Sample Child theme, which is my usual foundation for any work, has a very nice and clean navigation system, but it's a mess to edit. Positioning the hamburger menu isn't responding to simple CSS changes as I'd expect, adding padding is causing items to go vertical on desktop (though exactly what I wanted on mobile, might have to use media queries, for whatever reason), etc.
Here are a few rapid fire questions that come to mind given my latest dive into attempting to fix up my navigation as desired:
-Has anyone converted the Genesis Sample theme navigation to Flexbox? (I'm trying to vertically center the navigation in the header, among other things, and Flexbox would be perfect here)
-Why is the placement of the hamburger menu so complex? There's various selectors influencing it, with padding added, the same padding subtracted, floats, text aligns, etc - it's so convoluted that adding a simple padding moves the menu in a very unexpected way.
-What exactly is determining the sticky header, and placement of the mobile menu items? It appears that no matter how large the site-header is, it's dynamically adjusting. I used to have to add padding-top to the site-inner to compensate for the sticky menu, but again, it now appears to be dynamic (menu items always go below the menu, site-inner is always where it needs to be).
-Are there a bunch of accessibility additions to the default navigation systems? Again, it all just seems more complicated than it needs to be, and I'm wondering why.
I'm generally pretty good with this stuff, but navigation is pissing me off haha. It appears to be like the printer of web dev - so simple, yet such a pain in the ass (everyone hates trouble-shooting a printer). Thanks for any input, I'd really like to further wrap my head around this.
As community volunteers with no affiliation with Studio Press, we really can't address the whys of anything. However, maybe these articles will help you:
https://victorfont.com/understanding-genesis-framework-site-header-layout/
https://victorfont.com/customize-the-genesis-header-with-css-grid-layout/
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?I'll give both of those a read, thanks. Not always, but often when I post, I'm more looking for discussion / insight, though I do get this is geared more towards a support forum, especially with you doing your daily runs and answering the regular questions - appreciate it. I should probably find myself a more active discussion forum that's less "how do I" centric, and more open discussion based and advanced in nature, at least for the broader questions like this.
As for my navigation issue, I played with it more, and I was forgetting to set the flex-wrap property to no wrap, which was creating all sorts of chaos with the fixed position header. I've nearly got it exactly as I want it (just need to resize the hamburger icon, and properly position the desktop elements), but it came together.
@porter - you might consider joining the Genesis Slack community - that's more focused on conversation than support.
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.