How Do I Make My Navigation Bar "Fixed"?

[YvonneCaneCorso]

Hi.  My website is CaneCorso.org and I am trying to make my navigation bar stay fixed to the top so that it does not disappear as users scroll down the page.  I already checked my theme options and apparently "Fixed Navigation Bar" is not available in my theme so I know I will need to modify the website's HTML, which is something I am clueless about.  Can anyone help?  I am a little desperate to get this fixed and changing the theme is not an option.  Any help would be greatly appreciated.  Thank you.

[Adam7]

What is the address of your site, @YvonneCaneCorso? It shouldn't be too hard to find a solution for that from looking at the live site.

[YvonneCaneCorso]

---

@Adamwrote:

What is the address of your site, @YvonneCaneCorso? It shouldn't be too hard to find a solution for that from looking at the live site.

---

Hi Adam!

My website is:

www.CaneCorso.org

But... I have right mouse clicking disabled in case you are trying to pull up "inspect element" in which case I need to enable right mouse clicking and republish so you can do that. 

Thank you so much!

[NJRFTF]

@YvonneCaneCorso

In a windows browser to view "inspect" use keyboard shortcut    Ctrl + Shift + C

[YvonneCaneCorso]

---

@NJRFTFwrote:

@YvonneCaneCorso

In a windows browser to view "inspect" use keyboard shortcut    Ctrl + Shift + C

---

Wow, pretty cool.  Thanks for the tip!

[YvonneCaneCorso]

Hi @Adam, good morning!

So, I just learned to tag a name in the reply.  I am curious your thoughts on my issue for www.CaneCorso.org.  I searched the forums and see you answer quite a bit so I am hoping I get lucky with a solution.

Thank you!  Yvonne

[Adam7]

Try this in Settings > SEO > Header Code:

<style>
	.header-wrap .nav-wrap
	{
		position: fixed !important;
		top: 0px !important;
		left: 0px !important;
	}
</style>

That should fix your navigation position on the live site.

[Adam7]

Oops - made a small tweak to the code.

[YvonneCaneCorso]

Hi @Adam!

Happy Monday!  Thank you for the code.  I just tried it and published the website and it worked!

THANK YOU!  Yvonne 

[YvonneCaneCorso]

I had to edit my response BTW because originally I forgot to hit "save" on the code change and that's why it did not work.  Mondays are cruel to my brain LOL.

THANK YOU @Adam for your assistance.  You rock!

[YvonneCaneCorso]

OK.... @Adam 3rd reply.  I am sorry.  The code DOES work but it covers the top of the website images and wording so I had to reverse it.  On my personal website - www.CostaBelCaneCorso.com - the navigation bar is fixed without interfering with the content.  I guess that was what I was hoping to achieve but the code, although fixed the navigation bar, created a different problem by covering up content.  Sigh.  Today needs a reset button LOL.

[Adam7]

Ohh, yes, that's a little bit different behavior! It would probably be simpler to switch to the theme that the other site is using and re-upload any header images.

[YvonneCaneCorso]

I was scared you would say that @Adam.  Changing the theme is not an option.  Hopefully someone will know how to change the HTML so that I can fix the navigation bar AND not affect the visibility of the content. Again, thank you for your help and I will eagerly wait to see if anyone has any other suggestions. 

[Adam7]

Something like this might work instead:

<style>
	.header-wrap #logo
	{
		top: 75px !important;
		border-top: 1px solid #ddd;
		position: relative;
		background: #fff;
	}
	.menu
	{
		position: fixed;
		width: 100%;
		background: #fff;
		top: 0px;
		left: 0px;
	}
</style>

That basically swaps the logo underneath the menu, so when you scroll all that remains fixed is the menu.

[YvonneCaneCorso]

@AdamYay, thank you!  OK, we are now getting somewhere!  That worked awesome with the navigation bar.  BUT... the logo now interferes with the content.  Do you know if I can just get rid of the logo altogether without having to change the theme?  I tried turning it "off" but it ends up just leaving this large white space so it did not accomplish my goal.

[Adam7 · Accepted solution]

Ohh, that shouldn't be too hard to just hide the logo:

<style>
	.header-wrap #logo
	{
		display: none !important;
	}
	.menu
	{
		position: fixed;
		width: 100%;
		background: #fff;
		top: 0px;
		left: 0px;
	}
</style>

I think that should do it.

[YvonneCaneCorso]

@AdamThank you so much!

[Adam7]

You're welcome!

[mal2]

Adam I'm trying to do the same thing here @ www.michinspectors.com. 

[Bernadette3]

It looks like you figured this out, @mal? Let us know. Thanks!  

[LarNicole]

Hi @Adam

I have tried all the things you suggested for this problem, but none have worked for me... I would really love my navigation menu to be fixed at the top of all my pages so as you scroll down there is always access to it. My website is larnicole.com I believe the name of my theme is CleanLines. 

Any help would be so appreciated

Thanks