Title: Menu too responsive Last modified: July 6, 2017 --- # Menu too responsive * Resolved [designminette](https://wordpress.org/support/users/designminette/) * (@designminette) * [8 years, 11 months ago](https://wordpress.org/support/topic/menu-too-responsive/) * Hi there How can I change the coding for the menu in the CSS editor, or maybe there’s an obvious place I missed? Currently it should display the bootstrap menu, but apparently, my desktop’s screen is perceived as too small, because it displays the drop-down menu like it would on a tablet or smartphone screen. When I change the view on my browser to 90% instead of 100%, it displays the correct bootstrap menu (not sure my terms for the menus is technically correct, but I’m sure you know what I mean)… So I don’t want to change the actual menu settings, just the screen width where it decides to flip from desktop view to mobile view. I have enough space to allow for the wider menu. Viewing 8 replies - 1 through 8 (of 8 total) * [Gary Bairead](https://wordpress.org/support/users/gary-barrett/) * (@gary-barrett) * [8 years, 11 months ago](https://wordpress.org/support/topic/menu-too-responsive/#post-9296685) * Hi there, * This thread is posted in the support forum for the Sketch theme: * [https://wordpress.org/themes/sketch/](https://wordpress.org/themes/sketch/) * Is your site using Sketch? * > Currently it should display the bootstrap menu * Sketch doesn’t use a bootstrap menu. * Can you post a link to your site so we can take a look at it? It would help clear things up. * The site listed in your profile is currently hidden behind a maintenance plugin, so we can’t see it. * Thanks 🙂 * Thread Starter [designminette](https://wordpress.org/support/users/designminette/) * (@designminette) * [8 years, 11 months ago](https://wordpress.org/support/topic/menu-too-responsive/#post-9296742) * Hi Gary. I disabled the Maintenance mode. I’m still in the planning stage of my website, so I’m using dummy images. As I said, I’m not sure about the menu terminology. I want the menu items to be next to each other from left to right. Currently, I have the menu button top right, and I have to click on it to display the menu. * [Gary Bairead](https://wordpress.org/support/users/gary-barrett/) * (@gary-barrett) * [8 years, 11 months ago](https://wordpress.org/support/topic/menu-too-responsive/#post-9296832) * Thank you for making the visible. It is using Sketch 🙂 * > I don’t want to change the actual menu settings, just the screen width where > it decides to flip from desktop view to mobile view * The mobile menu with the hamburger icon (the 3 horizontal lines) will appear if your browser is narrower than 1280px. * Please try adding the css below to the customizer in Appearance > Customize > Additional CSS. It should make the mobile menu only appear on screens narrower than 769px. * You can change that min-width value to whatever size in px you prefer. * ``` @media screen and ( min-width: 769px ) { .menu-toggle { display: none; } .site-logo { max-height: 100px; } .has-site-logo .main-navigation { height: 100px; } .has-site-logo .main-navigation > div, .has-site-logo .main-navigation > ul { position: relative; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .main-navigation { font-size: 0.8125em; line-height: 2.09231em; clear: none; float: right; max-width: 50%; text-align: right; } .main-navigation ul:first-child { display: block; } .main-navigation ul li { display: inline-block; } .main-navigation ul li:hover > ul { display: block; opacity: 1; visibility: visible; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .main-navigation ul a { border-bottom: 0; padding: 5px 0 5px 14px; } .main-navigation ul ul { background: white; border: 1px solid #eeeeee; display: none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; float: left; opacity: 0; padding: 0 7px; position: absolute; top: 27px; left: 0; text-align: left; visibility: hidden; z-index: 99999; } .main-navigation ul ul li { border-bottom: 1px solid #eeeeee; padding: 5px 5px 4px; } .main-navigation ul ul li:last-of-type { border-bottom: 0; } .main-navigation ul ul li a { line-height: 1.5; padding: 5px; width: 180px; } .main-navigation ul ul ul { left: 100%; top: 0; } .main-navigation ul ul li a, .main-navigation ul ul ul li a, .main-navigation ul ul ul ul li a { padding-left: 5px; } } ``` * Thread Starter [designminette](https://wordpress.org/support/users/designminette/) * (@designminette) * [8 years, 11 months ago](https://wordpress.org/support/topic/menu-too-responsive/#post-9298042) * Hi Gary Thanks for the advice. Unfortunately no value I give the min-width makes any difference. As soon as my screen goes smaller than 1280px, the hamburger appears! I hope I’m not missing something obvious 🙂 This is all the code I currently have in my Additional CSS. Can you have a look and let me know what I’m missing. I’ve tried the [@media](https://wordpress.org/support/users/media/) screen selector at the top and at the bottom, but it does not make a difference. Thanks for the help! * [@media](https://wordpress.org/support/users/media/) screen and ( min-width: 769px ) { .menu-toggle { display: none; } * .page-title { border-bottom: 1px solid #eeeeee; color: #999999; font-size: 0; line-height: 1.36em; letter-spacing: 2px; margin: 0; padding-bottom: 3px; } * .portfolio-entry-title a { border: 0; text-decoration: none; font-size: 0; } * .entry-title, .portfolio-entry-title { font-size: 0; line-height: 0; margin: 0px 0; } * .portfolio-featured-image { margin-bottom: 0; } * .portfolio-entry-meta , .portfolio-entry-meta a { font-size: 0; padding: 0; }. site-header { padding: 0; } * [Gary Bairead](https://wordpress.org/support/users/gary-barrett/) * (@gary-barrett) * [8 years, 11 months ago](https://wordpress.org/support/topic/menu-too-responsive/#post-9298304) * Please make sure that you copy and pasted the css I posted. * The css in your previous comment is not what I posted. * Thread Starter [designminette](https://wordpress.org/support/users/designminette/) * (@designminette) * [8 years, 11 months ago](https://wordpress.org/support/topic/menu-too-responsive/#post-9298355) * O ok, Sorry. I did not realise I need to use everything. Thought I just needed the 3 lines regarding the media screen. I’ll past everything now and let you know. Thanks * Thread Starter [designminette](https://wordpress.org/support/users/designminette/) * (@designminette) * [8 years, 11 months ago](https://wordpress.org/support/topic/menu-too-responsive/#post-9298371) * I worked! Yay! Thanks so much! Thanks for all your help. * [Gary Bairead](https://wordpress.org/support/users/gary-barrett/) * (@gary-barrett) * [8 years, 11 months ago](https://wordpress.org/support/topic/menu-too-responsive/#post-9298448) * Yay! * You’re welcome, glad I could help 🙂 Viewing 8 replies - 1 through 8 (of 8 total) The topic ‘Menu too responsive’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/sketch/1.2.4/screenshot.png) * Sketch * [Support Threads](https://wordpress.org/support/theme/sketch/) * [Active Topics](https://wordpress.org/support/theme/sketch/active/) * [Unresolved Topics](https://wordpress.org/support/theme/sketch/unresolved/) * [Reviews](https://wordpress.org/support/theme/sketch/reviews/) ## Tags * [menu](https://wordpress.org/support/topic-tag/menu/) * 8 replies * 2 participants * Last reply from: [Gary Bairead](https://wordpress.org/support/users/gary-barrett/) * Last activity: [8 years, 11 months ago](https://wordpress.org/support/topic/menu-too-responsive/#post-9298448) * Status: resolved