[Resolved] Menu to a burger icon breakpoint customization, and positioning the icon

Home Forums Support Menu to a burger icon breakpoint customization, and positioning the icon

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #529309
    Max

    Hi Tom and Leo,

    I have a question regarding a customization of a max-width of a website when a regular menu collapses to a burger icon and setting up a location of this icon on the page. Sadly, I am not a coder and maybe my issue is something that can be easily resolved with some code knowledge.

    I went through another help topic where I found a css-code that you posted: https://gist.github.com/generatepress/c23aef2d05807c39bb32. The code works well and I was able to change the max-width setting but I would like to change the position of the burger icon to the top right corner where the mobile menu icon is placed at the smaller screen size.

    Could you please help me change the css to relocate the burger icon to the desired position?

    Please find a link to my temporary domain where I am constructing the website in “Your website URL” field. Everything is in Cyrillic but I think that you will notice the issue when you will try to resize the window to make it narrower.

    Thank you!

    Kind regards,
    Max

    GP Premium 1.6
    #529751
    Tom
    Lead Developer
    Lead Developer

    I would use the mobile header instead: https://docs.generatepress.com/article/mobile-header/

    Then you can use this code to make it initiate at a higher width:

    @media( max-width: 1000px ) {
    	.site-header,
    	#site-navigation,
    	#sticky-navigation {
    		display: none !important;
    		opacity: 0;
    	}
    
    	#mobile-header {
    		display: block !important;
    		opacity: 1;
    		width: 100% !important;
    	}
    }
    #530209
    Max

    Hi Tom,

    Thank you for your reply. I have tried to mess around with your code and the mobile header and while I get the mobile header look and the mobile header logo at a breakpoint specified in the code, the menu does not collapse to the burger icon until the screen reaches a default tablet width.

    I liked the way my site looked like before using the mobile header as I used a Page Header module and had a transparent background under my menu as well as consistent logo throughout the regular and mobile versions of the site.

    I am back at a starting point and I once more have to kindly ask you to help me to relocate the burger icon from center to right top corner using the css from the link in my initial post or another code that can do the trick.

    Thank you!

    Regards,
    Max

    #530573
    Tom
    Lead Developer
    Lead Developer

    Hi Max,

    Did you get this working? Here’s what I’m seeing: https://www.screencast.com/t/rVH62Rxcf

    #530618
    Max

    Hi Tom,

    Sadly, not yet. I removed the initial css yesterday before trying the mobile header and did not paste it back – sorry for confusing you.

    Now it’s back in the Simple CSS and running.

    Here how the page looks like at 1144px: https://www.screencast.com/t/0zGQvwUf

    Here – at 970px: https://www.screencast.com/t/yFbkL2UFmyz

    Here – at 765px (the burger icon is in the desired position here): https://www.screencast.com/t/70KXEShnZU

    So this is how the site is looking at the moment with the initial css code on. As you can see on the first two screenshots, the burger icon is in the centre of the screen and below the site’s logo, while I would like it to be in the top right corner.

    #531290
    Tom
    Lead Developer
    Lead Developer

    You should be able to just do this:

    button.menu-toggle {
        width: auto;
        float: right;
    }
    #531954
    Max

    Hi Tom,

    Thank you very much! I added this short code and now everything is perfect.

    Thank you for a great support! Best of luck in all life has to offer you!

    Best regards,
    Max

    #531987
    Tom
    Lead Developer
    Lead Developer

    Thank you! Glad I could help 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.