Collapsing (responsive) primary nav menu

Tagged: collapsing, navigation, responive

This topic has 15 replies, 4 voices, and was last updated 9 years, 12 months ago by Wes.

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
February 23, 2014 at 2:17 pm #10885
robwallace
Customer
Hi Wes et. al.
LOVE Epik, and it’s been GREAT for helping me as a beginner to learn to modify CSS for WP.
One thing that would help the user experience (IMO) on phone-size devices would be a collapsing menu. I find that the menu tends to take up all of the screen real estate in smaller screens and can be confusing in that format.

So, I set off to add a collapsing function to screens below 767px width as per this Genesis-specific tutorial here: http://www.robincornett.com/collapsible-navigation/

My site is http://50.22.11.60/~robin/

I feel like I’m <this> close, but in my newbie-ness, I can’t quite get the syntax right for hiding the widget-area primary menu. Wes (or anyone else), do you have any suggestions?

Thanks in advance, and thanks again for a great theme!
-Rob
February 23, 2014 at 7:36 pm #10886
kronos
Customer
He mentioned in another thread that he’ll be adding this to the theme by default in a future update. Here is one of the links that I found from the forum – http://bit.ly/Ob2bQ7 That’s what I used.

Make sure you remember to add the javascript code in your functions file, as well as the javascript file inside of the “lib” folder. If you leave one of those steps out then it won’t work. So make sure you have the javascript added.
February 23, 2014 at 11:24 pm #10895
robwallace
Customer
Yeah, I really think that collapsing menu would pretty much make Epik perfect! I had tried that tutorial previously but it wasn’t working for some reason. I just gave it another shot and it’s working fine (I just need to tweak the CSS a bit now).

Many thanks!
February 23, 2014 at 11:49 pm #10897
robwallace
Customer
Well, now that I play with it, maybe not exactly “fine” – LOL! When I implement it in Epik it seems to have some differences from the sample. For instance, it requires a manual toggle to turn it back on when a window is resized and it also seems to create a permanent toggle switch in the nav bar. The scheme at my original link seems much more elegant (see the example on the author’s own site). But in either example, I’m thinking there’s just some epik-specific tweak I’m missing? Appreciate the help!
February 24, 2014 at 11:39 am #10910
robwallace
Customer
I’ve kept the menu on the test site at http://50.22.11.60/~robin/. Note that if you toggle while the window is narrow, it doesn’t automatically return when the window is widened (EDIT: ONLY IF YOU CLICK ON THE LINK WHEN THE WINDOW IS NARROW. IF YOU DON’T TOGGLE WHEN SMALL, IT WORKS FINE). I’d appreciate anyone’s help/suggestions/advice in:

– removing the toggle link when the window is full width (currently showing as a purple hotlink rectangle because I haven’t altered the CSS (I assume this is because I’m using the “purple” theme color (just modified)) .

– returning the menu to “visible” by default if the user goes from a narrow window to a wide one. (I’m having trouble describing this, but basically making it function JUST like the menu on this appfinite site!)

Many thanks. Y’all rock.
-R
February 26, 2014 at 6:09 am #10960
kronos
Customer
Did you get it working like you needed?
February 26, 2014 at 8:44 am #10979
robwallace
Customer
Close, but not quite. It’s still up at http://50.22.11.60/~robin/.

I’m trying to figure out:
A)how to get rid of the toggle link (currently showing as a purple box) when screen is full width and
B)how to get the menu to return to visible if you toggle it when narrow, then widen the screen. (that is, menu always visible by default in wide mode)

Many thanks!
February 26, 2014 at 8:48 am #10982
Wes
Moderator
@ronwallace try adding this to your css file (anywhere in the desktop/main css part) –
```
.menu-toggle {
    display: none;
}
```
and that will remove that purple button that shows up when viewed in full width, and the regular icon will still show up in Responsive mode.
February 26, 2014 at 11:30 am #10994
robwallace
Customer
Almost! When I put that snip in the media query area for desktop, the button strangely shows up ONLY in desktop. If I put it outside the media query (e.g. in the defaults) it removes it altogether. Which is capital-G Great BUT…

If a user reduces the screen below 767 wide and toggles the menu (on/off), the main menu doesn’t reappear when the window goes back to full size (and the only way to get it to reappear is a browser refresh).

I’m thinking I need to add an explicit command for .menu-primary to the desktop media query?

Edit: I’ve left the test page in this above state if you wanted to take a look…
February 26, 2014 at 4:40 pm #11003
Wes
Moderator
I have no idea why thats happening…it could be a jquery thing, but I’m not sure. Although I wouldn’t worry about it at all, because your viewers are either going to view your site from a mobile device, or a desktop/laptop. If they use a mobile device, they won’t have this issue since they can’t resize the browser….and if they’re using a desktop/laptop, they won’t be resizing your site. 99.9% of them will just view your site as it is. When I test it, it looks perfectly fine to me.
February 26, 2014 at 4:46 pm #11005
robwallace
Customer
Agreed, it’s a small concern indeed. If I get it figured out, I’ll post here for anyone else working on the same function.

Thanks for all your help and thanks again for a most-awesome theme!
February 26, 2014 at 4:50 pm #11009
Wes
Moderator
You’re Welcome!

I’ll have it added to the theme by default in the next update.
April 23, 2014 at 10:31 am #11851
SteveW
Customer
I just came a cross this thread while trying to figure out why epik based site doesn’t collapse the main menu like the theme demo does.

Has this been added to the theme yet?

Thanks.
April 23, 2014 at 9:06 pm #11857
Wes
Moderator
Yes I’m actually working on it as we speak. As soon as the next update is available you’ll be able to use it. I should have this ready in the next day or two. Check this forum, or Twitter – http://twitter.com/wesstraham or http://twitter.com/appfinite for any updates if you’re interested.
April 24, 2014 at 8:44 am #11863
SteveW
Customer
Thanks Wes. That is great to hear. Love this theme btw.
April 25, 2014 at 11:45 am #11888
Wes
Moderator
I released version 1.4 last night. So if you haven’t made any changes to your theme, then you can redownload and use it. If you have made changes then take a look here – https://appfinite.com/changelog/epik-log/ to see what was changed.
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.