Docs

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi,

I have an issue with some modifying I’ve done to the header to make the logo site below the navbar. For mobile view I need the breakpoint to be increased (the navigation wraps so I want the mobile menu to show when the screen size is 1000px wide).

I also have an issue with the menu once it does show. The first link goes behind the logo. I tried adding padding to the menu when collapsed and it works but the slide transition isn’t smooth (it slides to a point and then snaps up).

I also would like to put two buttons in the top bar floated right, but I can’t seem to find a code that works.

Thanks

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Nabeel A]

Hi there,

Thanks for writing in! To achieve this please add the following code in your Customizer via Appearance > Customize > Custom > CSS:

@media screen and (min-width: 980px) and (max-width: 1000px) {
	.x-nav-wrap.desktop {
		display: none;
	}
	.x-btn-navbar, .x-btn-navbar.collapsed {
		font-size: 24px;
		display: block;
		width: 4%;
		float: right;
	}
}

and then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
	$('.x-btn-navbar').click(function(){
		if($(".x-nav-wrap.mobile").is(':visible')){
			$('.x-nav-wrap.mobile').css("display", "none");
		}
		else{
			$('.x-nav-wrap.mobile').css("display", "block");
		}
	});
});

To add a button in topbar, you can use this code:

<a class="x-btn x-btn-global" style="float: right; text-transform:uppercase;padding: 15px 30px 15px 30px;" href="#">Button</a>

Hope this helps!

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Paul R]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

@media (max-width: 1117px) {
.x-navbar .x-nav-wrap.desktop {
   display:none;
}

.x-navbar .x-nav-wrap.mobile
   margin-top: 160px;
}

.x-navbar .x-nav-wrap.mobile.collapse.in {
   display:block !important;
}

.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}
}

Hope that helps

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Joao]

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

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

Thanks

Joao

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Nabeel A]

Hi again,

I’ve checked your site and I see you have not added the code we provided. Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (min-width: 980px) and (max-width: 1180px) {
	.x-nav-wrap.desktop {
		display: none;
	}
	.x-btn-navbar, .x-btn-navbar.collapsed {
		font-size: 24px;
		display: block;
		float: right;
	}
}

and then add the following jQuery script in your Customizer via Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
	$('.x-btn-navbar').click(function(){
		if($(".x-nav-wrap.mobile").is(':visible')){
			$('.x-nav-wrap.mobile').css("display", "none");
		}
		else{
			$('.x-nav-wrap.mobile').css("display", "block");
		}
	});
});

This should work. Let us know how this goes!

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Could someone please also answer the questions I posted earlier (here they are again)

I am also struggling to add a revolution slider to the latest news blog posts (I’d like a different slider for each category, is this possible?)

Lastly is it possible to replicate the Integrity style as a Essential grid item? (Like the Integrity side bar in the link I just gave you) Is there some css to achieve this without editing or creating a new skin?

[Paul R]

Hi,

To fix the mobile menu, you can add this under Custom > CSS in the Customizer.

/* adjust menu position to appear below logo */
@media (max-width: 1480px) {
  .x-navbar .x-nav-wrap.mobile {
   margin-top: 160px !important;
}
}

With regards to different slider for each category, 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!

[3b1a2f46-a516-40cf-beba-b611930e4819]

Lastly is it possible to replicate the Integrity style as a Essential grid item? (Like the Integrity side bar in the link I just gave you) Is there some css to achieve this without editing or creating a new skin?

[Nabeel A]

Hi again,

Regretfully, this particular customization request is outside the scope of our support, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Author]

Posts