Archived topic

Customizing a burger menu mobile/tablet/computer

9 replies · Started by Sílvia on April 28, 2022

Viewing posts 1–10 of 10

April 28, 2022 at 9:41 am #2203135

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

April 28, 2022 at 9:46 am #2203142

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 :)

April 28, 2022 at 9:51 am #2203146

Yes, sure!

April 28, 2022 at 10:35 am #2203171

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;
    }
}

April 28, 2022 at 11:09 am #2203196

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).

April 28, 2022 at 11:28 am #2203210

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

April 28, 2022 at 12:04 pm #2203245

Done!

April 28, 2022 at 1:18 pm #2203285

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;
        }
}

April 29, 2022 at 1:07 am #2203574

Super!

Thanks a lot.

Silvia

April 29, 2022 at 9:14 am #2204172

You are welcome :)

This archived topic is closed to new replies.

Start building better websites today.