Archived topic

mobile menu icon on right

10 replies · Started by Martin on November 23, 2021

Viewing posts 1–11 of 11

November 23, 2021 at 11:11 am #2018354

I am trying to get my mobile menu icon on the right for phone and tablet. I used this code from the forum to set my breakpoint at 1080 for the menu:

@media( max-width: 1080px ) {
	.site-header,
	#site-navigation,
	#sticky-navigation {
		display: none !important;
		opacity: 0;
	}

	#mobile-header {
		display: block !important;
		opacity: 1;
		width: 100% !important;
	}

        #mobile-header .main-nav > ul {
            display: none;
        }

	#mobile-header.toggled .main-nav > ul,
        #mobile-header .menu-toggle,
        #mobile-header .mobile-bar-items {
            display: block;
        }
}

but the hamburger icon ends up not flush right on all devices? Can we float it so it is always just a few spaces from the right edge?

thanks

November 23, 2021 at 12:04 pm #2018414

Hi Martin,

You don't need any CSS to set breakpoint for header/navigation, actually there's an option at customizer > layout > primary navigation > mobile menu breakpoint:
https://docs.generatepress.com/article/primary-navigation-layout-overview/

Let me know if this helps :)

November 23, 2021 at 12:30 pm #2018462

Ok, thanks. I deleted the CSS but how do I make the hamburger icon stay on the right? It is not flush right?

November 23, 2021 at 12:49 pm #2018499

There is default padding added:
https://www.screencast.com/t/kkCVteQx

You can remove it with this CSS:

#mobile-header .menu-toggle {
    padding-right: 0;
}

November 23, 2021 at 12:59 pm #2018522

I tried that and it moved a tiny bit right but I want it justified right over to the right? It seems to be acting like it is centered in some sort of grid...

November 23, 2021 at 1:04 pm #2018535

In a related question to the mobile behavior of this header, I am using a GP block Site Header element which has GenerateBlock (GB) Headers in a GB Container with the hide-on-mobile, hide-on-tablet and hide-on-desktop classes to control the visibility for desktop and tablet and mobile. However, you will note that as you shrink the desktop view in your browser down to tablet and mobile sizes it does not break at the new mobile breakpoint I set in the customizer of 1035?

Can we fix that so the hide-on-tablet class hides at the theme breakpoint?

November 23, 2021 at 1:07 pm #2018536

Add this CSS:

nav#mobile-header.main-navigation .menu-toggle {
    flex-grow: 0;
}

Change this CSS:

.mobile-header-navigation {
    padding: 10px;
}

to:

.mobile-header-navigation {
    padding: 10px 0;
}

November 23, 2021 at 1:11 pm #2018543

Wow fantastic! That works great!
What about the hide-on-tablet class breakpoint issue (above)?

November 23, 2021 at 1:26 pm #2018554

hide-on-mobile, hide-on-tablet and hide-on-desktop

These classes are built-in in GP's theme, so the break point of these class won't change even if you change the mobile break point in customizer.

You can add this CSS:

@media (min-width: 1025px) and (max-width: 1035px)  {
.gb-container.hide-on-desktop {
    display: block !important;
}
}

@media (max-width: 1035px) {
.gb-container.hide-on-mobile.hide-on-tablet {
    display: none !important;
}
}

November 23, 2021 at 2:11 pm #2018604

Thanks so much Ying! That's perfect!

November 23, 2021 at 3:18 pm #2018681

You are welcome :)

This archived topic is closed to new replies.

Start building better websites today.