October 29, 2012 at 2:54 am
#396
Keymaster
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.