Menu icon Foundation
Toggle Topbar menu on medium screens

Hi,

I'm new to Foundation 6 and just started playing around with and modifying stuff with Foundation 6 in the newest FoundationPress theme..
I have stumbled across a problem I can't seem to solve:

How can I get the topbar menu to toggle on medium screens, too?

I want the mobile topbar to show on small and medium screens. The topbar itself shows up on small and medium screens (by overriding the display-property for medium screens). But if I click on the hamburger icon on medium screens, nothing happens. I can't figure out why because the classes for each element stay the same.

I've attached the specific code for the whole header (I only removed any personal information and URLs) and really hope someone can pinpoint me to the problem or at least give me a hint where to look or what could be wrong.
Every help is appreciated. Thanks in advance!

<header id="masthead" class="site-header" role="banner" data-sticky-container="">
    <div class="title-bar sticky is-at-top is-stuck" data-responsive-toggle="site-navigation" data-responsivetoggle="ecm8k4-responsivetoggle" style="display: none;">
		<button class="menu-icon" type="button" data-toggle="offCanvas"></button>
		<div class="title-bar-title">
			<a href="#" rel="home">NAME</a>
		</div>
	</div>

	<nav id="site-navigation" class="main-navigation top-bar sticky is-at-top is-stuck shrink-handle" role="navigation" style="display: block;">
		<div class="topbar-container clearfix">
		    <div class="top-bar-left show-for-medium">
				<h2><a href="#" rel="home">Logo</a></h2>
			</div>
		    <div class="top-bar-right">
				<ul id="menu-hauptmenue" class="dropdown menu show-for-large" data-dropdown-menu="" role="menubar" data-dropdownmenu="hl1dt4-dropdownmenu">
                    <li id="menu-item-79" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-79" role="menuitem">
                        <a href="#" tabindex="0">Item1</a>
                    </li>
                    <li id="menu-item-205" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-205" role="menuitem">
                        <a href="#">Item2</a>
                    </li>
                    <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107" role="menuitem">
                        <a href="#">Item3</a>
                    </li>
                    <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81" role="menuitem">
                        <a href="#">Item4</a>
                    </li>
                </ul>									

                <nav class="vertical menu" data-accordion-menu="" role="tablist" aria-multiselectable="true" data-accordionmenu="kh29d5-accordionmenu">
                    <ul id="menu-hauptmenue-1" class="vertical menu show-for-small hide-for-large" data-accordion-menu="" role="tablist" aria-multiselectable="true" data-accordionmenu="whaxb4-accordionmenu">
                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-79" role="menuitem">
                            <a href="#" tabindex="0">Item1</a>
                        </li>
                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-205" role="menuitem">
                            <a href="#">Item2</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107" role="menuitem">
                            <a href="#">Item3</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81" role="menuitem">
                            <a href="#">Item4</a>
                        </li>
                    </ul>
                </nav><!-- .vertical .menu -->
		    </div><!-- .top-bar-right -->
	    </div><!-- .topbar-container -->
    </nav><!-- #site-navigation -->
</header>

topbartop-barbreakpointstogglemedium

Hi,

I'm new to Foundation 6 and just started playing around with and modifying stuff with Foundation 6 in the newest FoundationPress theme..
I have stumbled across a problem I can't seem to solve:

How can I get the topbar menu to toggle on medium screens, too?

I want the mobile topbar to show on small and medium screens. The topbar itself shows up on small and medium screens (by overriding the display-property for medium screens). But if I click on the hamburger icon on medium screens, nothing happens. I can't figure out why because the classes for each element stay the same.

I've attached the specific code for the whole header (I only removed any personal information and URLs) and really hope someone can pinpoint me to the problem or at least give me a hint where to look or what could be wrong.
Every help is appreciated. Thanks in advance!

<header id="masthead" class="site-header" role="banner" data-sticky-container="">
    <div class="title-bar sticky is-at-top is-stuck" data-responsive-toggle="site-navigation" data-responsivetoggle="ecm8k4-responsivetoggle" style="display: none;">
		<button class="menu-icon" type="button" data-toggle="offCanvas"></button>
		<div class="title-bar-title">
			<a href="#" rel="home">NAME</a>
		</div>
	</div>

	<nav id="site-navigation" class="main-navigation top-bar sticky is-at-top is-stuck shrink-handle" role="navigation" style="display: block;">
		<div class="topbar-container clearfix">
		    <div class="top-bar-left show-for-medium">
				<h2><a href="#" rel="home">Logo</a></h2>
			</div>
		    <div class="top-bar-right">
				<ul id="menu-hauptmenue" class="dropdown menu show-for-large" data-dropdown-menu="" role="menubar" data-dropdownmenu="hl1dt4-dropdownmenu">
                    <li id="menu-item-79" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-79" role="menuitem">
                        <a href="#" tabindex="0">Item1</a>
                    </li>
                    <li id="menu-item-205" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-205" role="menuitem">
                        <a href="#">Item2</a>
                    </li>
                    <li id="menu-item-107" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107" role="menuitem">
                        <a href="#">Item3</a>
                    </li>
                    <li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81" role="menuitem">
                        <a href="#">Item4</a>
                    </li>
                </ul>									

                <nav class="vertical menu" data-accordion-menu="" role="tablist" aria-multiselectable="true" data-accordionmenu="kh29d5-accordionmenu">
                    <ul id="menu-hauptmenue-1" class="vertical menu show-for-small hide-for-large" data-accordion-menu="" role="tablist" aria-multiselectable="true" data-accordionmenu="whaxb4-accordionmenu">
                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-79" role="menuitem">
                            <a href="#" tabindex="0">Item1</a>
                        </li>
                        <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-205" role="menuitem">
                            <a href="#">Item2</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-107" role="menuitem">
                            <a href="#">Item3</a>
                        </li>
                        <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81" role="menuitem">
                            <a href="#">Item4</a>
                        </li>
                    </ul>
                </nav><!-- .vertical .menu -->
		    </div><!-- .top-bar-right -->
	    </div><!-- .topbar-container -->
    </nav><!-- #site-navigation -->
</header>
Brock almost 4 years ago

I havn't had a good play with F6 yet, but in F5 it was in the settings file if you are using SASS.

See if this helps.

http://foundation.zurb.com/forum/posts/36228-foundation-6-topbar-like-f5

Christopher Wardle almost 4 years ago

Hi Brock,

thanks for the response.
I actually had a look at that thread before and unfortunately it didn't help/solve my problem.

I really don't understand what the problem is in the first place.

Following the docs of Foundation 6 for the responsive navigation ( http://foundation.zurb.com/sites/docs/responsive-navigation.html ), there has to be the "tab bar" with the class ".title-bar" and the attribute "data-responsive-toggle" with the value of the menu you want to toggle, here being "#site-navigation", the big nav element that contains two menus.

The first menu in "#site-navigation" is the "#menu-hauptmenue" (it's a german site for a german customer and WordPress tends to generate class names from the names of the elements set in the admin front end), which is the menu for large screens and works perfectly fine. It has the class ".show-for-large" so it's only being displayed on large screens which is exactly what I want. So far, so good.

The second menu is the "#menu-hauptmenue-1", which is contained inside another nav element (".vertical .menu"). This menu has the classes ".show-for-small", so it should be displayed at small and larger screens. Because I don't want it to be shown on large screens, I added the ".hide-for-large" class. So ultimately, this menu will only be displayed on small and medium screens and that works, too.

What doesn't work, however, is the toggling. As stated above, the "data-responsive-toggle" value is "#site-navigation". What's happening on small screens when I click the hamburger icon is that the display property for the title-bar is set from "block" to "none" and the display property for the #site-navigation" element is set from "none" to "block". The result is a responsive, mobile-layout menu that appears when I click the button and disappears when I click it again.

Switching to medium screens, all classes and data attribute values stay the same, which I can see viewing the code in the Google Chrome Dev Tools. But at the breakpoint from small to medium screens the display property of the title-bar is set from "block" to "none" and the display property of the "#site-navigation" is set from "none" to "block". That's exactly what's happening when I click the hamburger icon on small screens (but ONLY when I click the button). And when I then click the hamburger icon on medium screens, the toggling doesn't work, the mobile-layout menu is staying there and nothing happens.

It seems to me like I'm missing a setting in Foundation-Sites itself but I can't find it. Searching the whole theme for "$topbar-breakpoint" has only one result in the changelog.md but the variable itself doesn't seem to exist. And I'm honestly out of clues where to look or what to look for.

I don't think it would be impossible to do, though, so I really hope there's a solution I just didn't see, yet.

Brett Mason almost 4 years ago

I'm not familiar with FoundationPress but I've just had a look at the header.php file.
You can modify the title-bar code and add this to it:

data-hide-for="large"

This should show the title bar on any screen size other than large. If you can explain exactly what you want to show at what size I'll try and help more. Specifically, I see FoundationPress uses the accordion menu on small only - is it this you want on medium too?

Christopher Wardle almost 4 years ago

Hi Brett,

first of all: I added the attribute to my title-bar. AND IT WORKED! Oh my god, I can't thank you enough :D
I was having such a hard time trying to figure it out. Now it all works the way I wanted it to.

Now....after calming down again, I will try to explain what I wanted to achieve:

The "standard" mobile top-bar should be displayed on small screens as usual, but also on medium screens. In both cases it should be the accordion menu and I styled it to cover the whole page (I got the inspiration for that from http://bluecadet.com/ . I love their layout and wanted to have something similar).

But there's one question remaining:
I tried to achieve this by adding scss code for the top-bar, the title-bar and so on and what I essentially did was overriding the display values for each breakpoint and set an "!important" behind it.
So I had my "_custom-topbar.scss" file with something like
SCSS
.title-bar {
width: 100%;
@include breakpoint(medium down) {
display: block !important;
}
@include breakpoint(large) {
display: none !important;
}
}
.top-bar {
@include breakpoint(large) {
display: block !important;
}
}

So the title-bar, which is basically the mobile layout top-bar, was hidden on large screens but shown on medium and small screens and the top-bar was the menu for large screens. And all elements showed up correctly, but the toggling of the menu on medium screens didn't work.
Do you know why that could be the case? Any additional modfication that 'data-hide-for="large"' does?
I'd appreciate any further explanation. But still, a great thank you for your help, it saved me a lot of headaches :D

Brett Mason almost 4 years ago

Hey Christopher

Glad that little bit worked, and thanks for the explanation. You can read about that code here: http://foundation.zurb.com/sites/docs/responsive-navigation.html

So I've just had a look and got it working the way you want, you need to do the following:

  • Change the Top Bar class from show-for-medium to show-for-large in header.php
  • Within library > navigation.php on line 46 change change the class show-for-small-only to hide-for-large
  • Set .top-bar-right to be 100% width on medium (by default its only on small and you can't change this without extra code) something like:
.top-bar-right {
    @include breakpoint(medium only) {
        width: 100%;
    }

Let me know how you get on!

Andrew almost 4 years ago

This thread saved my bacon today. Thanks Brett!

Brock almost 4 years ago

Nice one Brett - Perfect for Foundation 6!