Make mobile menu (hamburger) always visible

[djohnson]

I am attempting to circumvent the ongoing issue I am having with extra-long menus in the top nav skin. In most of my projects I have 4 or 5 menus, which usually work fine in English, but when localized to German, French, or Spanish, I will invariably have something that word-wraps the menu at smaller window sizes.

I've tried goosing some extra space for the menus by reducing the gaps between menus and reducing the font size, but this isn't very pretty or fair to readers with vision like mine. (As I mentioned here viewtopic.php?f=9&t=26995)

I thought I would try just having the mobile menu (aka hamburger) always visible. I can do this by setting the Tablet and Mobile breakpoints to a large value (the Flare UI allows a max of 5000).

The trouble with this is that all of the other elements are affected: the standard Flare Home page, for example, stacks all the elements rather than laying them out normally.

I've looked at the CSS for the built site to try to figure out how to specify the breakpoint for just the mobile menu but I can't figure it.

Does anyone have any suggestions?

(I considered plugging in the complete Foundation framework as Dave Lee suggested here viewtopic.php?f=9&t=27455, but I suspect there will be a learning curve that I can't afford right now.)

[chrisj]

If I'm understanding correctly, it sounds like you can achieve what you want by changing the breakpoints for tablet and mobile in the target, but this also changes the styling of other elements. If that is correct, rather than looking for the hamburger menu in the CSS to only change it (you can't do this, as you've discovered), go the opposite route and just delete all of the styling you don't want at each of those breakpoints. A quick way to do this is to open your stylesheet in the internal text editor and do CTRL+F to find the @media style for mobile and tablet.

[djohnson]

Thanks, Chris; you made me realize that I actually could modify the hamburger and the menu "bar" in CSS. Like those bad guys in Raiders, I was digging in the wrong place!

What I ended up doing was use Chrome to inspect the code & styles of a "normal" help system as I reduced the window size over the Tablet transition (1280 to 1279 pixels wide).

I found that I could add this to my MainStyles.css

Code: Select all

@media only screen and (max-width: 9999px) {
     /* Hide menu */
     ul.navigation { display: none; }

     /* Show hamburger */
     nav.tab-bar .menu-icon { display: block; border: none; z-index: 100; top: 50%; margin-top: -24px; position: absolute; right: -13px; left: auto; }

     .tab-bar .menu-icon span { height: 48px; width: 48px; display: block; top: 10px; background: transparent url("../Images/Menu.png") no-repeat center center; }
}

I also copied the Menu.png graphic to my /Resources/Images folder. This works like a charm!

The 9999px is kind of arbitrary; the Flare UI won't let me enter a value larger than 5000px, but with ultra wide screens, I figured I better go big!