Menu icon Foundation

Developer

My Posts


My Comments

Christopher Wardle commented on Christopher Wardle's post almost 4 years

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

Christopher Wardle commented on Christopher Wardle's post almost 4 years

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.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Christopher Wardle's post almost 4 years

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

You commented on Christopher Wardle's post almost 4 years

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.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content