[Resolved] Customizing a burger menu mobile/tablet/computer

[Sílvia]

Hi

I need a burger menu in all devices (computer, tablet and mobile), so I put a high px at the mobile menu break point in main menu customization. Correct me if there’s a better way to do it.

And now I need some things that I don’t know how to acheive.
1. I’d like the burger menu icon and the shopping cart icon to be bigger.
2. I’d like the menu and the shopping cart to be on the right side on mobile devices but on the left side on computer and tablet (leaving the logo just after/next to those icons).

Can you, please, help me with this?

Thanks in advance.
Silvia

[Ying]

Hi Silvia,

Any chance you can link us to the site in question so we can see your current layout?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Sílvia]

Yes, sure!

[Ying]

1. To make the icon bigger, try this CSS:

.site-header .gp-icon {
    font-size: 40px;
}

2. Not sure I fully understand leaving the logo just after/next to those icons, give this CSS a try, let me know:

@media (min-width: 768px) {
     .site-header .inside-header nav#site-navigation {
        margin-left: 0;
        margin-right: auto;
    }
}

[Sílvia]

Ying,
1. Works great
2. I don’t seem to notice any change. I send you a link to a page where I put two images about how I’d like it to be seen (maybe it will be easier to understand it this way).

[Ying]

Thanks for the mockup, that helps a lot 🙂

Can you adjust the mobile menu break point to turn the menu into hamburger icon so I can work on the CSS?
https://www.screencast.com/t/sgD9WJQDZw1

[Sílvia]

Done!

[Ying]

Try this CSS:

@media (min-width: 768px) {
        .site-header .inside-header .main-navigation.mobile-menu-control-wrapper {
            margin-left: 0;
            order: -1;
        }
        .site-logo {
                margin-left: 60px;
        }
}

[Sílvia]

Super!

Thanks a lot.

Silvia

[Ying]

You are welcome 🙂

[Author]

Posts