[pixieParticipant]

Thank you for amazing X and the great support system.
I have found answers to all of my questions here so far, looking forward to your assistance.

I will include my url and login below – it is in maintence mode and you will have to login to view.

Hoping for some assistance with our new navigation menus.
The end goal is to have a transparent desktop nav bar floating above the slider – check 🙂
however in desktop mode we would like help to:

#1 – keep the transparency until the scroll is past the slider.
#2 – keep the menu sticky from the point it’s bottom touches the bottom of the slider (or top of the first row of images.
#3 – change the nav bar background colour at the same time as the menu become sticky.
#4 – if the down arrow on the slider is selected to have the scroll end so the same alignment happens (bottom nav/bottom slider or bottom nav/top of the first row of images)

For the mobile menu we are closer to the goal, transparent mobile menu seems to be working and sticky/fixed and special alignment to the mobile menu icon, all solved from previous answers in the forum :
#5 – however we seem to get a flash of the full color before the transparency works – do you see the same thing?
#6 – selecting the menu provides the drop down menu but we would like it to dissappear again once a menu item is selected.

A little help please…

Thank you.

[pixieParticipant]

This reply has been marked as private.

[pixieParticipant]

I am not sure if it is ok to add to the list, but since the login details are here:

I have built a Cornerstone Slideshow, just above the footer.
The end goal was to have a full width responsive slider with many small 150 x 150 images scrolling past, on top of the footer.

It seemed to be working until I added the style code to decrease the size of the images for each of the slides.
Now there the images are not visible – is our goal attainable with this Cornerstone element?

ps – please advise if you prefer to add new questions as separate topics 🙂

[Rue NelModerator]

Hello There,

Thanks for writing in!

1] To keep the transparency until the scroll is past the slider, please update the following JS code in the customizer, Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($){
  $('.x-navbar-fixed-top').addClass("transparent-navbar");
  
  $(window).scroll(function(){
    var slider = $('.x-slider-container.below').height();
    if ($(this).scrollTop() > slider) {
      $('.x-navbar-fixed-top').removeClass("transparent-navbar").addClass("white");
    } else {
      $('.x-navbar-fixed-top').removeClass("white").addClass("transparent-navbar");
    }
  });
});

2] I think this is the current behaviour.

3] To change the nav bar background colour at the same time as the menu become sticky, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-navbar.x-navbar-fixed-top.white {
   background-color: rgba(0,0,0,0.75) !important;
}

Feel free to change the background color.

4] 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.

Please let us know how it goes.

[pixieParticipant]

Thank you Rue.

1] I have added the java to the customizer as listed above but did not see the outcome desired.
Hoping to have the nav bar transparent until its bottom reaches the bottom of the slider and then change to a colored background.

2] thank you.

3] I have added this css to the sheet and adjusted the color but there is not change from the original.

4] The current action the down arrow on the hero slider now ends in a location so that the top sentence in the 3 lines directly below the slider is covered. I press the arrow and the first line is missing and only “Join us for the day…” (the second line of text) is displayed. Can we set the action of the slider down arrow to end in a location that results in the bottom of the nav bar matching the bottom of the slider. This would allow the entire section below the slider (with all 3 lines of copy) to display if someone selects the down arrow.

5 and 6 seem to be working as well 🙂

And my additional request:

I have built a Cornerstone Slideshow, just above the footer.
The end goal was to have a full width responsive slider with many small 150 x 150 images scrolling past, on top of the footer.

It seemed to be working until I added the style code to decrease the size of the images for each of the slides.
Now there the images are not visible – is our goal attainable with this Cornerstone element?

Many thanks Rue.
Standing by.

[Rue NelModerator]

Hello There,

Thanks for updating us in!

1] I do not see that you have applied the JS code. The old code is still there: http://prntscr.com/dkstf4
In your code, you have this: if ($(this).scrollTop() > 50) { which means that when the scrolling get pass 50 pixels, then it will removeClass(“transparent-navbar”) and addClass(“white”). In my code, it calculates the height if the slider and then make it as a condition while scrolling on the page.

3] I am not seeing the css code in your customizer. All I see it this:
http://prnt.sc/dkss81

4] Please set the “Navbar Top Height” to the same height of your navbar. In the customizer, you set it to 90 pixels on the contrary the actual height is 110 pixels. Please go to customizer, Appearance > Customize > Header > Navbar > Navbar Top Height

The Cornerstone slide element is a slide per slide element. I think what you need is a carousel. At the moment there is no available carousel element in Cornerstone. You can make use of any 3rd party plugin you can find the WordPress plugins repository: https://wordpress.org/plugins/search.php?q=carousel

Hope this helps.

[pixieParticipant]

Rue – I copied and pasted your exact code as per the instructions into the Cornerstone custom css and custom js – exactly.

I see the css you provided, in the screenshot you provided, at the bottom of the code in section (line) 97.

And I see it all there still within Cornerstone (please see screen shot of Cornerstone dashboard below), with the exception being that I changed the rgb color settings in the css.

I am so sorry – I do not understand why we see different code?
How do we get past this hurdle?

[pixieParticipant]

is there a difference between adding css edits to the Cornerstone dashboard and the Customizer dashboard?

[pixieParticipant]

Hi Rue,

Ok I know realise there are 3 places one can add css, The X Customizer dashboard (x2 Custom tab and Additional CSS tab) and The Cornerstone dashboard.

I have moved the code you kindly provided (with instructions to add to the Customizer (so sorry to miss that detail) to the correct custom css location – in the Customizer, however the changes are still not active as requested.

Back to square 1?

[Paul RModerator]

Hi,

There is a missing close bracket } in your css code.

http://screencast.com/t/YUDPzOpoL7O

Please add it and let us know how it goes.

Thanks

[pixieParticipant]

Hi again Rue, sorry for any confusion and thank you for sticking with me through this.

1 & 3] I have added your original codes to the correct custom css location but the results are not seen.

4} when I make the change in customizer as suggested above (to 110) a 20px bar appears at the top of the site with the background texture displayed? Is there another option to set the end of the slider down arrow location?

[LelyModerator]

Hello There,

Css added on Cornerstone > Settings Tab > Custom CSS is specific to that page only. It will only work for that page. On the other hand, CSS added on Appearance > Customize > Custom > Edit Global CSS are sitewide. As long as it is applicable to every page it will work.

I have check the content of your custom css on Appearance > Customize > Custom > Edit Global CSS and I saw syntax errors for missing closing tag for your media queries.
Please note that for every media query there should be closing curly brace like below:

@media (max-width: 979px ) {

/*  custom css here */
}

See attached screenshot.
Look for the following part too from line 79 to line 98

/*mobile menu sticky */
@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed !important;
}
  
/*mobile menu color */
@media (max-width: 979px) {
.x-navbar-inner {
        background-color: rgba(57,49,45,0.6);
    }
  
/*mobile menu alignment */
@media (max-width: 979px ) {
.masthead-inline .x-btn-navbar {
        float: right;
				margin-top:45px;
        margin-bottom: 35px;
        display: inline-block;
    } 
  

That part are 3 media queries. All of it are missing closing curly brace. Since it’s the same media query, we can combine and correct that part to this:

@media (max-width: 979px) {

.x-navbar-fixed-top { /*mobile menu sticky */
   position: fixed !important;
}

.x-navbar-inner { /*mobile menu color */
        background-color: rgba(57,49,45,0.6);
}

.masthead-inline .x-btn-navbar { /*mobile menu alignment */
        float: right;
	margin-top:45px;
        margin-bottom: 35px;
        display: inline-block;
} 

} /*Closing curly brace for media query*/  

Then check again after.

Hope this helps.

[pixieParticipant]

Amazing – thank you for helping me with the bracket learning curve – that will not happen again.

That seemed to clear up most of the issues 🙂

Still not sure about the Nav Bar height and the extra bar across the top.
That appeared when I changed the setting as you suggested above to 110px – any ideas how to remove the extra white bar, center the logo vertically AND have the Nav Bar down arrow take us to the correct location?

Thrilled with your patience and expertise – many thanks.

[ChristopherModerator]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}
@media(min-width:979px){
header.masthead.masthead-inline {
    height: 0;
}
}

Hope that helps.

[pixieParticipant]

Thank you Christopher.

That removed the bar at the top 🙂

My end goal with the nav is to have the transparency stop when the bottom of the nav bar reaches the bottom of the slider. As in the brown background would become visible when the bottoms of the nav and slider reach each other – possible?

to complement this, how do we control the location where the scroll down arrow on the slider ends?
End goal would be to scroll only until the above position, where the bottom of the slider and the bottom of the nav match leaving the first section below the slider 100% visible – possible?

And the last tweak – centering the logo vertically in the nav bar with background color?

[Author]

Posts