Header Menu adjustment

Support
#1

Hi there,

I’d like to ask how to achieve my design. So, here is the design i’ve been create.

And, the current layout is like this:

So, how to achieve my design? Especially with the logo and social media button part.

Thanks before for your concern.

#2

Hello There,

Thanks for the very detailed post information. Since you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAVBAR.PHP
// -----------------------------------------------------------------------------
// Outputs the navbar.
// =============================================================================

$navbar_position = x_get_navbar_positioning();
$logo_nav_layout = x_get_logo_navigation_layout();
$is_one_page_nav = x_is_one_page_navigation();

?>

<?php if ( ( $navbar_position == 'static-top' || $navbar_position == 'fixed-top' || $is_one_page_nav ) && $logo_nav_layout == 'stacked' ) : ?>

  <div class="x-logobar">
    <div class="x-logobar-inner">
      <div class="x-container max width">
      	<div class="left">
        	<?php x_get_view( 'global', '_brand' ); ?>
        </div>

        <div class="right">
        	<p>Add your contact info here</p>
        </div>
      </div>
    </div>
  </div>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php else : ?>

  <div class="x-navbar-wrap">
    <div class="<?php x_navbar_class(); ?>">
      <div class="x-navbar-inner">
        <div class="x-container max width">
          <?php x_get_view( 'global', '_brand' ); ?>
          <?php x_get_view( 'global', '_nav', 'primary' ); ?>
        </div>
      </div>
    </div>
  </div>

<?php endif; ?>

Please make sure that you have uploaded your logo in X > Theme Options > Header > Logo - Image.
And do not forget to edit the contact info from the code above.

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

You will have to create those folder path since it does not exist in your child theme yet.

#3

Hi there,
Thanks for your reply! i really appreciate it.
I’ve tried the code and sure it’s right, although there’s a little need your help again.

As you can see, the contact part seems to be center align, while i want it to be left align. And also the facebook and instagram icon doesn’t appear, although i have input the code from font awesome.

Here is the code that i put:

 <div class="right">
        	<p><h5>KONTAK KAMI</h5></p>
		<p><a href="https://www.facebook.com/ProfZubairiDjoerban/"><i class="fab fa-facebook-f"></i>profZubairiDjoerban</a></p>
		<p><a href="https://www.instagram.com/zubairi_djoerban/?hl=en"><i class="fab fa-instagram"></i>zubairi_djoerban</a></p>
        </div>

The top space and bottom also need adjustment, how to do that?
So, how to shaping it into the design i’ve created?

Again, thanks before for your help.

Regards,

#4

Hey There,

Please also add this custom CSS:

p:empty {
    display: none;
}

.x-logobar .right h5 {
    margin-top: 0;
}
.x-logobar .right p {
    margin-bottom: 10px;
}
.x-logobar-inner {
    padding: 0;
}

Let us know how it goes!

#5

Hi there,
the logo space has been solved, but the left align in the contact part still the same.
Also, i’d like to ask how to set the navigation to be left align too, with the search section set in right align. How to achieve that?

Here is screenshot after i put your css code:

Thanks again for your help.

#6

Hi There,

The HTML code you have added for the contact section please replace with this.

<div class="right header-contact">
        	<p><h5>KONTAK KAMI</h5></p>
		<p><a href="https://www.facebook.com/ProfZubairiDjoerban/"><i class="fab fa-facebook-f"></i>profZubairiDjoerban</a></p>
		<p><a href="https://www.instagram.com/zubairi_djoerban/?hl=en"><i class="fab fa-instagram"></i>zubairi_djoerban</a></p>
        </div>

and this CSS to your X->Theme Option -> global CSS

.header-contact p {
 text-align: left !important;
}

for the menu align please add this CSS.

.masthead-stacked .desktop .x-nav {
 display: block;
 width: 100%;
 text-align: left;
}
.x-menu-item-search {
 float: right;
}

Hope this helps!

#7

Hi there,
Thanks for your help. Yes, it works.
But, i still need to display the social media icon. And when i read https://fontawesome.com/get-started as my icon sources, i need to put the font awesome CDN, which is like this:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

Which is i nee to put inside tag. So, where i can find the html file consist of tag in the folder?

Again, thanks for your help

#8

Hi There,

FontAwesome is already loaded to the theme, so you don’t need that. The icons are not showing because these are wrong:

<i class="fab fa-facebook-f"></i>
<i class="fab fa-instagram"></i>

Please use the code that was provided here instead.

Cheers!

#9

Yes, it works.

Thanks a lot for your help! Really appreciate it.

#10

You’re welcome! :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.