[OptimusWhoParticipant]

Hi,

I would like to have a static topbar so that when the user scrolls down the page the topbar remains visible at all times. I would also like the navbar to be visible but only when the user scrolls to the top of the page, i would like this to be directly under the top bar when at the top of the page.

I have tried to implement the following from your forum posts but there is a problem with the width of the topbar and the menu also disappears. The code i tried was

.x-container-fluid.offset {
margin:60px auto 40px;
}

.x-topbar {
position:fixed;
width:100%;
}

any help would be appreciated as this is the last thing i am doing before it goes live,

look forward to your response

[Paul RModerator]

Hi,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[OptimusWhoParticipant]

sorry, i always forget to add this

its http://www.insolvencyprofessionals.com/test

I have removed any attempts to fix the top menu

I look forward to you help

Cheers

[ZeshanMember]

Hi there,

Please refer to this post: http://theme.co/x/member/forums/topic/make-topbar-fixed-with-navbar/#post-94848

Hope this helps. 🙂

Thank you.

[OptimusWhoParticipant]

Hi thanks for the reply

i have implemented the above but i now have the following issues

1. the slider below the masthead is not correctly visible, its half hidden beheind the navbar
2. how can i make the menu disappear as the user starts to scroll down

[RadModerator]

This reply has been marked as private.

[OptimusWhoParticipant]

http://wwwtheinsolvencyprofessionals.com/test/

see above correct link

sorry again i wrote it in a hurry

[OptimusWhoParticipant]

http://www.theinsolvencyprofessionals.com/test/

and again

[RubinKeymaster]

Hey There,

Go to Customizer > Custom > CSS and add following:

.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right { position: relative !important; width: 100% !important; }
.x-slider-revolution-container { margin-top: 100px; }

I would recommend targeting the .x-slider-revolution-container more specific once you know where you want to put the slide if its the home page it would look like this:

.home .x-slider-revolution-container { margin-top: 100px; }

[OptimusWhoParticipant]

This reply has been marked as private.

[CousettMember]

Yes go ahead and give us access so we can look into this better.

To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

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

[OptimusWhoParticipant]

This reply has been marked as private.

[Kosher KMember]

Hi There,

Thanks for providing additional information,

Can you please try adding this code below in Customizer > Custom > Javascript

(function($){ 
	$(window).scroll(function(){
		if ($(this).scrollTop() > 0) {
			$('.x-topbar').css({'position':'fixed'});
		} else {
			$('.x-topbar').css({'position':'relative'});
		}
	});
})(jQuery)

Then this one below in Customizer > Cutom > CSS

.x-topbar {
	max-width: 1200px;
	width: 100%;
}

Let us know how it works,
Cheers

[VeritasMarketingParticipant]

This Code worked for me, but now when i scroll my header goes under the topbar slightly. is there a way to fix this?

[VeritasMarketingParticipant]

This reply has been marked as private.

[Author]

Posts