Making Hamburger icon responsive.

  • Resolved sarangianurag.doe

    (@sarangianuragdoe)


    10 years, 3 months ago

    hi, on my website 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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 3 months ago

    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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 3 months ago

    https://developer.mozilla.org/en/docs/Web/CSS/float

    Thread Starter sarangianurag.doe

    (@sarangianuragdoe)

    10 years, 3 months ago

    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 only screen but it doesnt work no idea why.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 3 months ago

    There are many styles applied to the button, some of which cause the issue: 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

    (@sarangianuragdoe)

    10 years, 3 months ago

    I disabled all the styles and used float: right for the icon. The icon just disappeared.

    Thread Starter sarangianurag.doe

    (@sarangianuragdoe)

    10 years, 3 months ago

    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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 3 months ago

    Your responsive issue has now been fixed and you’re facing another issue.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 3 months ago

    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

    (@sarangianuragdoe)

    10 years, 3 months ago

    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

    Thank you for your help.

    Here is the script i used:

    <script>

    $(document).ready(function() {

        $('.menu-toggle').click(function(e){

            var menu = $(this).data('show-dialog');

            $('.' + menu).toggleClass('side-menu-shown');

        });

        $('.side-menu-close').on('click', function () {
            $('.side-menu-basic').removeClass('side-menu-shown');
        });

           });

</script>
Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Making Hamburger icon responsive.’ is closed to new replies.