[dmozParticipant]

I’m trying to create a simple fading slider background behind a static header (scrolls with page), but neither the slider nor the header is working. I’ve created a clone WP install (identical install copied and migrated with BackupBuddy to a subdirectory on the same server) to test it with the demo content, and both work fine there. My first install is set to Static Header, but the dynamic class x-navbar-fixed-top is still being applied on scroll. The slider shows the first slide(ie. recognizes there’s actually a slider), but doesn’t show my overlay layer or transition to any of the other slides. Could you possibly check my site and tell me what’s going on? Been stuck on this for hours.

Thanks!

Site url: http://vipsports.co/
WP version: 4.3.1
X-Theme version: 4.1.0
Cornerstone version: 1.0.6
Revolution Slider version: 5.0.6

[dmozParticipant]

This reply has been marked as private.

[RadModerator]

Hi there,

Thanks for posting in.

I’m not sure what’s the issue, but you mind providing your clone’s url where it works okay?

Header and slider works on my end, but the background isn’t. Though, I’m not really sure if I’m on right direction.

Thanks!

[dmozParticipant]

The demo site where the static header and slider were working is: http://vipsports.co/demo/

Also, I need to put a small input form in the top section below the nav on top of the slider. What’s the best way to accomplish this? Is it better to use a Rev Slider(what i’m using now, but I don’t know the best way to put the form on top), or create a section in the X options with a slider background and the content on top?

Thanks for your help.

[FriechModerator]

Hi There,

Would you mind doing a test for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Regarding the second query, you can create a new text layer on slider and paste the form shortcode on that layer.

Thanks!

[dmozParticipant]

Ok, I actually don’t need to make it static anymore. The client changed his mind and wants it fixed. But I do need to change the background color of the header to white once you start scrolling. Is there a setting for that?

Another issue related to the header is that I need it to turn into the mobile menu sooner than it does now. Are there CSS breakpoints I can edit that will make that happen?

For the second query, do you mean create a new text layer on top of a Revolution Slider or on top of an X section with a slider? That’s really what I need to know.

Thanks for your help!

[RadModerator]

Hi there,

1. In that case, please set your navigation to fixed top then add this css with your preferred color.

.x-navbar-fixed-top {
    background-color: #ccc !important;
}

And please add this code at Admin > Appearance > Customizer > Custom > Javascript.

jQuery( function($) {

$(window).on('scroll', function(){

var sTop = $(this).scrollTop() + $('#wpadminbar').height();
var nTop = $('.x-navbar').offset().top;

if( sTop >= nTop ) {
$('.x-navbar').addClass('x-navbar-fixed-top');
} else {
$('.x-navbar').removeClass('x-navbar-fixed-top');
}

});

} );

2. Let say you wish to display mobile menu as early as 1200px

  @media ( max-width: 1200px ) {
.x-nav-wrap.desktop {
    display: none;
}
.x-btn-navbar {
    display: block;
    float: right;
}
.x-nav-wrap.mobile {
    display: block;
    height: 0;
}
.x-nav-wrap.mobile.collapse.in {
    height: auto;
}
}

3. Yes, create text layer on top the slider, then add your form shortcode inside that text layer.

Hope these helps.

[dmozParticipant]

Hi,
Thanks very much for your help!

1. I added the custom CSS and javascript, and the header turns white on scroll, but doesn’t turn back to clear if you scroll back to the top. Is that possible?

2. Thanks for the code. The site actually displays the mobile menu early enough, I’ll need to see if I can make the nav menu responsive instead before that. You’ll see it’s too wide and runs into the logo around 1330px wide.

3. I realize I need to add a text layer on top of the slider. What I need to know is if I add the slider in the WordPress settings (here: http://prntscr.com/8jz7m5) and add text in the Revolution Slider settings, or if I add the slider in a page section (here: http://prntscr.com/8jz7y2) and add the text layer there. Does that make sense?

Thanks

**EDIT** My social links that were working fine (I was instructed to get them working here: https://community.theme.co/forums/topic/icons-in-nav-not-working/#post-395263) have disappeared after making these last edits. Any ideas with that?

[Nabeel AModerator]

Hi again,

1. You can fix it by adding the following script in your Customizer:

jQuery( function($) {
$(window).scroll(function(){
		if( $(this).scrollTop() < 100 ) {
			$('.x-navbar-fixed-top').removeClass("x-navbar-fixed-top");
		}
	});
});

2. You can activate a mobile menu before the navbar touches the logo. You can do this by adding the following code in your Customizer via Appearance > Customize > Custom > CSS:

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

Then add this Script in your Customizer via Appearance > Customize > Custom > CSS:

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");
		}
	});
});

3. Both would work, better way would be to add a slider WordPress settings: Slider Below Masthead http://prntscr.com/8jz7m5

Let us know how this goes!

[dmozParticipant]

1. Ok, cool. It was sort of wonky how you had to scroll and the menu scrolled with the page, but only turned “fixed” after a certain point. I want it to always be fixed, but only turn white after you scroll a bit. So I took out the bits for the scrolling+fixed style, made it just always fixed, and only have the “add a style after this much scrolling” script add the white background. Thanks for the code and fueling that solution though!

2. The mobile menu activates at a good spot. So that’s fine. I want to have the menu text decrease in size, still keeping the desktop look and everything, because 1300px is a little large still to be switching to a mobile menu I think. Any ideas on that?

3. Ok, cool. I’ll look into that. Thank you!

[John EzraMember]

Hi there,

Thanks for updating the thread! For Number 2, you can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width:1310px){
    .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width:1160px){
    .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
        padding-left: 5px;
        padding-right: 5px;
    }
}

@media (max-width:1035px){
    .x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
        padding-left: 2.5px;
        padding-right: 2.5px;
    }
}

Also, note that your grey semitransparent overlay doesn’t fill the screen on higher resolutions. I would recommend you create that effect in your image editor instead of trying to do it with CSS.

Hope this helps – thanks!

[dmozParticipant]

Awesome, that works great!

Yea, I’m considering a few options for that background overlay.

Are you able to see why my nav social icons aren’t showing up anymore? They were in between the text nav and the button on the far right.

Thanks for all your help!

[FriechModerator]

Hi There,

Those menu items has blank label. Please update your menu and add the icon code as the label.

Hope it helps, Cheers!

[dmozParticipant]

Thanks. They weren’t blank when I wrote my message. Now I add the icon code in the Navigation Label fields, click “Save & Update”, then refresh the editor and the fields are blank again. Any ideas why that’s happening now?

[ChristopherModerator]

Hi there,

I was able to fix your menu by adding following code in navigation label :

<i class="x-icon-twitter" data-x-icon=""></i>

For more information check this link : https://theme.co/changelog/#theme-4-0-0

Thanks.

[Author]

Posts