- This topic has 12 replies, 4 voices, and was last updated 11 years, 11 months ago by
.
-
Posts
-
I'm using the great Magazine Pro theme. The problem is subcategories in the top menu. When on a table (or any mobile device) you only get to see top level categories, e.g. "Cars". You cannot see the submenu for subcategories on the first level, e.g. Audi, BMW, etc. If you click "Cars" you get a dropdown showing the subcategories. However, this launches the menu to go to the Cars page and you will never be able to select the subcategory in time and go to the subcategory page.
I noticed that this theme, like News Pro, will work with the dropdown properly only if the first category on the navbar has no URL and uses a # as an entry and is, in essence, just a placeholder. Any thoughts on this? Try it yourself. In the demo you'll see that "Layouts" works perfectly but "Sample" won't stay open and allow you to choose a submenu item, it will go directly to the Sample page.
Site URL please?
Wow - thanks for the quick reply.
Use that one in any mobile phone.
Thanks for the links. I saw the Brad Potter article but his site suffers from the same problem. Regarding the second one, it's a tab button that does a nice job for what it does but it's not an optimal solution from a styling standpoint.
Question - I have an existing HTML5/CSS3 responsive menu on the rest of my site. I'm wondering if there is a way I can insert a standard HTML5 / CSS3 menu easily into the Magazine Pro theme or any Genesis theme for that matter. I find them extremely hard to work with since so many things require filters and seem like backing into replacement. On a regular WordPress theme I can edit the header files but that's not so easily done with Magazine Pro. I'd sooner replace my responsive menu with that one.
Actually I see Brad's example now. Perhaps that will work and I can style it appropriately. I don't know why he isn't using this and everyone else - at least it works on all mobile devices. Thanks.
add this code in your style.css file
@media only screen and (max-width: 600px){ .responsive-menu .menu-item, .responsive-menu .sub-menu { display: block; width: 100%; } .responsive-menu .sub-menu{ opacity: 1; left: auto; position: relative; } }the code is for 240px to 600px mobile device
see this site's menu on your device http://demo.pwdtechnology.com/think/ . I think that you are wanting this kind of design
Thanks genwrock - I tried Brad Potter's tutorial. Had to hack the js a bit to get it to work properly but it's working like a charm as the primary menu. This is the way it should have worked from the beginning, although I prefer using CSS and not JS whenever I can avoid it. For the moment I need to focus on content and in a little bit on the design.
PS Nice site and nice work.
genwrock,
Thanks for the mention!
boldplan,
Regarding the second one, it’s a tab button that does a nice job for what it does but it’s not an optimal solution from a styling standpoint.
The idea behind that styling technique was to use the button styling that's already being used in your website's CSS. You can change it up to look like anything you want with just a little CSS work.
although I prefer using CSS and not JS whenever I can avoid it.
I agree with you on using CSS and not JS whenever possible, and that's why I came up with that method.
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉Hi John - I've been to your site before, very helpful. It's a great workaround and very grateful that you provide a solution at all. For most sites it will probably work like a charm, I wish it could fit in with my design. I'm just surprised that nobody at Studiopress saw this while they were testing the design and decided to make some changes. The responsive menu for Magazine Pro are impractical as is and don't work properly with a dropdown menu. It's an otherwise great theme and just needs to go the extra but very important mile. As I have other things I need to do, I may hire someone to just get done what I think should be done... maybe someone here if they want to contact me. 😉
Thanks again John and wishing you a happy 2014.
Hi boldplan,
I apologize for the delayed response - I've been incredibly busy lately.
If you've found a solution or hired someone to work it out for you, great! But if not and you'd like me to take a look at what needs to be done and shoot you a price, you could use the contact form on my website to get that started.
Otherwise, thanks for the new year's wishes, and I hope you have a good 2014 as well.
John
John Sundberg | blackhillswebworks.com
A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉Hi boldplan,
I used Magazine pro theme too, I met this problem of subcategories in the top menu too. The solution of using # as an entry works perfectly !
Thank you !
@john - thanks, I'm a bit late responding to your post. Will shoot you an email when I can figure out what we're going to do.
@hlegall - Using the # is not a solution. It's the problem. You cannot have a valid entry for the root menu item as a "#" because it's not a valid URL. If I want to have a landing page for Cars and then one for audi, bmw, etc. then you cannot use that symbol and need the actual page URL.It's unfortunate because, IMHO, the menu needs replacing. Some other themes work better and collapse like Twitter bootstrap as well. The lower menu using subcategories results in a large mess when collapsed on a mobile phone that is just impractical. Need to do the upper menu like the lower menu. Trying to figure out whether to use a replacement plugin or a custom menu and neither is a great solution.
- The forum ‘General Discussion’ is closed to new topics and replies.