- This topic has 46 replies, 3 voices, and was last updated 6 months, 3 weeks ago by
Tom.
-
AuthorPosts
-
May 30, 2020 at 5:04 am #1307487
Ash
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 #1307817Leo
StaffCustomer 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 ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/May 31, 2020 at 1:23 am #1308390Ash
Like 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 #1308888Leo
StaffCustomer 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 ๐
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 1, 2020 at 1:30 am #1309489Ash
This 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 #1310067Leo
StaffCustomer SupportIs the code still added?
Can you try adding it to
inside_navigation
instead?Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 2, 2020 at 1:17 am #1310772Ash
Yes 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 #1311394Leo
StaffCustomer 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/ZdAjwJOhlCDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 3, 2020 at 12:28 am #1312073Ash
See here https://streamable.com/wpyon6
Also is there not a hook to add to mobile menu?
June 3, 2020 at 2:52 am #1312194Ash
And 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 #1312807Leo
StaffCustomer SupportCan’t see any reason why that would happen.
Maybe just remove the classes and we will use CSS to hide it instead.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 3, 2020 at 9:09 am #1312844Ash
Any difference between using class and css? Rather not load them at all for performance.
June 3, 2020 at 10:46 am #1312993Leo
StaffCustomer SupportThe
hide-on
classes are using CSS as well so no difference.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 3, 2020 at 11:15 am #1313036Ash
Okay 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 #1313183Leo
StaffCustomer 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/Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.