Mobile Header Layout

[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.

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Leo]

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 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

[Leo]

Is 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/

[Ash]

Yes it’s still added and change hook

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

[Leo]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Ash]

See here https://streamable.com/wpyon6

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

[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;
}

[Leo]

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

[Ash]

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

[Leo]

The 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/

[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.

[Leo]

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/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts