change a menu completely using a javascript library

You’ll become a “developer” in a small sort of way because you’ll need to learn something about it along the way. First create a child theme to contain your work so updates don’t overwrite it.

Your theme will have already styled the menu. You can completely change this by adding the CSS you want to your child’s style.css file.

You’ll need to get jQuery and lettering.js loaded onto your pages. This is done with wp_enqueue_script(). Be sure to specify ['jquery'] as a dependency when enqueuing lettering.js. Be sure to read the notes about action hooks and the user notes about noConflict mode on the linked docs page.

When you call the .lettering() function, the selectors you use will be different than the examples because a WP menu uses a different HTML structure. This is not a problem, any structure can be handled as long as you specify the right selectors.

Use your browser’s element inspector developer tool to help you determine the right CSS for the menu. This all will be a frustrating process when you start out. Stick with it and you will be rewarded with new found powers over your site. Test your work frequently and celebrate every small achievement, you deserve it. If you get a little rush when something goes right, no matter how trivial, you will find this sort of work rewarding and will do well. Good luck and happy coding!

Hi arsenalemusica,

I didn’t notice it was you when I last replied. I might have phrased things differently, though the facts of implementing lettering.js wouldn’t change.

I wouldn’t say an overlay would be easier. Swapping menu/search elements doesn’t sound all that serious to me, even considering your skill level. The reality depends on the theme specifics. You ought to have a child theme regardless. Usually elements like that occur in header.php. Copy it or whichever template needed to the child. Identify the blocks of code dedicated to each feature and reverse the order in which they occur. In some cases that’s all there is to it. In other cases the related CSS might need adjustment as well.

I imagine you might find “Identify the blocks of code” intimidating. Fair enough. You have a backup file, so there’s little to lose in trying other than time spent. The blocks would generally be surrounded by HTML. Use your browser’s element inspector developer tool to help you identify the HTML that goes with each element. If you can identify the same HTML in template code, you’ve identified the blocks of code. You don’t need to understand the PHP code within, only know what makes up the HTML for each element and move it all so the positions are swapped.

Even if you really preferred an overlay, you’d still want to identify the current elements in order to move them to an overlay. While there is something to be said in separating custom work from the theme, minimizing how much is changed to get what you want is important if one’s skills are limited.

Ugh, I hear you about page builders like VC. I’m not keen on the WP block editor either, though I’m learning to live with it. Supposedly moving components in VC should be even easier than editing HTML but I’ve zero experience with VC.

It seems odd to me that header items like search and menus would be part of VC. I’d expect it to be template code and VC only used for regular content. But it’s not hard to imagine a theme doing it differently.

In general, it ought to be easier to alter appearance and style than to gain certain functionality, so choosing a theme by functionality over style was the right choice. Doesn’t make changing the style any easier. If it were left only to CSS it wouldn’t be so bad, but often HTML needs to be a certain way to get a certain layout. As it is for the menu/search order.

You’d be better off altering the current style to address what you most dislike instead of trying to make it match something you had previously. When it comes to swapping element order, if the element’s container can be styled using the flex-box CSS scheme, the ordering of elements within can be defined with CSS alone. Flex-box is a more advanced CSS scheme that I have little experience with, but it has intriguing possibilities if it can be made to work. It could be difficult to attain if the HTML isn’t set up to take advantage of it.

I know you’re not a developer so such a thing might be out of reach, but it’s good to know what options are available. Non-developers can sometimes still achieve certain customization by learning just enough to accomplish the immediate task. If you do that enough, you eventually pick up enough knowledge to be considered at least a novice coder. Lots of developers started out that way.