Make media nav bar functional on Wordpress site

Question

I've got a wordpress site I'm working on that's a few years old, (but up to date...as much as possible), and uses the "Expound" theme.

It is supposed to be responsive, but the nav bar isn't functioning correctly. When the display is less than 600px wide the nav bar menu collapses, as it should. The problem is that the menu doesn't extend when you click on the collapsed "menu".

I just want to know what needs to be done to actually show that nav bar on a mobile device/smaller screen.

I'm more than happy to provide code snippets, but I'm not exactly sure where the problem is.

This is what my reset.css file contains (which is what is responsible for the collapsing action):

    /* Small menu */
.menu-toggle {
    display: none;
    cursor: pointer;
}

.main-small-navigation ul {
    display: none;
}

@media screen and (max-width: 600px) {
    .menu-toggle,
    .main-small-navigation ul.nav-menu.toggled-on {
        display: block;
    }

    .navigation-main ul {
        display: none;
    }
}

I'd gladly add more, I'm just not sure what you'd need. Could you tell me which files you'd need? — AmericanMade, Apr 05 '18 at 01:52
I am not seeing any jquery loaded for the site at all - your css is hiding the menu, true, but there's nothing else happening that i see that would implement a working "hamburger" menu. see https://www.internetkultur.at/simple-hamburger-drop-down-menu-with-css-and-jquery/ — Scott Weaver, Apr 05 '18 at 02:03
I noticed that nothing was happening when clicked using the developer tools. Didn't really catch that nothing was using jquery at all. Thanks. I'll take a look. — AmericanMade, Apr 05 '18 at 02:10

Fecosos · Answer 1 · 2018-04-05T02:46:43.553

0

I made a basic hamburger menu using vanilla javascript:

Javascript:

var menu = document.getElementById("menu-fluke-catalog-1")
var toggler = document.querySelectorAll(".menu-toggle")[0];
toggler.addEventListener("click", function (event) {
    if (! menu.classList.value.includes("open")){
        // Menu will open
        menu.classList.add("open");
    } else {
        // Menu will close
        menu.classList.remove("open");
    }
});

CSS:

@media screen and (max-width: 600px) {
    .menu-toggle,
    .main-small-navigation ul.nav-menu.toggled-on {
        display: block;
    }

    .navigation-main ul {
        display: none;
    }
    .navigation-main ul.open {
        display: block;
    }
    /* don't use the next one if you want a more condensed menu*/
    .navigation-main ul.open li {
        display: block;
        width: 100%;
    }
}

Check if the funtionality works for you, if you want it more condense you could delete the .navigation-main ul.open li style rule.

edited Apr 05 '18 at 02:46

answered Apr 05 '18 at 02:33

Fecosos

944
7
17

I think that's close, but didn't quite work for me. I get the idea though. Thanks for the input. – AmericanMade Apr 05 '18 at 19:49
What would you want to achieve? Or you solve it adding a missing library? – Fecosos Apr 05 '18 at 20:44
I just want the dropdown nav bar to work. When I put that code in, it didn't change the functionality. Might just be as simple as different class/id names. – AmericanMade Apr 05 '18 at 21:29

Make media nav bar functional on Wordpress site

1 Answers1