Tagged: menu, responsive
- This topic has 17 replies, 3 voices, and was last updated 11 years ago by
Sakin.
-
AuthorPosts
-
November 13, 2013 at 7:00 pm #17173
CWG32813
MemberI have my menu setup correctly and it looks great in desktop view. In responsive, because I have so many subpages, the menu gets cut off at the height of the page content so i can not access subpages lower in the list. Is there any way to make the responsive menu only containing only the page you are on and it’s subpages?
If that cant be done, how would I change the menu to a standard select box?
If that cant be done, how can I just make sure all of the items will display?
test site here: “http://alpha.chrispyg.com” – please excuse the crappy test images as I await new photography. :-p
November 13, 2013 at 7:03 pm #17174CWG32813
MemberTo reproduce the issue, select products->stamped products, make sure your browser is less that 600px wide, click the menu and try to scroll to the bottom of the menu.
November 13, 2013 at 7:18 pm #17176Sakin
Keymaster@CWG32813: You cannot do that. It’s designed like that. It will show all the menus. But when I check in your site from my iPhone, it was easy to navigate.
If you like to change to select box then you can add the following CSS in “Appearance => Theme Options => Custom CSS” box.
@media screen and (max-width: 767px) { .sb-holder { display: none; } .tinynav { display: block !important; width: 100%; } }
November 13, 2013 at 11:49 pm #17190CWG32813
Memberhmm. That is an ok solution, implemented now, but anyway to make it a bit more stylistically integrated. Open to suggestions.
November 13, 2013 at 11:50 pm #17191CWG32813
MemberThe problem with the responsive menu was that it cut off the pages at the bottom of the list, the best solution would be making sure that the list does not get cut off.
As an aside, can i suggest that the custom css not get just pumped into the html? I think this text should be saved to an external css document, otherwise, it makes the markup really poor. I worked around that by adding a link in the header to a custom-styles.css file.December 17, 2013 at 9:08 am #18374CWG32813
MemberCan you look at the site here alpha.chrispyg.com and tell me how (on iphone) that I can get all of the sub-pages to display in the menu? It cuts off half-way through the list. If I cant do that, how can I show only the top-level pages when in responsive mode
December 17, 2013 at 10:22 am #18377Sakin
Keymaster@CWG32813: Can you try adding in the following CSS in “Appearance => Theme Options => Custom CSS” box.
.site { overflow: auto; }
This will make the menu overflow to fit in the screen. So, you can scroll down and see all the menu items.
December 17, 2013 at 10:43 am #18382CWG32813
MemberThat did work thank you. I added
.site { overflow: auto; }
and it now reflects all items.March 28, 2014 at 2:03 pm #23055nadaadehn
MemberHI,
is it possible to make the submenu in a div and not a select list.
any help will be appreciated.March 28, 2014 at 2:29 pm #23057Sakin
Keymaster@nadaadehn: Please post in your site URL.
March 28, 2014 at 2:44 pm #23060nadaadehn
Memberhttp://ka-collection.com/index1.php
thank you
March 28, 2014 at 11:13 pm #23138Sakin
Keymaster@nadaadehn: If you don’t like select box in responsive menu and want it like in your desktop view. Then you can build child then and then copy catchbox_scripts_method() function and delete the following code
//Responsive Menu wp_register_script('catchbox-menu', get_template_directory_uri() . '/js/catchbox-menu.min.js', array('jquery'), '1.1.0', true); wp_register_script('catchbox-allmenu', get_template_directory_uri() . '/js/catchbox-allmenu-min.js', array('jquery'), '201301503', true); //Check is secondayand footer menu is enable or not $options = catchbox_get_theme_options(); if ( !empty ($options ['enable_menus'] ) ) : wp_enqueue_script( 'catchbox-allmenu' ); else : wp_enqueue_script( 'catchbox-menu' ); endif;
Then add the following css in your child theme style.css file or in “Appearance => Theme Options => Custom CSS” box.
@media screen and (max-width: 960px) { #branding ul.menu { display: block; } }
March 31, 2014 at 12:16 pm #23639nadaadehn
MemberThank you very much for your help.now the menu is showing as normal.
what i wanted is an icon and once clicked the menu will open in a div below it.http://ka-collection.com/index1.php/
what i want is http://ka-collection.com/wp-content/uploads/2014/03/Untitled-11.jpg
March 31, 2014 at 4:22 pm #23663Sakin
Keymaster@nadaadehn: Hum for that you need to add extra jquery script and custom css. This might required you to hire a customizer to work for you.
I have created child theme which replace the old menu with new one. Install this child theme https://www.dropbox.com/s/t69xxjiihvy4qxr/catch-box-child-menu.zip
March 31, 2014 at 5:18 pm #23668nadaadehn
Memberhow much this will cost me?
March 31, 2014 at 5:23 pm #23669Sakin
Keymaster@nadaadehn: First try download the child theme that I gave you and install it. Then you will see your selectbox menu in div like in your screenshot.
If you want to hire customizer then request for quote at http://catchthemes.com/hire-customizer/March 31, 2014 at 5:43 pm #23670nadaadehn
MemberThank you very much.
was unable to download from the link.
can you please share on my dropbox nadaadehn@hotmail.comMarch 31, 2014 at 5:58 pm #23671Sakin
Keymaster@nadaadehn: Strange. I am able to download it from link. Anyway, I have shared with your email in your dropbox.
-
AuthorPosts
- The topic ‘Responsive Menu’ is closed to new replies.