[ProductionMD1986Participant]

Hi dear support team,
I have 2 questions for you:

1) I wonder if there is a way to create a double row header menu. Right now, I have six items on my menu, and I would like them to be separated in 2 rows, three on top and three on bottom.

This is an example of what I’m trying to achieve(disregarding the animations):
http://www.ville.laprairie.qc.ca/

2) And I would like to center my topbar menu.

Here is my url :
http://prodmd.com/freresmaristes/

[FriechModerator]

Hi There,

Thanks for writing in! You can add this under Custom > CSS in the Customizer to center the topbar content.

.x-topbar {text-align:  center;}
.x-topbar-inner {display: inline-block;}

I can provide you this custom CSS .x-navbar .desktop .x-nav>li:nth-child(4n) {clear: left;} to force the menu in two rows. But I think we need you to provide us with a little more clarification on what it is you’re wanting to do on this matter. We’ll be happy to provide you with a response once we have a better understanding of the situation.

Cheers!

[ProductionMD1986Participant]

Hi, thanks for to the topbar settings, it worked perfectly.

Now, about the navbar menu, maybe to break the primary menu in two rows was not a good idea. I still want to have a double row menu, so, maybe to have a primary menu and right below a secondary menu would be the best otion. How can I add a secondary menu to the header?

Heres’s an example of a double row menu I would like:

http://www.ville.laprairie.qc.ca/

Thanks again for the time you take to answer my questions.

[LelyModerator]

Hello There,

Thank you for the clarification.
Please check this thread:https://community.theme.co/forums/topic/add-an-additional-menu-under-the-top-menu/

Hope this helps.

[ProductionMD1986Participant]

Hi, I was able to make a secondary menu option appear on my dashboard by adding this code to my functions.php file (on my child theme of course):

add_action( ‘init’, ‘my_custom_menus’ );
function my_custom_menus() {
register_nav_menus(
array(
‘secondary-menu’ => __( ‘Secondary Menu’ )
)
);
}

I’ve created a secondary menu and asigned it on the dashboard, but I’m still not able to make it appear in the header, below the primary menu. I understand I have to add the code in the _navbar.php file (x-child/framework/views/global/_navbar.php), but I’m not sure what code exactly I have to add.

[JadeModerator]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[ProductionMD1986Participant]

This reply has been marked as private.

[ChristianModerator]

Please see https://codex.wordpress.org/Navigation_Menus#Display_Menus_on_Theme to learn how to display your menu in a theme. In X, yes, you will need to put it in _navbar.php below the primary nav (see attachment).

Thanks.

[ProductionMD1986Participant]

Hi, thanks for your help. I’ve succeeded to add my secondary menu to the header. Now, is there a code to give it exactly the same CSS as the primary menu, but being right below it? So the menus would be displayed in two rows, one below the other?

So close to achieve my goal…

Here are the codes so far in the _navbar.php

<?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>
<?php wp_nav_menu( array( ‘theme_location’ => ‘secondary-menu’ ) ); ?>
</div>
</div>
</div>
</div>

<?php endif; ?>

[JadeModerator]

Hi there,

Please update your code to:

  <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>            
         <?php wp_nav_menu( array( 'theme_location' => 'secondary-menu', 'container_id' => 'secondary-menu', 'container_class' => 'x-nav-wrap desktop', 'menu_class' => 'x-nav'  ) ); ?>
        </div>
      </div>
    </div>
  </div>

Then add this CSS:

#secondary-menu {
    width: 100%;
    clear: both;
    overflow: hidden;
    display: block !important;
}

#secondary-menu .x-nav {
    text-align: center;
    float: none;
    margin: 0 auto;
    width: 595px;
}

@media (max-width: 580px) {
    #secondary-menu .x-nav > li > a {
        font-size: 12px !important;
    }
}

Hope this helps.

[ProductionMD1986Participant]

Wow, it helps a lot. Thank you!

My menu looks just as I wanted… except the second menu breaks in two lines… Take a look:

http://prodmd.com/freresmaristes

weird…
I modified a little the code so both menus (primary and secondary) align perfectly, but the second menu breaks in 2 lines….

/* SECONDARY MENU */
#secondary-menu {
width: 100%;
clear: both;
overflow: hidden;
display: block !important ;
}

#secondary-menu .x-nav {
text-align: center;
float: none;
margin: 0 auto;
width: 566px;
}

@media (max-width: 585px) {
#secondary-menu .x-nav > li > a {
font-size: 12px !important;
}
}

I’m sure its just a little modification in the codes…. but I can’t seem to put my finger in it…

[JadeModerator]

Hi there,

I could see that your main menu is cutting of, to fix it, kindly find this line of code in the customizer:

.x-navbar .desktop .x-nav > li > a {
    height: 36px;
    padding-top: 1px;
}

and update it to:

.x-navbar .desktop .x-nav > li > a {
    height: 72px;
    padding-top: 1px;
}

Or simply remove the height declaration.

Then also find this CSS:

#secondary-menu .x-nav {
    text-align: center;
    float: none;
    margin: 0 auto;
    width: 595px;
}

and update it to:

#secondary-menu .x-nav {
    text-align: center;
    float: none;
    margin: 0 auto;
    width: 680px;
    min-height: 64px;
}

And lastly add this CSS:

#secondary-menu li:last-child a {
    padding-right: 0;
    margin-right: 0;
}

#secondary-menu li:first-child a {
    padding-left: 0;
    margin-right: 0;
}

Hope this helps.

[ProductionMD1986Participant]

Firt of all, thank you very much for your support. Best support team ever.
Now, I’ve changed my navbar from INLINE to STACKED and my secondary menu has disappeared…

Those are my secondary menu settings:

/* SECONDARY MENU */
#secondary-menu {
width: 100%;
clear: both;
overflow: hidden;
display: block !important ;
}

#secondary-menu .x-nav {
text-align: center;
float: none;
margin: 0 auto;
width: 680px;
min-height: 64px;
}

@media (max-width: 585px) {
#secondary-menu .x-nav > li > a {
font-size: 12px !important;
}
}

#secondary-menu li:last-child a {
padding-right: 0;
padding-bottom: 14px;
margin-right: 0;
}

#secondary-menu li:first-child a {
padding-left: 0;
margin-right: 0;
}

AND MY _NAVBAR.PHP IS SET LIKE THIS:

<div class=”x-logobar”>
<div class=”x-logobar-inner”>
<div class=”x-container max width”>
<?php x_get_view( ‘global’, ‘_brand’ ); ?>
</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>
</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>
<?php wp_nav_menu( array( ‘theme_location’ => ‘secondary-menu’, ‘container_id’ => ‘secondary-menu’, ‘container_class’ => ‘x-nav-wrap desktop’, ‘menu_class’ => ‘x-nav’ ) ); ?>
</div>
</div>
</div>
</div>

<?php endif; ?>

1)How can I make my secondary menu appear again?
2)I’ve noticed the mobile menu only includes the primary menu and not the secondary one. Is there a way to create a custom mobile menu in which I can include my primary and secondary menu pages?

Thank you

http://prodmd.com/freresmaristes/

[Paul RModerator]

Hi,

1. Please change your code in _navbar.php to this.

<?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">
        <?php x_get_view( 'global', '_brand' ); ?>
      </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>
        <?php wp_nav_menu( array( 'theme_location' => 'secondary-menu', 'container_id' => 'secondary-menu', 'container_class' => 'x-nav-wrap desktop', 'menu_class' => 'x-nav' ) ); ?>
      </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>
        <?php wp_nav_menu( array( 'theme_location' => 'secondary-menu', 'container_id' => 'secondary-menu', 'container_class' => 'x-nav-wrap desktop', 'menu_class' => 'x-nav' ) ); ?>
      </div>
    </div>
  </div>

<?php endif; ?>

2. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Author]

Posts