Replacing menu button on mobile with always-expanded items

  • pcbernabeu

    (@pcbernabeu)


    7 years, 5 months ago

    Hello,

    I would like to ask for help with the mobile view. I’ve been struggling to find a way to replace the menu button with the simple, always-expanded items. They’re just three items. I don’t have access to editing my theme (‘Twenty Twelve’) because of tight hosting controls in my institutions. I just have access to the ‘Additional CSS’ option, which can go quite a long way, after all–and I hope so too for this matter.

    Thank you very much,

    Pablo

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    7 years, 4 months ago

    Do you have access to the Customizer? Or can you install a plugin? The inability to add even CSS code would be problematic. You could add style blocks within post and page content in text/code view, but then you cannot ever use the visual view because the CSS code will become corrupted.

    Anyway, use your browser developer tool’s element inspector to identify the CSS that hides the menu and display’s the button. Override these rules so the menu always is displayed and the button never is. For example, in twentytwelve, the rule to show the button that you need to override is

    .main-navigation ul.nav-menu.toggled-on, .menu-toggle {
    display: inline-block;
}

    Add the same overriding rule where ever you can, changing inline-block to none. If you can, the Additional CSS panel of the customizer is the best place for this. Do something similar for the code that hides the regular menu.

Viewing 1 replies (of 1 total)

The topic ‘Replacing menu button on mobile with always-expanded items’ is closed to new replies.