- This topic has 10 replies, 3 voices, and was last updated 2 years, 4 months ago by Ying.
-
AuthorPosts
-
November 23, 2021 at 11:11 am #2018354Martin
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 #2018414YingStaffCustomer SupportHi 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 #2018462MartinOk, 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 #2018499LeoStaffCustomer SupportThere is default padding added:
https://www.screencast.com/t/kkCVteQxYou can remove it with this CSS:
#mobile-header .menu-toggle { padding-right: 0; }
November 23, 2021 at 12:59 pm #2018522MartinI 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 #2018535MartinIn 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 #2018536YingStaffCustomer SupportAdd 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 #2018543MartinWow fantastic! That works great!
What about the hide-on-tablet class breakpoint issue (above)?November 23, 2021 at 1:26 pm #2018554YingStaffCustomer Supporthide-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 #2018604MartinThanks so much Ying! That’s perfect!
November 23, 2021 at 3:18 pm #2018681YingStaffCustomer SupportYou are welcome ๐
-
AuthorPosts
- You must be logged in to reply to this topic.