Menu modification

[egeislekel]

Hello there,
First of all, I want to change the font of the menu and also I want to add one small icon(able to click) to the menu. Is it possible?
Secondly is it possible to replace the logo inside the page not on the top or under the logo?

You can find the photoshopped sample to see what I want to say.

Thank you

[ruenel]

Hi @egeislekel,

Thanks for posting in!

1. To change the font of the menu, please go to X > Theme Options > Headers > Links - Text and select the font family and the font size for your menu.

2. To add one small icon(able to click) to the menu, please go to Appearance > Menus and manage your menu items. You may add a custom link and then insert an image as your menu item. For more details, please check out this codex: https://codex.wordpress.org/WordPress_Menu_User_Guide

3. Do you want to insert another logo below your current logo image? Because what you are trying to accomplish requires a template customization, we would highly to suggest that you use a child theme. This allows you to make code changes that won’t be overwritten when an X update is released.

Once you have your child theme active and ready, please follow the following steps below:

• Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
• Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$option_logo_text = x_get_option( 'x_logo_text' );
$option_logo_src  = x_get_option( 'x_logo' );
$logo_text        = ( empty( $option_logo_text ) ) ? get_bloginfo( 'name' ) : $option_logo_text;

if ( empty( $option_logo_src ) ) {
  $logo_output = $logo_text;
} else {
  $logo_src    = x_make_protocol_relative( $option_logo_src );
  $logo_output = '<img src="' . $logo_src . '" alt="' . $logo_text . '">';
}

if ( x_get_option( 'x_logo_visually_hidden_h1' ) ) {
  echo '<h1 class="visually-hidden">' . $logo_text . '</h1>';
}

?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>">
  <?php echo $logo_output; ?>
</a>

<a href="#">
  <img src="//placehold.it/400/300/00eeff" alt="alternative logo" >
</a>

Just make sure that you inserted the correct new logo details in this code:

<a href="#">
  <img src="//placehold.it/400/300/00eeff" alt="alternative logo" >
</a>

• Save the file named as _brand.php
• Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/

Hope this helps. Please let us know how it goes.