- This topic has 52 replies, 5 voices, and was last updated 2 years, 8 months ago by Elvin.
-
AuthorPosts
-
June 3, 2020 at 1:44 pm #1313191Ash
Well no as the code changes login/Register to account once logged in.
Off canvas is to be used as product category filter.
June 3, 2020 at 4:38 pm #1313336TomLead DeveloperLead DeveloperHi there,
So are you wanting to add these elements inside the mobile menu so they display when the mobile menu is opened?
If so, try this hook:
generate_after_primary_menu
And wrap your content in a div like this:
<div class="toggled-menu-content mobile-bar-items"> Your stuff in here </div>
Then add this CSS:
.main-navigation:not(.toggled) .toggled-menu-content { display: none; } .toggled-menu-content.mobile-bar-items { position: relative; }
Let me know if that gets us closer to a solution or not 🙂
June 5, 2020 at 1:46 am #1315149AshThanks Tom, That works but doesnt look too good tbh.
I need the search icon to go where the theme search would be on mobile.
June 5, 2020 at 9:55 am #1315881TomLead DeveloperLead DeveloperAh, so you want it to display on mobile all the time (even when the menu isn’t toggled)?
June 5, 2020 at 10:56 am #1315946Ash1. Login/Register
Your solution worked but it’s not aligned, doesn’t inherit colour and it’s lost it’s bottom padding in the menu.2. Ajax search I would like in the same position as the theme search icon would be (next to cart)
June 5, 2020 at 7:54 pm #1316330TomLead DeveloperLead Developer1. Try the updated HTML/CSS: https://generatepress.com/forums/topic/mobile-header-layout/page/2/#post-1313336
2. For this, you’d need to hook it into the
generate_inside_navigation
hook:<div class="mobile-bar-items ajax-search"> Your search bar </div>
June 6, 2020 at 2:32 am #1316537AshThanks,
Account hook all looks good now.
Mobile search is in the bar but needs moving to the correct position, left of basket like standard nav search would be.
As hide class breaks the hook for desktop, I tried hiding it with css but it just hides both versions of search
June 6, 2020 at 10:28 am #1317108TomLead DeveloperLead DeveloperTry adding this as well:
@media (max-width: 768px) { .mobile-bar-items.ajax-search { order: 2; } #site-navigation .inside-navigation { display: flex; flex-wrap: wrap; } .mobile-bar-items:not(.ajax-search) { order: 3; } .main-navigation .mobile-bar-items { position: relative; } .mobile-bar-items .dgwt-wcas-search-wrapp { line-height: 50px; color: white; } .mobile-bar-items .dgwt-wcas-search-wrapp svg { fill: white; } #primary-menu { flex-basis: 100%; order: 3; } .main-navigation button.menu-toggle { width: auto; flex-grow: 1; } }
June 7, 2020 at 1:42 am #1317615AshAdded, but it’s broken the bar and dropdown menu layouts
June 7, 2020 at 9:48 am #1318179TomLead DeveloperLead DeveloperCan you try the updated CSS?: https://generatepress.com/forums/topic/mobile-header-layout/page/2/#post-1317108
June 7, 2020 at 10:31 am #1318221AshYes that looks good thanks.
Now for just hiding the header search hook. Adding a class to the hook breaks desktop for some strange reason.
Tried hiding it with css but it hides the icon for mobile too.
Also I did notice once removed logo doesn’t exactly sit center.
June 7, 2020 at 5:52 pm #1318510TomLead DeveloperLead DeveloperTry this:
@media (max-width: 768px) { .inside-header .dgwt-wcas-search-wrapp { display: none; } }
June 8, 2020 at 9:50 am #1319544AshThanks that works. Though I have noticed the previous css has moved secondary menu icon to the left.
June 8, 2020 at 4:03 pm #1319935TomLead DeveloperLead DeveloperJune 19, 2020 at 5:29 am #1333943AshThanks Tom.
I’m getting a layout shift from the mobile menu bar, see here https://ibb.co/fXLFp05
Disabling them hooks my layout shift is zero, any ideas how to stop this?
Cheers
-
AuthorPosts
- You must be logged in to reply to this topic.