Mobile header

Hello everyone.

I was wondering if there is any other way to show a mobile header which will be available only on the mobile screens with a new logo and the off canvas menu and new background..??

Hey Anupam,

Check the UIkit utilities and scroll down to Responsive visibility. You will see the various class available to show/hide on a breackpoint basis.

Let's say you want to replace your logo from the large breakpoint and smaller. You could add the following snippet to your child theme functions.php:

beans_add_attribute( 'beans_site_branding', 'class', 'uk-visible-large' );

add_action( 'beans_site_branding_after_markup', 'example_mobile_logo' );

function example_mobile_logo() {

 ?><img class="uk-hidden-large" src="https://cdn2.iconfinder.com/data/icons/publicons/64/wordpress-32.png" alt="Example Logo"><?php

}

Hope that helps,

Hey Thierry

Thank you so much i understood that. I was facing a issue with nav. I want to hide the primary nav at perticular width but it is not working i'm using media quaries and want to hide the nav when it reaches 745px but it gets hide at 958px. So is there is any fix for this problem..??

UIkit has a medium breakpoint which is 768px. If that is suitable, you could add the following to your child theme functions.php which I think is what your are after:

beans_replace_attribute( 'beans_menu[_navbar][_primary]', 'class', 'uk-visible-large', 'uk-hidden-small' );
beans_replace_attribute( 'beans_primary_menu_offcanvas_button', 'class', 'uk-hidden-large', 'uk-visible-small' );

Please note that the code above is assuming that you have a menu assigned to the primary location in Appearance->Menus

If you want it to break at 745px precisely, you will either have to write your own CSS querie or adjust the UIkit medium breackpoint by adding the @breakpoint-medium: 745px; in your child theme style.less.

I hope that helps,

Hey Thierry,

@breakpoint-medium: 745px; this perticular code broke my css and whole website style :-/

Are you sure you added it to your child theme style.less (LESS file)? Please refer to this article for more info about the starter child theme structure.

Thanks,

Ys i did and i was missing ; this. Now everything is okay. Thanks thierry. But will it slow down the website..?? Adding a responsive header

I am not sure what you mean, I think your question is "will it slow down the website".

It really depends how much code you add and how heavy they are, if it is just adjusting the breackpoint as we have done above it would absolutely not slow down your website.

Cheers,

Hey Thierry yes that was an spelling mistake. thank you for the information