Docs

[Super]

Where the background image flows behind the nav bar

[Friech]

Hi There,

Thanks for writing in! But the screenshot did not upload. Upload it here: http://prnt.sc/ and send us the link, if you’re having trouble on the file size.

We’ll be happy to provide you with a response once we have a better understanding of the situation.

Cheers!

[Super]

This reply has been marked as private.

[Super]

This reply has been marked as private.

[Paul R]

Hi,

Yes, that’s possible with xtheme.

Can you provide us your site url so we can see your current set-up.

Thanks

[Super]

I’m actually building a new site. I just wondered what settings I’d need to create this look?

[Friech]

Hi There,

Please create that dark blue section first (we will overlay the header when that section is ready).

That section can easily be done with Cornerstone, add a Section and then a background-image.

Set the section’s Text Align option to center to center all of its content.

Add a Custom Headline element for the heading WE ARE SOMO.

Then a Text element below the headline for the italic tag line text.

Then just below that Text element add a RAW content element, and paste the two button shortcode below.

[x_button type="flat" shape="pill" size="small" href="#example" title="Example"]Watch Video[/x_button][x_button type="flat" shape="pill" size="small" href="#example" title="Example"]Get in Touch[/x_button]

After that provide us your site URL. So we can provide a custom CSS to overlay the header on that section.

Hope it helps, Cheers!

[Super]

This reply has been marked as private.

[Christopher]

Hi there,

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

@media (min-width:979px){
header.masthead.masthead-inline {
    position: absolute;
    width: 100%;
}
}

#2 Please remove negative margin from buttons, you can use block grid element.

#3 Add a custom class like my-btn to you button, and insert following code in customizer :

.my-btn{
color:red;
background-color:#000;
}
.my-btn:hover{
color:#000;
background-color:red;
}

#4 Please add following code in Customize -> Custom -> Global JavaScript :

jQuery(document).ready(function($){
	$(window).scroll(function(){
		if ($(this).scrollTop() > 50) {
			$('.x-brand img').attr("src","//gadalladental.supernormaldesign.com/wp-content/uploads/2017/02/Gadalla-Dental-Logo-White2.png");
		} else {
			$('.x-brand img').attr("src","//gadalladental.supernormaldesign.com/wp-content/uploads/2017/02/Gadalla-Dental-Logo-White1.png");
		}
	});
});

Hope it helps.

[Super]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for updating in!

#1] Please edit your page in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(min-width: 980px){
  .x-block-grid {
    margin: 0 auto;
    width: 450px;
    float: none;
    display: inline-block;
  }

  .x-block-grid.two-up>li {
    width: auto;
    min-width: 120px;
    float: none;
    display: inline-block;
  }
}

You should have something like this: http://prntscr.com/e9th9f

#2] You will remove the custom my-btn class in the grid item.

#3] Please update the custom JS and make use of this code instead:

(function($){
	$(window).on('scroll', function(){
		console.log($(this).scrollTop());
		if ($(this).scrollTop() > 50) {
			$('.x-brand img').attr("src","//gadalladental.supernormaldesign.com/wp-content/uploads/2017/02/Gadalla-Dental-Logo-Black.png");
			$('.x-navbar-inner').css({'background-color': 'rgba(0,0,0,0.35)'});
		} else {
			$('.x-brand img').attr("src","//gadalladental.supernormaldesign.com/wp-content/uploads/2017/02/Gadalla-Dental-Logo-White1.png");
			$('.x-navbar-inner').css({'background-color': 'transparent'});
		}
	});
})(jQuery);

If you need anything else we can help you with, please let us know.

[Super]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Please close curly bracket for each media query rule.

e.g:

@media (min-width:980px){
header.masthead.masthead-inline {
    position: absolute;
    width: 100%;
}
}

Notice the second closing curly bracket, please fix this for all media query rules.

Add my-btn class to button shortcode, not block grid element.

Please update JS code to :

(function($){
	$(window).on('scroll', function(){
		console.log($(this).scrollTop());
		if ($(this).scrollTop() > 50) {
			$('.x-brand img').attr("src","//gadalladental.supernormaldesign.com/wp-content/uploads/2017/02/Gadalla-Dental-Logo-Black.png");
			$('.x-navbar-inner').css({'background-color': 'rgba(0,0,0,0.35)'});
			$('.x-navbar-inner li a span').css({'color': '#000'});
		} else {
			$('.x-brand img').attr("src","//gadalladental.supernormaldesign.com/wp-content/uploads/2017/02/Gadalla-Dental-Logo-White1.png");
			$('.x-navbar-inner').css({'background-color': 'transparent'});
			$('.x-navbar-inner li a span').css({'color': '#fff'});

		}
	});
})(jQuery);

Hope it helps.

[Super]

This reply has been marked as private.

[Christopher]

Hi there,

#1 Unable to replicate the issue, check the attachment.

#2 Please add following block of CSS:

.x-navbar-fixed-top.white .desktop .x-nav > li > a:hover > span, .x-navbar-fixed-top.white .desktop .x-nav > li.x-active > a > span, .x-navbar-fixed-top.white .desktop .x-nav > li.current-menu-item > a > span {
    box-shadow: 0 2px 0 0 hsl(0, 1%, 11%);
}

following JS as well :

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

#3 Another code :

.x-navbar-inner {
    transition: all 0.5s linear;
}

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.

Hope it helps.

[Author]

Posts