Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • November 13, 2013 at 7:00 pm #17173
    CWG32813
    Member

    I 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 #17174
    CWG32813
    Member

    To 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 #17176
    Sakin
    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 #17190
    CWG32813
    Member

    hmm. 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 #17191
    CWG32813
    Member

    The 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 #18374
    CWG32813
    Member

    Can 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 #18377
    Sakin
    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 #18382
    CWG32813
    Member

    That did work thank you. I added .site { overflow: auto; } and it now reflects all items.

    March 28, 2014 at 2:03 pm #23055
    nadaadehn
    Member

    HI,
    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 #23057
    Sakin
    Keymaster

    @nadaadehn: Please post in your site URL.

    March 28, 2014 at 2:44 pm #23060
    nadaadehn
    Member

    http://ka-collection.com/index1.php

    thank you

    March 28, 2014 at 11:13 pm #23138
    Sakin
    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 #23639
    nadaadehn
    Member

    Thank 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 #23663
    Sakin
    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 #23668
    nadaadehn
    Member

    how much this will cost me?

    March 31, 2014 at 5:23 pm #23669
    Sakin
    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 #23670
    nadaadehn
    Member

    Thank you very much.
    was unable to download from the link.
    can you please share on my dropbox [email protected]

    March 31, 2014 at 5:58 pm #23671
    Sakin
    Keymaster

    @nadaadehn: Strange. I am able to download it from link. Anyway, I have shared with your email in your dropbox.

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Responsive Menu’ is closed to new replies.