- This topic has 11 replies, 2 voices, and was last updated 2 years, 4 months ago by Ying.
-
AuthorPosts
-
November 18, 2021 at 1:10 pm #2010022ioan
Hello, I am developing a woocommerce website with GP Premium.
We have two menus, the primary one only contains the user icon and the secondary one the accesses to other pages.Is it possible that in the mobile version it will show the hamburger with the Secondary menu collapsed on the left side, on the right side the Primary menu not collapsed (user icon) plus the shopping cart icon, and the logo in the center.
Thanks in advanced.
November 18, 2021 at 2:43 pm #2010120YingStaffCustomer SupportHi there,
Any chance you can link us to the site in question?
You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-informationLet me know π
November 18, 2021 at 3:20 pm #2010170ioanSorry, its offline under development environment
November 18, 2021 at 3:23 pm #2010171ioanJust looking for a way to put on mobile the hamburger with the Secondary menu on the left, the logo centered and the primary menu and shopping cart icon on the right
November 18, 2021 at 6:28 pm #2010279YingStaffCustomer SupportSorry but I have to see the site to know what CSS code is needed.
Can you get back to us when it’s online?
Let me know π
November 18, 2021 at 7:06 pm #2010298ioanOk. I think it could work with the link:
It’s another website that is on line and has similar conditions, so solutions for this one will work.
November 19, 2021 at 8:51 am #2011266ioanInadvertently I mark the topic as resolved and it is not. Could you please help me.
November 19, 2021 at 11:59 am #2011470YingStaffCustomer SupportAre you trying to achieve something like this?
https://www.screencast.com/t/NXM5UUybsgIf so, try this CSS:
@media (max-width: 768px) { nav#site-navigation { position: absolute; top: 78.2px; right: 0; height: 35px; } }
November 19, 2021 at 12:58 pm #2011541ioanThank for your support Ying, what I try the archive is, on the same horizontal line: on the left side the hamburger with the Secondary menu, in the middle (centered) the logo, and on the right side the Primary menu (not collapsed because it only has the font awesome user icon) and the cart icon.
November 19, 2021 at 1:52 pm #2011585YingStaffCustomer SupportThat’s quite a lot customizations especially you’ve already have some CSS regrading the header section.
I can’t guarantee the same CSS would work for your other site:Give this CSS a try:
@media (max-width: 480px) { .site-logo { position: absolute; left: 50%; transform: translatex(-50%); top: 0; } button.menu-toggle.secondary-menu-toggle { width: 20px; display: flex; background-color: transparent!important; color: #009999 !important; margin-top: -40px; padding-bottom: 20px; padding-top: 20px; } .secondary-navigation .inside-navigation { flex-wrap: wrap; justify-content: flex-start; } .secondary-navigation.toggled .main-nav { width: 100%; } body .secondary-navigation { background-color: transparent !important; } .secondary-navigation { padding-left: 0 !important; } nav#site-navigation a { font-size: 20px !important; } .main-navigation .inside-navigation { padding-top: 20px; margin-bottom: -20px; } }
November 19, 2021 at 4:40 pm #2011674ioanGreat! As you mention before, it was hard to give me the right css code, but you put me on the way. Thanks you very muchs.
As always, excellent support from GeneratePress team.
I will mark it as resolved.November 20, 2021 at 12:06 pm #2012486YingStaffCustomer SupportYou are welcome π
Hope it will work for your other site somehow!
-
AuthorPosts
- You must be logged in to reply to this topic.