Title: Error Header Menu Last modified: August 31, 2016 --- # Error Header Menu * Resolved [bayu-angora](https://wordpress.org/support/users/bayu-angora/) * (@bayu-angora) * [10 years, 4 months ago](https://wordpress.org/support/topic/error-header-menu/) * My header menu is normal on full screen. * But there any error with my header menu when turn to 800px to 991px size. * Screenshot -> [https://ctrlv.cz/0GaQ](https://ctrlv.cz/0GaQ) * My menu and social icon turn to several line. * Whats wrong with my header? -> [http://angora.me](http://angora.me) * Please help me to fix my header menu. Viewing 5 replies - 1 through 5 (of 5 total) * Thread Starter [bayu-angora](https://wordpress.org/support/users/bayu-angora/) * (@bayu-angora) * [10 years, 4 months ago](https://wordpress.org/support/topic/error-header-menu/#post-7005224) * Here is my custom CSS. * > #overflow-container > {margin-left: 5%; margin-right: 5%;} > #title-info > {margin-left: 5%;} > #menu-primary ul.social-media-icons > {margin-right: 5%;} > [@media](https://wordpress.org/support/users/media/) all and (min-height: 600px){ > . > site-header {position: fixed; width: 100%; z-index: 9999;} .overflow-container{ > padding-top: 60px;} } > [@media](https://wordpress.org/support/users/media/) (max-width: 800px){ > # > logo {margin-right: 36px;} #toggle-navigation i.fa-bars {margin-left: 36px;}} > .menu-primary > {font-family: roboto slab; font-size: 18px; font-weight: 600;} > #site-description > {display: none;} > .social-media-icons i > {font-size: 24px;} > .entry-title, .excerpt-title > {font-size: 24px; font-weight: bold;} > .more-link > {color: #ff0000; font-weight: 600;} > .pagination > {color: #ff0000; font-weight: 600;} > .entry-categories p, .entry-tags p > {font-size: 16px;} > a:link, a:visited, a:hover, a:active > {text-decoration: none;} > #sidebar-primary section.widget .tagcloud > {line-height:28px; text-align: right; > padding-bottom: 24px;} * I use margin left and right for overflow container because I want the size smaller and not too width. * Please tell me if there any better code to make my site look smaller and keep responsive. * [bensita](https://wordpress.org/support/users/bensita/) * (@bensita) * [10 years, 4 months ago](https://wordpress.org/support/topic/error-header-menu/#post-7005227) * Well, it seems there is no space to keep main menu and social menu on the same line. * Do you want it lo look something like: [http://pasteboard.co/1a9hi0Rd.jpg](http://pasteboard.co/1a9hi0Rd.jpg) * Thread Starter [bayu-angora](https://wordpress.org/support/users/bayu-angora/) * (@bayu-angora) * [10 years, 4 months ago](https://wordpress.org/support/topic/error-header-menu/#post-7005290) * Hello, Bensita. Thanks for response. * No, I mean I don’t want my menu going to more than 1 line. * I just want to keep my menu as 1 line (span menu) on standard view. -> [https://ctrlv.cz/wxIA](https://ctrlv.cz/wxIA) * Or just going to wrap (toggle menu) when they are on mobile view. -> [https://ctrlv.cz/n5DV](https://ctrlv.cz/n5DV) * So, they are no chance to error or going to more than 1 line. -> [https://ctrlv.cz/U7QL](https://ctrlv.cz/U7QL) * I also try to modify my code like this. But still no fix when I reach between 800px to 1030px. * > #overflow-container > {width: 80%; margin-left: auto; margin-right: auto;} > #title-info > {margin-left: 10%;} > #menu-primary ul.social-media-icons > {margin-right: 10%;} > [@media](https://wordpress.org/support/users/media/) all and (min-height: 600px){ > .site-header > {position: fixed; width: 100%; z-index: 9999;} > .overflow-container > {padding-top: 60px;}} > [@media](https://wordpress.org/support/users/media/) (max-width: 800px){ > #logo > {margin-right: 65px;} > #toggle-navigation i.fa-bars > {margin-left: 65px;}} > .menu-primary > {font-family: roboto slab; font-size: 18px; font-weight: 600;} > #site-description > {display: none;} > .social-media-icons i > {font-size: 24px;} > .entry-title, .excerpt-title > {font-size: 24px; font-weight: bold;} > .more-link > {color: #ff0000; font-weight: 600;} > .pagination > {color: #ff0000; font-weight: 600;} > .entry-categories p, .entry-tags p > {font-size: 16px;} > a:link, a:visited, a:hover, a:active > {text-decoration: none;} > #sidebar-primary section.widget .tagcloud > {line-height:28px; text-align: right; > padding-bottom: 24px;} > .site-footer > {display: none;} * I want my menu just going to wrap (toggle) before going to 2 lines. * Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/) * (@bensibley) * [10 years, 4 months ago](https://wordpress.org/support/topic/error-header-menu/#post-7005363) * Hi Bayu, * With the space available, the social icons can’t fit on the same line as the menu items at those screen sizes. The easiest solution is to temporarily hide the icons with the following CSS for the small range of screen sizes they don’t fit on: * ``` @media all and (min-width: 800px) and (max-width: 970px) { .social-media-icons { display: none; } } ``` * Thread Starter [bayu-angora](https://wordpress.org/support/users/bayu-angora/) * (@bayu-angora) * [10 years, 4 months ago](https://wordpress.org/support/topic/error-header-menu/#post-7005369) * Thanks for support, Ben. It works. But I will try to switch to another theme first for a while. Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘Error Header Menu’ is closed to new replies. * ![](https://i0.wp.com/themes.svn.wordpress.org/ignite/1.84/screenshot.png) * Ignite * [Support Threads](https://wordpress.org/support/theme/ignite/) * [Active Topics](https://wordpress.org/support/theme/ignite/active/) * [Unresolved Topics](https://wordpress.org/support/theme/ignite/unresolved/) * [Reviews](https://wordpress.org/support/theme/ignite/reviews/) * 5 replies * 3 participants * Last reply from: [bayu-angora](https://wordpress.org/support/users/bayu-angora/) * Last activity: [10 years, 4 months ago](https://wordpress.org/support/topic/error-header-menu/#post-7005369) * Status: resolved