Docs

[Rucki]

Hi,

First of all thank you for the support provided in the past in a very quick and efficient manner. My problem is that I couldn’t complete the last support ticket I opened due to unexpected illness. my site http://lifesenergy.supplies when you scroll the logobar area doesn’t stay at the top instead the navigation bar area does I need this to stop at the logo area, so the logo is at the top. My sites login details are as what was given in the previous thread. Should you require again I could provide it.

Kind Regards
Rucki

[Rucki]

This reply has been marked as private.

[Thai]

Hi There,

#1] Please add the following CSS under Customizer > Custom > Global CSS:

.x-logobar.x-logo-fixed {
    top: 0;
    position: fixed;
    width: 100%;
}
.admin-bar .x-logobar.x-logo-fixed {
    top: 32px;
}
.x-navbar.x-navbar-fixed-top {
    top: 97px;
}
.admin-bar  .x-navbar.x-navbar-fixed-top {
    top: 129px;
}

#2] Please add the following code under Customizer > Custom > Global Javascript:

jQuery(function($){
	var $logo = $('.x-logobar');
	$(window).scroll(function(event) {
		var $current = $(this).scrollTop();
		if( $current >= 904 ){
			$logo.addClass('x-logo-fixed');
		} else {
			$logo.removeClass('x-logo-fixed');
		}
	});
});

Hope it helps 🙂

[Rucki]

Hi,

Thank you for the quick response, but I had some other codes earlier so now I am pasting all together can you check and say if its ok.

CSS is below with your input
————————————————

.x-navbar .x-container.max.width {
width: 100%;
max-width: 100%;
}

.text-white h2,
.text-white p,
.text-white .x-btn {
color: #fff;
}

.text-white .x-btn {
border-color: #fff;
}

.text-white .x-icon {
color: #fff;
}

.text-white .x-hr {
border-top-color: rgba(255, 255, 255, 0.1);
}

.text-white .x-btn:hover {
opacity: 0.75;
}

.home-link a,
#menu-item-55 a,
#menu-item-38 a {
padding: 0 !important;
}

.x-logobar-inner {
background-color: #ffffff;
}

body .x-logobar.x-logobar-fixed-top {
top: 0px;
position: fixed;
width: 100%;
z-index: 9999;
}

.x-widgetbar {
background-color: #fff;
}

.x-widgetbar .h-widget{
color: #A01515;
}

.x-widgetbar .widget{
color:#000;
}

.widget_text .h-widget:before {
content: “\f054”;
padding-right: 0.4em;
font-size: 0.925em;
}

.x-logobar.x-logo-fixed {
top: 0;
position: fixed;
width: 100%;
}
.admin-bar .x-logobar.x-logo-fixed {
top: 32px;
}
.x-navbar.x-navbar-fixed-top {
top: 97px;
}
.admin-bar .x-navbar.x-navbar-fixed-top {
top: 129px;
}

Javascript is below
————————————————

jQuery(function($){
var $logo = $(‘.x-logobar’);
$(window).scroll(function(event) {
var $current = $(this).scrollTop();
if( $current >= 904 ){
$logo.addClass(‘x-logo-fixed’);
} else {
$logo.removeClass(‘x-logo-fixed’);
}
});
});

.x-ethos .x-widgetbar{
height: 100%;
transition: height 0.5s linear;
}

kind regards

rucki

[Rue Nel]

Hello Rucki,

Thanks for writing in! Please remove this block as it is already redundant:

.x-logobar-inner {
background-color: #ffffff;
}

body .x-logobar.x-logobar-fixed-top {
top: 0px;
position: fixed;
width: 100%;
z-index: 9999;
}

Hope this helps.

[Rucki]

Hi,

Thank you, it just worked fine

Kind Regards

Rucki

[Rad]

You’re so much welcome!

[Author]

Posts