- This topic has 52 replies, 5 voices, and was last updated 2 years, 8 months ago by Elvin.
-
AuthorPosts
-
May 30, 2020 at 5:04 am #1307487Ash
Hi
So I have got my header/menu etc sorted for desktop views, however mobile layout is bit of a mess.
We have gone for the same layout Prime demo uses. I don’t really want to use the mobile header.
I’m using two elements in the header, account and ajax search (same plugin used in prime)
Perferably I would of liked the ajax search icon and account icon to be in the same location as cart and menu in mobile view.
Any ideas how I can sort mobile layout?
Thank you.
May 30, 2020 at 9:12 am #1307817LeoStaffCustomer SupportHi there,
Can’t quite picture what you are after.
Are you able to show a mock-up of what you want?
Let me know 🙂
May 31, 2020 at 1:23 am #1308390AshLike that, then the logo would be larger and in the center.
Only way I could think of is using hide-on-mobile class in the two hooks and then replicating the two for mobile only by using mobile_cart_items hook?
Though the account hook I would prefer to show in the mobile menu, but can’t seem to find one?
Cheers
May 31, 2020 at 9:22 am #1308888LeoStaffCustomer SupportSo first you need to add the search and login link using a hook element:
https://docs.generatepress.com/article/hooks-element-overview/The content would be something like this:
<div class="hide-on-desktop"> content </div>
And choose the
inside_mobile_nenu_bar
hook.Then we can try some CSS to arrange them.
Let me know 🙂
June 1, 2020 at 1:30 am #1309489AshThis is how I have it.
I have the two hooks for desktop
Login/Register
<div class="hide-on-mobile"> <?php if ( is_user_logged_in() ) { ?> <a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('My Account','woothemes'); ?>"><i class="fa fa-user fa-fw"></i><?php _e('My Account','woothemes'); ?></a> <?php } else { ?> <a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Login / Register','woothemes'); ?>"><i class="fa fa-user fa-fw"></i><?php _e('Login | Register','woothemes'); ?></a> <?php } ?> </div>
Ajax Search
<div class="hide-on-mobile"> <?php echo do_shortcode('[wcas-search-form]'); ?> </div>
Then the same two but for mobile
<div class="hide-on-desktop"> <?php if ( is_user_logged_in() ) { ?> <a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('My Account','woothemes'); ?>"><i class="fa fa-user fa-fw"></i><?php _e('My Account','woothemes'); ?></a> <?php } else { ?> <a href="<?php echo get_permalink( get_option('woocommerce_myaccount_page_id') ); ?>" title="<?php _e('Login / Register','woothemes'); ?>"><i class="fa fa-user fa-fw"></i><?php _e('Login | Register','woothemes'); ?></a> <?php } ?> </div>
<div class="hide-on-desktop"> <?php echo do_shortcode('[wcas-search-form]'); ?> </div>
I have used the inside_mobile_menu_bar hook like you said but they don’t show? And it has also broke header layout on desktop
June 1, 2020 at 9:29 am #1310067LeoStaffCustomer SupportIs the code still added?
Can you try adding it to
inside_navigation
instead?June 2, 2020 at 1:17 am #1310772AshYes it’s still added and change hook
Adding the hide class to the search hook breaks the layout for desktop.
June 2, 2020 at 8:37 am #1311394LeoStaffCustomer SupportStart with this CSS first to change the mobile header layout:
@media (max-width: 768px) { .inside-navigation { display: flex; } }
Adding the hide-on-mobile class should not change the layout on desktop.
I just tried removing the class using inspector and didn’t see any changes:
https://www.screencast.com/t/ZdAjwJOhlCJune 3, 2020 at 12:28 am #1312073AshSee here https://streamable.com/wpyon6
Also is there not a hook to add to mobile menu?
June 3, 2020 at 2:52 am #1312194AshAnd using this css for header
.inside-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
June 3, 2020 at 8:37 am #1312807LeoStaffCustomer SupportCan’t see any reason why that would happen.
Maybe just remove the classes and we will use CSS to hide it instead.
June 3, 2020 at 9:09 am #1312844AshAny difference between using class and css? Rather not load them at all for performance.
June 3, 2020 at 10:46 am #1312993LeoStaffCustomer SupportThe
hide-on
classes are using CSS as well so no difference.June 3, 2020 at 11:15 am #1313036AshOkay I will try that.
So is there a hook to add to the mobile drop down menu? I tried inside mobile navigation but nothing showed, anywhere.
I’d prefer for the account hook to be in the menu and search hook to be in the mobile bar.
June 3, 2020 at 1:36 pm #1313183LeoStaffCustomer SupportCouldn’t you add the account link as a menu item?
I think another good solution would be to use the off canvas panel for mobile.
Then you can use the widget area:
https://docs.generatepress.com/article/off-canvas-panel-overview/ -
AuthorPosts
- You must be logged in to reply to this topic.