[ChristopherModerator]

Hi there,

#1 Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

#2 It works fine on my end, it suppose to scroll to first section which it does.

#3 Please add this code :

.x-navbar.x-navbar-fixed-top.white a.x-brand {
    margin-top: 6px;
}

Hope that helps.

[Paul RModerator]

Hi,

To fix the scroll down arrow,, I added this in Custom Javascript in the customizer.

jQuery(function($) {
  $('.x-slider-container.below .x-slider-scroll-bottom').off('touchstart click');
  $('.x-slider-container.below .x-slider-scroll-bottom').on('touchstart click', function(e) {

    e.preventDefault();
    var mastheadHeight       = $('.masthead').outerHeight();
    var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
    var sliderAboveHeight    = $('.x-slider-container.above').outerHeight();
    var sliderBelowHeight    = $('.x-slider-container.below').outerHeight();
    var heightSum            = mastheadHeight + sliderAboveHeight + sliderBelowHeight + 20 - navbarFixedTopHeight;

    $('html, body').animate({
      scrollTop: heightSum
    }, 850, 'easeInOutExpo');

  });

});

Then to fix the alignment of your logo, I added this in custom css

.x-brand {
    margin-top: 9px;
}

this is how it works now – http://screencast.com/t/1oWTtAWrz9lz

Kindly check on your end.

[pixieParticipant]

This reply has been marked as private.

[pixieParticipant]

sorry – please ignore ss #1 above.
typo makes this even harder to understand – #2 is correct.

[Paul RModerator]

Hi,

I made some adjustments to the code to achieve that.

Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[pixieParticipant]

wow – I watched the changes in real time!
Your team is taking theme webdesign to a whole new level Paul.
Big Gratitude 🙂

[LelyModerator]

You’re welcome!

Cheers!

[pixieParticipant]

Paul, Lely,

Could you assist with the color of the navigation buttons once past the slider, when the background turns brown – its hard to see the active buttons in the current color.

I did try to edit the css for this on my own with no luck – hoping its not too much to ask for 🙂

/*nav bar hover */
.x-navbar .desktop .x-nav > li > a:hover > span,
.x-navbar .desktop .x-nav > li.x-active > a > span,
.x-navbar .desktop .x-nav > li.current-menu-item > a > span {
color: #39312D;
}

I am just not sure how to keep the brown text on the transparent nav and then change the color when the nav becomes brown.

I also have the Revolution Slider set to full screen but it has a gab at the bottom – is there any way with the current settings to make it full screen like the Integrity demo?

Many thanks.

[ChristopherModerator]

Hi there,

Please add this :

.x-navbar.x-navbar-fixed-top.white li.current-menu-item > a > span, .x-navbar.x-navbar-fixed-top.white li > a:hover > span {
    color: red;
}

Please add .masthead in slider’s containers field.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.
Hope it helps.

Thanks!

[pixieParticipant]

Thank you Christopher.

I will be sure and follow your notes on separating questions.

css worked – thank you.

[pixieParticipant]

I have added the .masthead to the Slider Revolution > Slider Settings as in the screen shot below.
But this has not effect so I am most likely in the wrong place – a tiny bit more direction please.

[ChristopherModerator]

Hi there,

Please remove following code from customizer :

@media (min-width:979px){
.x-slider-container.below {
    margin-top: -90px;
}}

You may need to remove following script as well :

jQuery(function($) {
  $('.x-slider-container.below .x-slider-scroll-bottom').off('touchstart click');
  $('.x-slider-container.below .x-slider-scroll-bottom').on('touchstart click', function(e) {

    e.preventDefault();
    var mastheadHeight       = $('.masthead').outerHeight();
    var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
    var sliderAboveHeight    = $('.x-slider-container.above').outerHeight();
    var sliderBelowHeight    = $('.x-slider-container.below').outerHeight();
    var heightSum            = mastheadHeight + sliderAboveHeight + sliderBelowHeight + 20 - navbarFixedTopHeight - navbarFixedTopHeight;

    $('html, body').animate({
      scrollTop: heightSum
    }, 850, 'easeInOutExpo');

  });

});

Hope it helps.

[pixieParticipant]

Perfect!
Many thanks.
Over and out 🙂

[LelyModerator]

You’re welcome!

Cheers!

[Author]

Posts