Title: Width menu Last modified: December 29, 2016 --- # Width menu * [JM28](https://wordpress.org/support/users/jaapme/) * (@jaapme) * [9 years, 5 months ago](https://wordpress.org/support/topic/width-menu/) * Hi, * On smaller screans, like a tablet, the menu (which is not that large) on my site splits in 2 rows although there is space enough. How can I ensure that the menu is displayed in one row? * I tried to accomplish this with the powerpack, but can’t get it work * Thank you in advance. Viewing 5 replies - 1 through 5 (of 5 total) * [Sri Shunyata](https://wordpress.org/support/users/sri-shunyata/) * (@sri-shunyata) * [9 years, 5 months ago](https://wordpress.org/support/topic/width-menu/#post-8599437) * As you can see in this [screenshot](https://www.dropbox.com/s/rtf01soq1mjdpih/2016-12-29%20at%205.12%20PM.png?dl=0) I’ve got the same issue. And many others to boot. * Something essential must have been changed in a recent update, because my website didn’t have this problem before. * It would be great if someone could offer a quick fix. * Thanks * Thread Starter [JM28](https://wordpress.org/support/users/jaapme/) * (@jaapme) * [9 years, 5 months ago](https://wordpress.org/support/topic/width-menu/#post-8599459) * The logo / text in the header should be responsive too. * [Emily](https://wordpress.org/support/users/empom/) * (@empom) * [9 years, 5 months ago](https://wordpress.org/support/topic/width-menu/#post-8603857) * If you want it to all be on the same line, then the easiest / quickest way of doing it would be to find the breakpoint at which it splits and add a media query in your CSS file which reduces the font size of the title to fit anything below that breakpoint. For example: * ``` @media screen and (max-width: 499px) { .site-branding .site-title { font-size: 1.4em; margin: 6px 0 0; } } ``` * That makes the text smaller and adds a top margin to balance out the title against the height of the menu button. * Be sure to check on the smaller screen sizes than the breakpoint you’ve set that it all looks ok. * Alternatively you could create a max-width in the same media query, this will keep the title text the same size, potentially splitting the title into two lines, but it’ll still look tidy: * ``` @media screen and (max-width: 499px) { .site-branding .site-title { max-width: 249px; } } ``` * They’re not perfect fixes, ideally you’d tweak the HTML too, but the problem may be fixed in a theme update. * [Sri Shunyata](https://wordpress.org/support/users/sri-shunyata/) * (@sri-shunyata) * [9 years, 5 months ago](https://wordpress.org/support/topic/width-menu/#post-8604646) * Hi Emily and Happy New Year to ya! * Thanks for your suggestion for a quick fix. Unfortunately, it didn’t solve the problem. * I also tried the following: * ``` @media screen and (max-width: 499px) { header#masthead.site-header div.col-full .site-branding .beta site-title { max-width: 25% !important; } } ``` * But it didn’t work either. There doesn’t look like there is a quick fix for this one. Both sides of the equation, the Hamburger Menu and the Site Title need their column percentages adjusted. * Unless, someone comes up with an easy and comprehensive tweak, and… * When time permits, (soon), I’ll address this when adding a background logo svg image to the site-branding area. * Thanks Again * [Sri Shunyata](https://wordpress.org/support/users/sri-shunyata/) * (@sri-shunyata) * [9 years, 5 months ago](https://wordpress.org/support/topic/width-menu/#post-8609107) * [@jaapme](https://wordpress.org/support/users/jaapme/) This may not be perfect but as you can see the Site Title and hamburger Menu are on the same row. * ![Storefront Max-Size 385px](https://i0.wp.com/s25.postimg.org/kmhrpfb1r/Storefront_Max_Size_385px. png?ssl=1) * NOTE: I still haven’t figure out how to properly reduce the overall masthead height. * **Here is the CSS that I’ve deployed.** * ``` /* SMALL SCREEN MAX 385px ---------------- */ @media screen and (max-width: 385px) { #masthead.site-header { padding-bottom: 0; margin-bottom: 0; } .site-branding { max-width: 60%; padding: 0; } beta.site-title{ font-size: 1.7em; padding: 0; margin: 0; } button.menu-toggle, button.menu-toggle:hover { margin-top: 1.3em; } .woocommerce-breadcrumb { display: none; } h1.entry-title { font-size: 1.5em; margin-top: -0.8em; text-align: left; } .site-search .widget_product_search { display: none; } /* SCREEN BOTTOM — REMOVES SEARCH AT THE BOTTOM OF THE SCREEN ---------------- */ /* NOT SURE IF YOU NEED TO INCLUDE THE STYLES LISTED BELOW — Storefront Hamburger Menu compatibility */ .storefront-hamburger-menu-active .main-navigation .menu-toggle { width: 2.724216em; height: 2.724216em; border: 0; font-style: normal; } .storefront-hamburger-menu-active .main-navigation .menu-toggle:before { line-height: 2.724216; } .storefront-hamburger-menu-active .site-header-cart .cart-contents { right: 3.618em; } } ``` * Hope that helps out! - This reply was modified 9 years, 5 months ago by [Sri Shunyata](https://wordpress.org/support/users/sri-shunyata/). Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘Width menu’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/storefront/4.6.2/screenshot.png) * Storefront * [Support Threads](https://wordpress.org/support/theme/storefront/) * [Active Topics](https://wordpress.org/support/theme/storefront/active/) * [Unresolved Topics](https://wordpress.org/support/theme/storefront/unresolved/) * [Reviews](https://wordpress.org/support/theme/storefront/reviews/) * 5 replies * 3 participants * Last reply from: [Sri Shunyata](https://wordpress.org/support/users/sri-shunyata/) * Last activity: [9 years, 5 months ago](https://wordpress.org/support/topic/width-menu/#post-8609107) * Status: not resolved