Mobile Header Layout

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 :)

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

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 :)

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

Is the code still added?

Can you try adding it to inside_navigation instead?

Yes it's still added and change hook

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

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

See here https://streamable.com/wpyon6

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

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

Can't see any reason why that would happen.

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

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

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

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.

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/