Docs

[Nerdy Kev]

Hello! I’ve implemented menu swapper and it works great! However, on the page that I’m using a different menu, I don’t want it fixed to the left- I’d like to move it as a static top menu. The page in question is dev.thatentertain.com/awesomepodcast

Thanks a bunch!

[Rahul]

Hi there,

I am unable to reach the website you’ve given. Can you please recheck and send us the URL?

Thanks!

[Nerdy Kev]

Sorry about that! Forgot the a letter!

http://dev.thatentertains.com/awesomepodcast/

[Nabeel A]

Hi there,

Thank you for providing the URL, Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-navbar-fixed-left {
    position: absolute !important;
    display: table !important;
}

Then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

jQuery(document).ready(function($){
	var bodyHeight = $('body').height();
	$('.x-navbar').height(bodyHeight + 'px');
}); 

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Nerdy Kev]

Good morning! I’ve added the above code and the menu appears as fixed left everywhere still (after clearing cache). thoughts?

[Rahul]

Hi there,

Please try the following custom codes :

CSS :

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

Javascript :

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

Please change the ID 888 to your page id for that page you’re trying to edit.

I hope this helps.

Thanks

[Nerdy Kev]

Looks like it moved to the top, but it’s not formatted correctly and messes with the format of the entire page. Thoughts?

Thanks for all your help on this!

[Nerdy Kev]

I also noticed that if you shrink the screen on the main site (dev.thatentertains.com), the “mobile” menu is always open and blocks content.

[Jade]

Hi there,

I tried to check the page of your site but I can’t seem to see the code added to it so I am not sure about the adjustment to make.

Would you mind giving your admin access so that we could do the testing by ourselves? Thank you.

[Nerdy Kev]

This reply has been marked as private.

[Christopher]

Hi there,

Please add this :

body.page.page-id-2474 .x-navbar {
    width: 100%;
}
body.page.page-id-2474 {
    padding-left: 0;
}

Hope it helps.

[Nerdy Kev]

that worked! Thanks!

[Joao]

Great, let us know if you need help with anything else.

Joao

[Nerdy Kev]

Hey, I just noticed that the spacing is a it off (mainly with how the letters run into the blue bar (indicating what page you’re on)). Is there a way to A) make it so the blue bar isn’t on top of the first letter or B) have it appear ABOVE the menu item (I think this is how it works normally).

please see dev.thatentertains.com/awesomepodcast for that reference– thanks!

Also, and this may be a newbie question, but since I have multiple pages that are using this style of menu, is there a better way to code it than copying/pasting/editing page ID for each page? Can I group pages together in the global CSS and Java?

Thanks once again!

[Rupok]

Hi there,

Thanks for writing back. You can add this under Custom > CSS in the Customizer.

.x-navbar .desktop .x-nav {
  margin: 10px auto 0;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
  border-top: 4px solid #1e73be;
  box-shadow: none;
  padding-top: 15px;
}

If you want to apply styles for specific pages, then you need to use the specific ID, otherwise you could apply this globally if you to have them same style. In that case just use body instead of body.page-id-X.

Thanks!

[Author]

Posts