Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 3, 2015 at 3:09 am #79036
    convey
    Participant

    Hello –

    I’m developing a site for a client using Catch Base. The primary menu has only a few items, and the client would prefer it if it was still visible on narrower layouts, without the mobile menu icon replacing things until a narrower threshhold.

    Is this something we can customize (I’m not afraid to dig into the .js or .css , just need pointers on what to look for.)

    Thanks in advance for any suggestions.

    November 3, 2015 at 10:25 pm #79072
    Sakin
    Keymaster

    @convey: You can try adding in the following css in “Appearance => Customize => Theme Options => Custom CSS Options” box:

    @media screen and (max-width: 990px) {	
	.nav-primary { display: block; }
	#mobile-header-left-menu.mobile-menu-anchor { display: none; }
}
    November 4, 2015 at 12:48 am #79081
    convey
    Participant

    Thank you very much for the reply.

    That is a step in the right direction. Now the primary menu stays active as the window shrinks.

    However, it now stays active for all sizes, even the smallest devices.

    Could it be because this custom CSS comes at the very end? Perhaps the original CSS which handles the responsiveness to window size has to be in a specific order?

    If there’s any logic I can add here at the end, to keep the mobile-friendly menus below a specified size, please let me know.

    November 4, 2015 at 1:27 am #79082
    convey
    Participant

    Hi again, I think I figured this out on my own… I adjusted the custom CSS to the following:


    @media     screen and (min-width: 701px) and (max-width: 990px) {
    .nav-primary { display: block; }
    #mobile-header-left-menu.mobile-menu-anchor { display: none; }
    }

    This leaves the existing breakpoint at 700px alone (which is where our menu no longer looks good on smaller windows), while having the full-size primary menu up to the 990px breakpoint (and beyond).

    This seems to be working fine on the live site, but if you have any advice on better practices or potential pitfalls, please let me know.

    Thanks again.

    November 4, 2015 at 8:06 am #79088
    Sakin
    Keymaster

    @convey: This looks fine. Not it will show from devices width 701 and 990px.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Change responsiveness threshholds for primary menu’ is closed to new replies.