[TipMasterParticipant]

The website is not yet live and is behind a maintenance page. I’m getting close to making it live though, so I can post back again in the next week or so?

[RupokMember]

Hi There,

Thanks for updating! Let us know when you are live so that we can check the url and provide you something.

Cheers!

[TipMasterParticipant]

Right, I’m back! 🙂

Please see http://tipsunzipped.com

You’ll see that the green ‘+’ widgetbar icon is sticky in desktop view, but not in mobile view. How can I get it to stick in mobile view that that it remains accessible whilst scrolling, along with the main menu?

Thanks!

[ThaiModerator]

Hi @tipmaster,

Try adding following CSS under Appearance > Customize > Custom > CSS:

@media (max-width: 979px){
.x-btn-widgetbar,
.x-widgetbar {
    position: fixed;
}
}

Hope it helps.

[TipMasterParticipant]

Hmmm… that mostly works, except for one thing. It seems to work perfectly for a visitor. But for a logged in user, desktop view is fine as before but in mobile view the widgetbar/button becomes fixed at the screen location below the WordPress toolbar, not moving when the WordPress toolbar scrolls out of sight. In desktop view the WordPress toolbar doesn’t scroll out of sight, so that probably explains why all is fine there.

To put it another way, when a logged in user scrolls in mobile view the WordPress toolbar scrolls and leaves a gap below which the widgetbar/button is floating. Meanwhile the navbar acts as expected, gracefully scrolling before fixing at the top of the screen. See before scroll then after scroll

Is it possible to fix this without too much trouble?

I tried this first:

@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed !important;
}
}
@media (max-width: 979px){
.x-btn-widgetbar,
.x-widgetbar {
    position: fixed;
}
}

Then, I shortened it though perhaps I am wrong to do this as applying !important to the whole thing might be a bad idea? I seem to be getting the same results both ways.

@media (max-width: 979px) {
.x-btn-widgetbar,
.x-widgetbar,
.x-navbar-fixed-top {
position: fixed !important;
}
} 

[TipMasterParticipant]

Doesn’t look like the ‘img’ feature is working:

before (docked): http://1drv.ms/1KwVVKo
after (floating): http://1drv.ms/1Mws3AU

[LelyModerator]

Hello There,

Thanks for the screenshots.

Would you mind providing us with login credentials so we can take a closer look on the settings when logged in? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[TipMasterParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

To solve this you need to fix the admin bar.
Please add this :

#wpadminbar {
    position: fixed !important;
}

Hope it helps.

[TipMasterParticipant]

Thanks for the suggestion. Tried it, and I could live with having the WordPress toolbar fixed in place on mobile view, except it just changes the problem:

Now when you scroll the navbar gets hidden behind the WordPress toolbar instead of gracefully joining the same row as the widgetbar button :-S

[Nabeel AModerator]

Hi again,

To fix this issue, try adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Javascript

function heightFix(){
	var adminBar =  jQuery('#wpadminbar').outerHeight();
	jQuery(".logged-in .x-navbar.x-navbar-fixed-top").css("top", adminBar + "px"); 
}
	
jQuery(window).resize(function(){
		heightFix();
});

jQuery(document).scroll(function(){
		var logoHeader = jQuery("x-logobar").outerHeight();
		if(jQuery(this).scrollTop() > logoHeader) {
			heightFix();
		}
		else {
			jQuery(".logged-in .x-navbar").css("top", "0"); 
		}
		
});

Don’t forget to clear your cache after adding the code, let us know how this goes!

[TipMasterParticipant]

Brilliant! It works perfectly now, many thanks!

You guys are great. So glad I stumbled across X Theme and decided to buy it after trying the demo – brilliant features, great coding, real added value with videos etcetera, and support is top notch!

Keep up the good work, and thanks again.

[FriechModerator]

Thanks for the kind words, we’re delighted to assist you with this.

Cheers!

[knowmatesParticipant]

This reply has been marked as private.

[JackKeymaster]

Hi there,

Thanks for writing in, try adding the following CSS, under “Customize > Custom > CSS”.

@media (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
position: fixed;
}
}

Thank you! 🙂

[Author]

Posts