Re-Design of Sticky Nav

I’m trying to change the sticky nav’s appearance, I’ve been trawling through the code and have made amendments to core/themes/mytheme/js/functions.js however it isn’t changing the appearance. Can you let me know where I’m going wrong/point me in the direction of the correct file to change.

I’ve copied the amended code below where I’ve change functions.js. The change adds the search bar to the middle of the sticky nav and put the navigation below. Also attached an image to give you a visual.

var logo = header.find(“.site-logo”).clone().html(),
navigation = header.find(“.main-nav”).clone().html(),
searchextend = header.find(“.search-extended”).clone().html(),
rightColumn = header.find(“.right-column”).clone().html();

var headerClone = [
‘<div class=”sticky-header header-clone”>’,
‘<div class=”container”>’,
‘<div class=”site-logo”>’ + logo + ‘</div>’,
‘<div class=”search-extended”>’ + searchextend + ‘</div>’,
‘<div class=”right-column”>’ + rightColumn + ‘</div>’,
‘</div>’,
‘</div>’,
‘<div class=”navigation-wrap”>’,
‘<div class=”container”>’,
‘<div class=”main-nav site-navigation kitchnbathco-navigation”>’ + navigation + ‘</div>’,
‘</div>’,
‘</div>’,
].join(”);

Attachments:

You must be logged in to view attached files.

Hi,

Could you please send us a link to your website where we can see this issue?

Kind Regards

Sure – details are all contained within the private content.

You are editing functions.js file but on your website functions.min.js is used. Try to disable JS minify option in Theme Settings -> Performance.

Worked perfectly, thank you.

If I make changes to the original js (e.g. functions.js) files and then select the option to minify within Performance, does the theme automatically minify the file?

Do you have any guidance on the other point below…

When the sticky nav becomes sticky (when scrolling scroll down) and you try and hover or click on a navigation item to view the dropdown, it doesn’t display. It’s a mega menu, not sure if there’s anything on the theme that’s blocking the functionality?

No, this option doesn’t minify the file automatically. You need to use some minification plugin for this. Seems that this kind of plugin for mega menu is not working with such kind of sticky header.

[Author]

Posts