Centered menu

Hello,

I need to center mu menu. I tried the follow:

.tm-primary-menu{
  margin:0 auto;
}

I also tried to add .uk-container-center (in the inspector, removing the float right) doesn't work neither.

Thanks in advance,

Hey Alexandra, replace uk-float-right with uk-navbar-center

<nav class="tm-primary-menu uk-navbar-center uk-navbar" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" data-markup-id="beans_primary_menu">

Thank you, it works, but now it apply a width of 565px, which is too small.

i found that is a max width of 50%, which is too small for my menu and if i put another % if the client put more items in the menu it could be wrong also...

Hey Alex,

You need to remove the floats, then center the nav and make the ul inline block. Likely we can do pretty much do everything using UIkit and Beans HTML API but you will just have to add one line of CSS too. Here is the code snippet you may add to your child theme functions.php

beans_remove_attribute( 'beans_site_branding', 'class', 'uk-float-left' );
beans_replace_attribute( 'beans_primary_menu', 'class', 'uk-float-right', 'uk-text-center' );
beans_add_attribute( 'beans_menu[_navbar]', 'class', 'uk-display-inline-block' );
beans_add_attribute( 'beans_menu_item', 'class', 'uk-text-left' );

Then you will have to add the following CSS:

.uk-navbar-nav {
 float: none;
}

Happy coding,

Thank you Thierry, I am going to try that.

Hi,

I tried to to the same instruction, bu the page turned blank.

I did all modifications insisde custom modifications for beans, in: /home/mysite/public_html/wpr/wp-content/plugins/child-theme-modifications-for-beans-master/custom/functions.php

And in: /home/mysite/public_html/wpr/wp-content/plugins/child-theme-modifications-for-beans-master/custom/custom.css

But no success.

Hey Sami,

We usually advise to use Beans official starter child theme for modifications as such. Could you discribe in more details what doesn't work (does nothing happen, is the CSS not being applied)?

It would also help if you could share a link to your page (if possible).

Thanks,

Hi Thierry, thank you for helping.

I created a fresh install of wordpress, with beans parent, and the official child theme, which is activated.

The plugin child themes modification for Beans is what I am using for editing the child theme to customize my website.

I corrected my error and the menu is centered, bellow the header. Great!

This is my code (updated):

// Customize child theme
add_action( 'beans_before_load_document', 'custom_modify_child_theme' );

function custom_modify_child_theme() {
  // sticky header
  beans_remove_markup( 'beans_site' );
  beans_add_attribute( 'beans_header', 'data-uk-sticky', 'top:0' );

 // center menu
  beans_remove_attribute( 'beans_site_branding', 'class', 'uk-float-left' );
  beans_replace_attribute( 'beans_primary_menu', 'class', 'uk-float-right', 'uk-text-center' );
 beans_add_attribute( 'beans_menu[_navbar]', 'class', 'uk-display-inline-block' );
 beans_add_attribute( 'beans_menu_item', 'class', 'uk-text-left' );
}

// Enqeue custom assets
add_action( 'beans_uikit_enqueue_scripts', 'custom_enqueue_uikit_assets' );

function custom_enqueue_uikit_assets() {

 //beans_uikit_enqueue_components( array( 'contrast' ) );
  beans_uikit_enqueue_components( array( 'sticky' ), 'add-ons' );

}

Thanks again for your support.

Another question, please.

I tried to center the logo/ header for the site... I was successfull using beans_site_title_tag to center site description. I think beans_logo_image should be de proper element to change. But how should I center it? Is it a block element? I tried block, text, container... This is what I tried, without success on centering the logo:

beans_add_attribute( 'beans_site_title_tag', 'class', 'uk-text-center');
beans_add_attribute( 'beans_logo_image', 'class', 'uk-container-center');

Can you tell me what is the proper way to center everything, logo/title and description, please?

Thanks in advance.

Cheers,

Hey Sami,

I centralized your questions in this topic since it is appropriated and was becoming a bit of a mess 🙂

You can center your logo and tag line by adding the following line in your custom_modify_child_theme() function:

beans_add_attribute( 'beans_site_branding', 'class', 'uk-text-center uk-margin-bottom' );

Note how I have also added uk-margin-bottom to add some spacing below the logo. Please make sure to replace your action tag from beans_before_load_document to wp so that your modifications apply when using plugins with custom template files.

May I ask you from where you got beans_before_load_document as it needs to change?

Thanks,

Hi Thierry,

I saw the instruction beans_before_load_document in a tutorial in themebutler. But, if I take it out, the menu goes to the right and stops being sticky. Is there a better way?

I inserted the code you provided and it worked, thank you!

Cheers Sami

Hey Sami,

You should not remove it, you should replace it with wp.

Incorrect code:

add_action( 'beans_before_load_document', 'custom_modify_child_theme' );

Correct code:

add_action( 'wp', 'custom_modify_child_theme' );

Have fun,