This is searchable archive of our old support forums, which operated from 2012 - 2016. To find out how to get support for your current theme, please visit our support page.

Changing the responsive behavior for primary nav on tablets

  • Creator
    Topic
  • #15197
    GSAwebdeveloper
    Participant

    I would like to show the #access as normal for tablet portrait views. Have combed the theme files looking for a way to remove the inline style display:none which comes in at tablet widths. Any suggestions would be helpful.

    My goal is to hide the .btn-navbar button and just have the #access showing all the time rather than toggleMenu on click btn-navbar for tablets in portrait.

    I plan to keep the toggleMenu for mobile phones.

    Any suggestions for the best way to accomplish this would be much appreciated.

    thanks,

Viewing 7 replies - 1 through 7 (of 7 total)
  • Author
    Replies
  • #15198
    Jason Bobich
    Keymaster

    Hello,

    Are you using one of the starter child themes, opposed to just a blank one?

    #15199
    GSAwebdeveloper
    Participant

    Hi Jason —

    thanks for responding so quickly. I am using blank child theme.

    #15200
    Jason Bobich
    Keymaster

    No problem. Ok, in your Jump Start parent theme, checkout style.css. This is where the CSS part of it happens. You’ll see these parts, which correspond to this:

    /* =Optimized for Tablets
    ------------------------------------------------- */
    
    @media (max-width: 992px) {
    
    	...
    	/* Primary Navigation */
    	#access {
    		background: #f7f7f7;
    		display: none;
    		margin-bottom: 10px;
    	}
    	#access li {
    		border: none;
    		float: none;
    		padding: 0;
    	}
    	#access #primary-menu > li:first-child > a {
    		-webkit-border-radius: 3px;
    		-webkit-border-bottom-right-radius: 0;
    		-webkit-border-bottom-left-radius: 0;
    		-moz-border-radius: 3px;
    		-moz-border-radius-bottomright: 0;
    		-moz-border-radius-bottomleft: 0;
    		border-radius: 3px;
    		border-bottom-right-radius: 0;
    		border-bottom-left-radius: 0;
    	}
    	#access li li a {
    		padding-left: 20px;
    	}
    	#access li li li a {
    		padding-left: 30px;
    	}
    	#access .sf-menu ul {
    		border: none;
    		margin: 0;
    		position: static;
    		width: auto;
    	}
    	#access .sf-menu ul .sf-sub-indicator.icon-caret-right {
    		position: static;
    		right: inherit;
    	}
    	#access .sf-menu ul .sf-sub-indicator.icon-caret-right:before {
    		content: "\f0d7";
    	}
    	.btn-navbar {
    		border: 1px solid #eeeeee;
    		border-bottom: none;
    		-webkit-border-top-left-radius: 3px;
    		-webkit-border-top-right-radius: 3px;
    		-moz-border-radius-topleft: 3px;
    		-moz-border-radius-topright: 3px;
    		border-top-left-radius: 3px;
    		border-top-right-radius: 3px;
    		color: #666666;
    		display: inline-block;
    		outline: none;
    		margin-left: 5px;
    		padding: 4px 10px;
    	}
    	...
    
    }

    Essentially it’s setting #access to display:none; and then the opposite for .btn-navbar.

    So, you’d need to modify that behavior from your child theme’s style.css.

    Now there’s also another part that’s done with javascript in theme.js. In order to edit this, you’ll need to enqueue your own version of /assets/js/theme.js from your child theme. Just checkout one of the starter child themes for an example of how to do this:

    https://github.com/themeblvd/Child-Themes/blob/master/jumpstart-default/functions.php#L18

    After you’ve copied theme.js to your child theme and enqueued it from your child theme’s functions.php. You’ll see in there where you can change the viewport size of where the mobile navigation kicks in.

    #15204
    GSAwebdeveloper
    Participant

    Thanks. The toggle menu on mobile is showing and hiding too fast to click on the items in the menu. When you click the button the menu slidesdown but almost immediately closes again rather than staying open. Maybe somehow I messed up how I enqueued the script or something??

    #15205
    Jason Bobich
    Keymaster

    Hmm, is there a link to somewhere I can see the issue?

    #15214
    GSAwebdeveloper
    Participant
    #15228
    Jason Bobich
    Keymaster

    So it looks like the issue is because you don’t have your new theme.js file enqueued properly. If you view the source of your site, you can see that Jump Start’s default one is still being used.

    I think what’s happening is that you’ve got the javascript showing it, but then your CSS conflicts with it. Are you enqueueing your new theme.js file from your child theme’s functions.php? How are you doing it?

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.