Title: Making Hamburger icon responsive. Last modified: August 31, 2016 --- # Making Hamburger icon responsive. * Resolved [sarangianurag.doe](https://wordpress.org/support/users/sarangianuragdoe/) * (@sarangianuragdoe) * [10 years, 3 months ago](https://wordpress.org/support/topic/making-hamburger-icon-responsive/) * hi, on my website [http://www.elevendwind.com](http://www.elevendwind.com) I am looking to fix an issue with hamburger icon located at the top of the page. I am hoping anyone can provide a solution to make it responsive. * As the screen size decrees the icon get over lapped by the side-bar it open when clicking and there is no way one can close it back. I need a fix for this, I am aware there are more than one way to do this but don’t know where to began. * here is the script i am using: * ``` var menuRight = document.getElementById( 'cbp-spmenu-s2' ), body = document.body; showRightPush.onclick = function() { classie.toggle( this, 'active' ); classie.toggle( body, 'cbp-spmenu-push-toleft' ); classie.toggle( menuRight, 'cbp-spmenu-open' ); disableOther( 'showRightPush' ); }; function disableOther( button ) { if( button !== 'showRightPush' ) { classie.toggle( showRightPush, 'disabled' ); } } ``` Viewing 9 replies - 1 through 9 (of 9 total) * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/making-hamburger-icon-responsive/#post-6989316) * Try reworking your layout to use floats to move things left and right beside one another. For example: If you’re going to put the menu button inside the heading then the text needs to be floated to the left and the button to the right. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/making-hamburger-icon-responsive/#post-6989317) * [https://developer.mozilla.org/en/docs/Web/CSS/float](https://developer.mozilla.org/en/docs/Web/CSS/float) * Thread Starter [sarangianurag.doe](https://wordpress.org/support/users/sarangianuragdoe/) * (@sarangianuragdoe) * [10 years, 3 months ago](https://wordpress.org/support/topic/making-hamburger-icon-responsive/#post-6989322) * Thanks for the reply Andrew. Using float doesn’t fix the problem which still remains i.e in screen size less than 1120px the icon gets overlapped by the side bar. * I am trying to use [@media](https://wordpress.org/support/users/media/) only screen but it doesnt work no idea why. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/making-hamburger-icon-responsive/#post-6989325) * There are many styles applied to the button, some of which cause the issue: [http://snag.gy/rBRN9.jpg](http://snag.gy/rBRN9.jpg) * I assume you’ve used those styles for positioning? That’s why I would recommend floats. * Thread Starter [sarangianurag.doe](https://wordpress.org/support/users/sarangianuragdoe/) * (@sarangianuragdoe) * [10 years, 3 months ago](https://wordpress.org/support/topic/making-hamburger-icon-responsive/#post-6989402) * I disabled all the styles and used float: right for the icon. The icon just disappeared. * Thread Starter [sarangianurag.doe](https://wordpress.org/support/users/sarangianuragdoe/) * (@sarangianuragdoe) * [10 years, 3 months ago](https://wordpress.org/support/topic/making-hamburger-icon-responsive/#post-6989408) * okay i fixed the icon using float and is visible with position set to inherit, now where do we go from here? Still doesn’t fix the initial responsive problem * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/making-hamburger-icon-responsive/#post-6989409) * Your responsive issue has now been fixed and you’re facing another issue. * [Andrew Nevins](https://wordpress.org/support/users/anevins/) * (@anevins) * WCLDN 2018 Contributor | Volunteer support * [10 years, 3 months ago](https://wordpress.org/support/topic/making-hamburger-icon-responsive/#post-6989433) * I probably misunderstood your original issue. It’s not that your menu button is not responsive. It’s that your menu overlaps it when it’s open. * I’m assuming that you need help with the code of how to resolve this, but already have an idea of where the button should be. Is that right? If so, what is your idea? * Thread Starter [sarangianurag.doe](https://wordpress.org/support/users/sarangianuragdoe/) * (@sarangianuragdoe) * [10 years, 3 months ago](https://wordpress.org/support/topic/making-hamburger-icon-responsive/#post-6989585) * You are right Andrew, i needed a fix on how not to let the side bar overlap the icon but turns out the float issue was a part of it. I however have fixed it by using a close button with the following script. You may look at result on the website: [http://www.elevendwind.com/home](http://www.elevendwind.com/home) * Thank you for your help. * Here is the script i used: * ``` ``` Viewing 9 replies - 1 through 9 (of 9 total) The topic ‘Making Hamburger icon responsive.’ is closed to new replies. ## Tags * [css](https://wordpress.org/support/topic-tag/css/) * [header](https://wordpress.org/support/topic-tag/header/) * [html](https://wordpress.org/support/topic-tag/html/) * [java](https://wordpress.org/support/topic-tag/java/) * [Side-Bar](https://wordpress.org/support/topic-tag/side-bar/) * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/) * 9 replies * 2 participants * Last reply from: [sarangianurag.doe](https://wordpress.org/support/users/sarangianuragdoe/) * Last activity: [10 years, 3 months ago](https://wordpress.org/support/topic/making-hamburger-icon-responsive/#post-6989585) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics