How to get sidebar widgets to show in mobile menu

  • bwsart

    (@bwsart)


    5 years, 3 months ago

    I want my mailchimp widget form (which is in the sidebar in my full screen view, below the main menu items) to also appear below the rest of my main menu items when in mobile view. Currently, they don’t appear anywhere when in mobile view.

    Any ideas?

    I can add the form to my pages, but I want it available when people first open my site on their mobile devices.

    Thanks!

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • pmmueller

    (@pmmueller)

    5 years, 3 months ago

    I’m not sure if that is possible out of the box as the concept of Fukasawa is as follows:

    • Viewport > 1000px show full sidebar and content
    • Viewport < 1000px show sidebar logo, content and menu button

    The rest of the sidebar (everything underneath the logo) is hidden with CSS: 

    .main-menu, .widgets, .credits {
    display: none;
}

    At the same time the mobile menu only shows the primary menu. To add anything to the mobile menu you will have to add it to the primary menu, and you cannot add a widget to a menu (at least until everything like widgets and menus are a block, but that will still take a while).

    —
    Here’s an example of a similar problem:

    In Germany we have to make links to Impressum (Imprint) and Datenschutz (Privacy) available with one click:

    • On desktop these two links were at the bottom of the sidebar.
    • On mobile the links they were not there.

    I did not want the links in the main menu, so I created a child theme and added the two links manually to the header.php after the primary menu is loaded.

    That is fairly easy, but to include a widget like Mailchimp’s form is not as straightforward as widgets can only be added to a widget area.

    Before you ask: I wouldn’t know how to do that ;-(

    • This reply was modified 5 years, 3 months ago by pmmueller.
    Thread Starter bwsart

    (@bwsart)

    5 years, 3 months ago

    Thank you so much for your reply! It’s a very helpful explanation.

    Quick question: you said you created a ‘child theme’. What do you mean by that?

    Theme Author Anders Norén

    (@anlino)

    5 years, 3 months ago

    Hi @bwsart,

    You can read more about child themes here: http://codex.wordpress.org/Child_Themes

    You can register an additional widget area and output it within the div.mobile-navigation element. It’s pretty easy on the PHP end of things (you’d need to add a register_sidebar() call to a functions.php file in the child theme, copy the header.php file from Fukasawa to your child theme, and update it with a dynamic_sidebar() call where you want the widget to be displayed), but you’d also need to add some custom CSS to make sure the widget is displayed correctly.

    If you’re not comfortable with coding yourself, you can hire an agency to do it for you. It should be a pretty quick update.

    — Anders

    lisia

    (@lisia)

    5 years, 3 months ago

    Hallo@pmmueller.
    In Austria we also need Impressum (Imprint) and Datenschutz (Privacy) available with one click.
    I took following way:
    In customizer css I defined a new class daten (the same like credits)

    .daten { font-size: 13px; }
    .daten p {
    color: #999;
    line-height: 160%;
    text-align: center;
    }
    .daten p a { color: #999; }
    .daten p a:hover { color: #666; }

    In footer.php I added at the beginning the following code, of course wirh the correct a href:

    <div class=”daten”>
    <p>Datenschutzerklärung | Impressum
    <p>© <?php echo date( ‘Y’ ); ?> “><?php bloginfo( ‘name’ ); ?>.</p>
    </div>

    It works fine with desktop screen and in mobile version.

    Best regards lisia

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to get sidebar widgets to show in mobile menu’ is closed to new replies.