[Maximilian LParticipant]

Hi. I’m having some problems with the top menu at smaller resolutions. At a certain interval of page width, the menu drops down into the slider, before it at lower resolutions switch to the button-dropdown-menu for mobile. How can I adjust the width at which it will change to the alternate menu (mobile)?

Also, I’m wondering how to enable a slider for the Blog-page, as I have been unable to do this.

Thanks a lot in advance

[KoryKeymaster]

Hey Maximilian,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have have provided us with your URL, we will be happy to assist you with everything.

[Maximilian LParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey Maximilia,

That is because you have many menu items. Please remove two items. If you really need them, the only solution for it is to set the menu item’s background to white.

In the Customizer > Custom > CSS, please add the code below.

.x-navbar .x-nav > li {
background: white;
}

Hope that helps. 🙂

[Maximilian LParticipant]

Is there no other solution to make it switch to the responsive menu (the icon with dropdown) at a larger width than it is currently set too?

I’m afraid the solution you provided does not really appeal to me aestheticly.

edit: also please reply to my second question “Also, I’m wondering how to enable a slider for the Blog-page, as I have been unable to do this.”

Thanks in advance

[KoryKeymaster]

Hey Maximilian,

Thanks for writing in! Regretfully, there is no way to make the mobile menu appear sooner due to some developmental nuances with the theme. This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principal applied to filling up a room with furniture—there is only so much that can fit into a given space. The following should be considered in these situations:

• Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.
• Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
• Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.
• Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.
• Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate.

As for your second question, sliders cannot be placed on index pages at this time (i.e. the blog, shop, et cetera) due to the way WordPress sees them since they aren’t really “pages” anymore. We are investigating implementing a fix for this, but for the time being if you want to implement this you’ll need to do so with some custom setup. The first thing you’re going to want to do to implement these changes is setup a child theme. There is an in-depth article on how to do this in the Knowledge Base, so make sure to check that out if you’re not familiar with how to get a child theme up and running.

After that, you’re going to need to copy over a template file to your child theme so that we can update the markup safely. Again, there is an in-depth article on this in the Knowledge Base if you’re interested. All you’re going to do is need to copy this file in your parent theme (theme directory included for reference):

/x/framework/views/integrity/wp-header.php

To this location in your child theme (you will need to create the filepath):

/x-child-integrity-light/framework/views/integrity/wp-header.php

Next, you’ll need to create your slider in the Revolution Slider plugin. Upon creating your slider you should receive a shortcode generated by the plugin (it will look something like this: [rev_slider test]). Take that shortcode as you’re going to need it for the next step.

Open the wp-header.php file that you copied over to your child theme. If you want to place your slider above the masthead, replace everything in the file with the following code:

<?php

// =============================================================================
// VIEWS/INTEGRITY/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Integrity.
// =============================================================================

?>

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

  <!--
  BEGIN #top.site
  -->

  <div id="top" class="site">

    <?php
    if ( is_home() ) {
      echo '<div class="x-slider-revolution-container above">';
        echo do_shortcode( '[rev_slider test]' );
      echo '</div>';
    }
    ?>
    <?php x_get_view( 'global', '_slider-revolution-above' ); ?>

    <header class="masthead" role="banner">
      <?php x_get_view( 'global', '_topbar' ); ?>
      <?php x_get_view( 'global', '_navbar' ); ?>
      <?php x_get_view( 'integrity', '_breadcrumbs' ); ?>
    </header>

    <?php x_get_view( 'global', '_slider-revolution-below' ); ?>
    <?php x_get_view( 'integrity', '_landmark-header' ); ?>

If you want to place your slider below the masthead, replace everything in the file with the following code:

<?php

// =============================================================================
// VIEWS/INTEGRITY/WP-HEADER.PHP
// -----------------------------------------------------------------------------
// Header output for Integrity.
// =============================================================================

?>

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

  <!--
  BEGIN #top.site
  -->

  <div id="top" class="site">

    <?php x_get_view( 'global', '_slider-revolution-above' ); ?>

    <header class="masthead" role="banner">
      <?php x_get_view( 'global', '_topbar' ); ?>
      <?php x_get_view( 'global', '_navbar' ); ?>
      <?php x_get_view( 'integrity', '_breadcrumbs' ); ?>
    </header>

    <?php
    if ( is_home() ) {
      echo '<div class="x-slider-revolution-container below">';
        echo do_shortcode( '[rev_slider test]' );
      echo '</div>';
    }
    ?>
    <?php x_get_view( 'global', '_slider-revolution-below' ); ?>
    <?php x_get_view( 'integrity', '_landmark-header' ); ?>

Note that you will need to update the [rev_slider test] shortcode in the do_shortcode() function with your own shortcode for this to work properly.

Thanks!

[John PParticipant]

I have a client reporting this issues:
When Website is viewed on a laptop or smaller device, the Navigation Bar is listed in a vertical direction and loses the formatting of the Navigation Bar. This needs to be corrected.

It would be kind of a bummer if I have to say there’s nothing I can do about this. Can you help?

[John PParticipant]

This reply has been marked as private.

[RadModerator]

Hi John,

I don’t see any problem. Mobile menu is tend to use vertical layout due to it’s small width.

Break point for mobile menu start at 979px width and all sub-menu will be open by default, because of certain reason.

Mobile devices :
1. Does not hover feature that will trigger expand/collapse of sub-menu
2. If it will be triggered by onclick, it will disable the linking of parent menu items.

So the solution is opening sub-menus by default or disabling parent menu item like this http://theme.co/x/member/forums/topic/mobile-navigation-2/#post-59249

I’m not sure why your client’s laptop screen is so small that can trigger a 979px width break-point. Is he using a netbook? Hmm, but netbook has 1024px width. I resize my screen to 1024px and it doesn’t show a mobile menu.

I checked that site in mobile/tablet, and formatting is okay. The only thing i noticed is navigation’s background image (http://awesomescreenshot.com/05030rj0ad) which is small. So when menu is expanded, it creates a transparent effect. I recommend to hide this background while on mobile view.

Your css should be like this :

@media (min-width: 980px) {
.x-navbar {
background: url("http://www.akashicalphabet.com/wp-content/uploads/2014/04/bkg-header.jpg") no-repeat left !Important;
text-decoration: none !Important;
text-weight: bold !Important;
}
}

Thank you.

[John PParticipant]

Thanks.
Looking at it on my Android Samsung Galaxy S3, the menu seems to look good, but the submenu items do not work on single click – I have to long press and click Open for them to take.

Then on the pages, there is not content – on the Shop page, there is only the Buy button.

Do you know why.

[RadModerator]

Hi John,

Does this problem just occur after adding the code? Does the content too?

Could you try removing them again, and I’ll come up with fix specific to your setup.

Could you try adding this for none content issue.

* {
  -webkit-transform: value !important;
}

Let us know.

[Matthew SParticipant]

This reply has been marked as private.

[Matthew SParticipant]

Also logo appears to have lost responsiveness. Sorry I couldn’t edit the last post to include this, the edit function isn’t working on my end. Thanks again.

[RadModerator]

Hi Matthew,

Try adding this css at your customizer’s custom css.

@media ( max-width: 979px ) {
.x-btn-navbar {
display: block;
}
}
.x-navbar .x-nav {
text-align: center;
}
.x-navbar .x-nav>li {
float: none!important;
display: inline-block;
}

This should center your menu and fix mobile menu. But your logo was already centered.

Thanks!

[Matthew SParticipant]

Thank you, that worked for the menu issues. The issue with the logo I realize is not that it isn’t centered, but that it isn’t responsive. So when the site is viewed in a small browser window the logo is cut off or larger than the content width. Is there a way to make it responsive like the rest of the site?

Also wondering if there is a trick to make the slider match the content width. I’ve played with all the settings in the slider itself as well as the theme Customization settings but no matter what I choose the slider sticks out past the content.

[Author]

Posts