Relocate new menu (not primary not footer) into x-topbar

Support
#1

In x-child, I created a top menu and placed it below primary-menu. You can see it https://be.a.cloudgeni.us

What changes do I need to relocate top menu inside x-topbar along side the social icons?

in x-child/functions.php, I have


function register_my_menu() {
	  register_nav_menu('top',__( 'Top Menu' ));
}
add_action( 'init', 'register_my_menu' );

and in x-child/header.php, I have

<?php

// =============================================================================
// HEADER.PHP
// -----------------------------------------------------------------------------
// The site header.
// =============================================================================

?>

<?php x_get_view( 'header', 'base' ); ?>
<?wp_nav_menu( array( 'theme_location' => 'top', 'container_class' => 'x-topbar' ) ); ?>

and custom css is


ul#menu-top li {
  list-style: none;
  text-align: center;
  padding: 5px;
  margin-right: 30px;
  font-size: 0.7em;
}

ul#menu-top {
  margin: 0 auto;
  width: 960px; /*menu width*/
  display: flex;
}
#2

Hi There,

Please change this custom CSS:

ul#menu-top {
  margin: 0 auto;
  width: 960px; /*menu width*/
  display: flex;
}

To this:

ul#menu-top {
    margin: 0 auto;
    width: 100%;
    max-width: 1200px;
}

After that also add this CSS:

li#menu-item-1630 {
    margin-right: 0 !important;
}
#3

Thanks. I did those CSS changes and got this result not what I wanted.

The x-topbar has p-info and x-social-global and I want this top menu with Dashboard + other items to the right side of the x-social-global in x-topbar. What would it take to make that happen?

PS: I have reverted to what I had for the time being since this is a live site.

#4

I think using header.php in x-child is not going to help so I deleted header.php that from x-child because I suspect I need a partial so I copied

cp x/framework/legacy/cranium/headers/views/global/_topbar.php x-child/framework/views/global/_topbar.php

and edited the partial _topbar.php like this.

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">

      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>


     
      <?php wp_nav_menu( array( 'theme_location' => 'top', 'container_class' => 'x-topbar',) ); ?>



      <?php x_social_global(); ?>

    </div>
  </div>

<?php endif; ?>

Given this, can you please provide me with correct css edits so that I can create this sequence p-info + x-top-menu + x_social_global all in one line at the very top in the x-topbar?

I would like the x-top-menu to right-justify and occupy the space available between p-info on very left and the x-social-global on the very right.

Thanks.

#5

Hi,

Please move socials on top of menu


 <?php x_social_global(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'top', 'container_class' => 'x-topbar',) ); ?>

Then you can add the code below in Custom CSS

.x-topbar .x-nav {
   float:right;
}

.x-topbar .x-nav li {
    float:right;
}

Hope that helps

#6

moved social before top-menu in the partial and added the css you provided.

Shows good signs in mobile but

desktop is missing p-info and x-social-global wonder why?

and how do I fix this? Appreciate your help. Thanks.

#7

I added x-nav class to the top menu because I saw it was missing.

so new partial _topbar.php looks like this.

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">

      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>

      <?php x_social_global(); ?>

      <?php
        wp_nav_menu( array(
          'theme_location' => 'top',
          'container_class' => 'x-topbar',
          'container' => false,
          'menu_class' => 'x-nav sf-menu'
        ) );
      ?>

    </div>
  </div>

<?php endif; ?>

I also have this custom css.

.x-topbar .x-nav {
  float:right;
}

.x-topbar .x-nav li {
  float:right;
}


ul#menu-top li {
  font-size: 0.6em;
}

Now the menu is visible but misaligned in desktop.

but missing in mobile.

Please guide how do I get it right? Thanks.

#8

Hi there,

Please create a media query with the minimum width of 767px and the maximum width of 876px then use the selector ul#menu-top and set its width to 100% so that the menu will be positioned to the left.

As for the mobile, the menu seems to be displaying fine but aligned to the left as opposed to the logo and the social icons that are centered align. To align the menu on the center, create a media query for 480px (max) and add margin: 0 auto; to ul#menu-top

Hope this helps.