[Resolved] Mobile Header Layout

Home Forums Support Mobile Header Layout

Viewing 15 posts - 1 through 15 (of 47 total)
  • Author
    Posts
  • #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.

    #1307817
    Leo
    Staff
    Customer Support

    Hi there,

    Can’t quite picture what you are after.

    Are you able to show a mock-up of what you want?

    Let me know šŸ™‚

    #1308390
    Ash

    https://ibb.co/WnFTNST

    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

    #1308888
    Leo
    Staff
    Customer Support

    So 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 šŸ™‚

    #1309489
    Ash

    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

    #1310067
    Leo
    Staff
    Customer Support

    Is the code still added?

    Can you try adding it to inside_navigation instead?

    #1310772
    Ash

    Yes it’s still added and change hook

    Adding the hide class to the search hook breaks the layout for desktop.

    #1311394
    Leo
    Staff
    Customer Support

    Start 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/ZdAjwJOhlC

    #1312073
    Ash

    See here https://streamable.com/wpyon6

    Also is there not a hook to add to mobile menu?

    #1312194
    Ash

    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;
    }
    #1312807
    Leo
    Staff
    Customer Support

    Can’t see any reason why that would happen.

    Maybe just remove the classes and we will use CSS to hide it instead.

    #1312844
    Ash

    Any difference between using class and css? Rather not load them at all for performance.

    #1312993
    Leo
    Staff
    Customer Support

    The hide-on classes are using CSS as well so no difference.

    #1313036
    Ash

    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.

    #1313183
    Leo
    Staff
    Customer Support

    Couldn’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/

Viewing 15 posts - 1 through 15 (of 47 total)
  • You must be logged in to reply to this topic.