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.

Reply To: Menu dropping items on small tablet portrait size

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 – 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.