Docs

[Nerdy Kev]

Howdy! So, after the update, my menu on http://www.thatentertains.com/awesomepodcast is in the correct spot, but it is now vertical instead horizontal.

thoughts?

[Friech]

Hi There,

Navigate to Appearance > Menus and then on the Manage Locations tab make sure you have a menu that set as the Primary Menu.

Hope it helps, Cheers!

[Nerdy Kev]

If you read this entire thread, the idea is that the entire site uses one menu (http://www.thatentertains.com) in a fixed left position. On the page I provided above (http://www.thatentertains.com/awesomepodcast), I’m using a different menu (using Menu Swapper) in a different position (top). It worked 100% prior to the upgrade (it’s using a mix of custom java and css (provided by you guys) to get the job done). All that code is listed above, as are my credentials in a private post.

How can I fix the menu on http://www.thatentertains.com/awesomepodcast so that it’s horizontal vs. vertical?

Thanks!

[Rupok]

Hey there,

I got you. It seems your page ID has been changed as you might have changed the page somehow. So the suggested code won’t work anymore.

You need to update the codes with correct page ID (page-id-2474).

CSS :

@media (min-width:979px){
.page-id-2474 .x-navbar.x-navbar-static-top {
    position: relative !important;
    top: 100% !important;
}
}

Javascript :

(function($){
  $('.page-id-2474 .x-navbar').removeClass('x-navbar-fixed-left');
  $(window).on('scroll', function(){
    $('.page-id-2474 .x-navbar').removeClass('x-navbar-fixed-left');
  });
})(jQuery);

Hope this helps.

Cheers!

[Nerdy Kev]

Thanks! Sadly, the menu on http://www.thatentertains.com/awesomepodcast/ looks exactly the same.

[Nabeel A]

Hi there,

The script isn’t applied properly (see attached) Remove the code from Customizer and add this code in your Child Theme’s functions.php file instead:

function nav_scroll() { 
?>
<script>
(function($){
  $('.page-id-2474 .x-navbar').removeClass('x-navbar-fixed-left');
  $(window).on('scroll', function(){
    $('.page-id-2474 .x-navbar').removeClass('x-navbar-fixed-left');
  });
})(jQuery);
</script>
<?php 
}

add_action('wp_head','nav_scroll');

Let us know how this goes!

[Nerdy Kev]

Question: Is this part of the X upgrade? Because prior to the most recent upgrade, the solutions that were provided in this thread allowed the menu to work properly on thatentertains.com/awesomepodcast (which differs from the main page, thatentertains.com).

Also, where would I find the correct functions.php? I added the code above to a functions.php file located in the theme root (x) and it didn’t work (I removed it for fear of it messing something else up on the site).

This is a little frustrating :(. The site worked PERFECTLY before the upgrade and now this page (and pages associated with it) are useless because the menu is on top of most (if not all) the content. I have a fairly high profile interview posting this week and people are going to be directed to this page to listen and they can’t with the site as it is.

[Rad]

Hi there,

It’s not part of the update.

The only recommended functions.php that you can edit is your child theme’s functions.php. If you can’t find it then you probably don’t have a child theme yet. I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Have you tried clearing the cache and deactivating them before and after the update? Caching always breaks sites when an update is pushed due to stale resources from old version.

Thanks!

[Nerdy Kev]

I have installed the child theme, removed the invalid code, and added the script to the child theme’s functions.php. I’ve cleared the cache and it’s still acting the same. The menu is still showing up centered in the middle of the page as a vertical menu (thus, laying on top of the content). I need it to be horizontal.

[Nerdy Kev]

Ok… I just discovered that it loads vertical (image 1). When I scroll, it goes horizontal (image 2)… but way out of whack. As I move along the menu options, it starts to shrink to one line and look somewhat normal (image 3).

[Lely]

Hi There,

Can you try updating this code to this:

function nav_scroll() { 
?>
<script>
(function($){
  $('.page-id-2474 .x-navbar').removeClass('x-navbar-fixed-left');
  $(window).on('scroll', function(){
    $('.page-id-2474 .x-navbar').removeClass('x-navbar-fixed-left');
  });
})(jQuery);
</script>
<?php 
}

add_action('wp_head','nav_scroll');

To this:

function nav_scroll() { 
?>
<script>
(function($){
  $('.page-id-2474 .x-navbar').removeClass('x-navbar-fixed-left');
  $(window).on('scroll', function(){
    $('.page-id-2474 .x-navbar').removeClass('x-navbar-fixed-left');
  });
})(jQuery);
</script>
<?php 
}

add_action('wp_footer','nav_scroll');

The first line which remove the class x-navbar-fixed-left from navbar on load doesn’t seem to work. Let’s try moving the code to footer to make sure it was loaded already before the code runs. Do let us know how this goes.

[Nerdy Kev]

That has done the trick! THANK YOU!

Quick question… I have two or three more pages that need to act exactly like this page. Do I need to replicate this code for each page id, or can I add each page to the single function?

Thanks

[Christopher]

Hi there,

You need to edit two lines :

$('.page-id-2474 .x-navbar').removeClass('x-navbar-fixed-left');
 $('.page-id-2474 .x-navbar').removeClass('x-navbar-fixed-left');

Assume that new page ID is 34, selectors should be divided by comma, e.g :

function nav_scroll() { 
?>
<script>
(function($){
  $('.page-id-2474 .x-navbar,.page-id-34 .x-navbar').removeClass('x-navbar-fixed-left');
  $(window).on('scroll', function(){
    $('.page-id-2474 .x-navbar,.page-id-34 .x-navbar').removeClass('x-navbar-fixed-left');
  });
})(jQuery);
</script>
<?php 
}

add_action('wp_footer','nav_scroll');

Hope it helps.

[Nerdy Kev]

Hi again! The menu is still in the correct location and looks great after the page fully loads, but when the page first loads, it shows the OG graphic (which is on ThatEntertains.com) and the menu is slightly out of wack. It only takes about 2-4 seconds to load properly, but I was wondering if there was a way to make it load more seamlessly?

http://www.thatentertains.com/awesomepodcast/ (this is the page with the menu has been modified from the rest of the site).

Thanks.

Kev

[Rupok]

Hi there,

It seems loading seamlessly already and I don’t see such 2-4 sec waiting. If you still want to make it more faster; you can review our Performance guide.

Cheers!

[Author]

Posts