Menu dropping items on small tablet portrait size

[chriscob]

I know that ideally I wouldn’t have so many menu items this would be a problem, but my client wants/needs them.  On this site: http://gitedinan.com/wpbg/ menu items are just dropped when the screen gets narrow (just before the dropdown menu kicks in).  I would prefer to have the menu wrap than lose the contact   us link.   Is there anything I can do about this?

Topic

[Jason Bobich]

You could possibly customize it so the drop down menu displays earlier or at a wider viewport size.

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

@media (max-width: 700px){
	/* Copied from responsive.css ... */
	.mobile_nav_select select {background:#ffffff;border:none;color:#000000;}
	#header_content, #access .container { padding:0; }
	#branding .header_logo {float:none;margin-bottom:10px;text-align:center;}
	#branding .header_logo .tb-image-logo img {display:inline;}
	#branding .header-addon {margin:0;position:static;}
	#branding .header-addon-with-text {margin:0;}
	#branding .header-text {text-align:center;}
	#branding .social-media {margin:0;position:static;text-align:center;}
	#branding .themeblvd-contact-bar ul {float:none;}
	#branding .themeblvd-contact-bar li {display:inline-block;float:none;}
	#menu-wrapper { padding:0 0 20px 0;text-align:center; }
	#main-top { display:none; }
	#main-menu { display:none; }
	#main-menu #menu-inner .menu a {font-size:11px;font-weight:bold;line-height:11px;padding:15px 20px;}
	.responsive-nav { display:block; }
	.tb-jump-menu { background:#ffffff;color: #333333; }
}

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[chriscob]

Yes, I always use firebug, and this is in a child theme.

Just to save time, can you tell me if the css above is the original css I will have to figure out how to change, or has it been changed to make the dropdown display earlier or at a wider viewport size?

[chriscob]

When I look at my site with the responsive layouts tool on Chrome, it looks fine, so maybe I’m worrying over nothing.  I don’t have an iPad to check it.

[Jason Bobich]

Are you familiar with @media queries? Checkout the first part where it targets 700px at the top. That is much sooner than current mobile viewport of 480px. So, basically you’re just applying the theme’s mobile header styles at 700px instead of 480px. The average tablet viewport size is about 800px. To be exact the iPad is 768px.

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

You will need to play with what I’ve given you and determine if it is the best solution for you. Your site, and the design of the theme, is fine on most tablets and the iPad. What you’re worried about (about 480px-600px) isn’t realistically a viewport size that comes up with many devices.

• This reply was modified 8 years, 7 months ago by Jason Bobich.

[Author]

Replies