Header and Footer menu questions

Hi support team,

I have a few questions regarding the header and footer menus on my site.

Header menu:
1 Right now you have to klick on the arrows for the submenu items to show up. I’d like that to be possible by klicking on the menu item itself

2 is it possible to remove the arrows?

3 on mobile the menu button is very far away from the logo. How can I make that space smaller without effecting the desktop and other views?

4 Is it bad for SEO when some menu items are just individual links (#) with no url?

Footer:
menu won’t show. I turned it on in X Options

Thanx in advance!

Hi There,

Thank you for writing in,

  1. What menu you’re using? Our standard X menu does not need to click for the submenu to show up. (see the demo here), perhaps you’re using a custom menu? Regretfully we can not provide support for any customization.

  2. For the X standard menu, you can hide the arrows with CSS.

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

  1. Wrap your CSS with CSS @media query so it does only affect the intended screen width.
  1. Please refer to the following article and thread.

Please confirm that you are fully updated? (Theme and Cornerstone)

You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

Cheers!

Thanks for your reply!

1 Make whole primary menu item klickable:
Sorry, I forgot to mention that it concerns the mobile menu. Before you need to klick on the arrows next to the primary menu item to show submenu items. I wanted the whole primary menu item to be klickabel.
Now I used this code from another thread:

#x-nav-wrap-mobile .x-sub-toggle {
                width: 100%;
                text-align: right;
                z-index: 999999;
        }

Is that correct?

2 Remove arrows from menu items:
Thanks for the links, I want to remove the arrows for all skreen sizes. I used to (for desktop and mobile):

.x-navbar .desktop .x-nav li>a>span:after {
    content: none;
}
.x-sub-toggle .x-icon-angle-double-down {
display:none;
} 

Is that correct, or is ther one code for all screen sizes?

4 footer menu:
I’m fully updated now. The menu still does not show.

5 I still have the problem that on mobile devices the space between logo and mobile menu button is too big. Can you provide a code for that?

Thanks!!

Hi @blueprint,

  1. Yes, it’s correct.

  2. That’s correct too :slight_smile:

  3. I can see the footer menu, but it has green color too. You can apply this CSS

.x-colophon.bottom .x-nav li a {
    color: #fff;
}
  1. Sure, please add this too
@media ( max-width: 767px ) {
.x-logobar-inner {
    padding-bottom: 60px !important;
}
}

Thanks!

Ah, ok. Thanks!! I was looking for the menu in the colophon.top.
Is it possible to place the menu above the footer content text?

Regarding the spacing between logo and menu on mobile:
Thanks for the code. The spacing appeares different in the x preview for mobile than on the pone itself (there it is cut off). I could make it bigger, but it will still cut off the logo on mobile landscape. In order to prevent cutting off the logo I can’t apply any smaller spacing. Is there some other way?

Hello There,

Thanks for updating in!

1.) The footer menu can be found in colophon.bottom. If you changes the order of the footer menu and the footer context text, 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/ICON/WP-FOOTER.PHP
// -----------------------------------------------------------------------------
// Footer output for Icon.
// =============================================================================

?>

  <?php x_get_view( 'global', '_footer', 'widget-areas' ); ?>

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

    <footer class="x-colophon bottom" role="contentinfo">
      <div class="x-container max width">


        <?php if ( x_get_option( 'x_footer_menu_display' ) == '1' ) : ?>
          <?php x_get_view( 'global', '_nav', 'footer' ); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_content_display' ) == '1' ) : ?>
          <div class="x-colophon-content">
            <?php echo do_shortcode( x_get_option( 'x_footer_content' ) ); ?>
          </div>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_social_display' ) == '1' ) : ?>
          <?php x_social_global(); ?>
        <?php endif; ?>

        

      </div>
    </footer>

  <?php endif; ?>

<?php x_get_view( 'global', '_footer' ); ?>

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

You will have to create the folder path first because it does not exist in your child theme yet.

For your logo being cut off, you are having this issue because of the custom css code that you may have added. You have this code:

.x-logobar .x-container.max.width {
    max-width: 100%;
    height: 2.2em;
}

Removing the height or by setting it to auto should resolve the issue.

We would loved to know if this has work for you. Thank you.

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