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.

[Simonovits]

Hi Adam,
I am struggling hard with the same problem
I would like to ask you in which document in HEADER TYPE, STYLES, PARTIALS or ASSETS you insert this to fix the navigation bar, so it can be seen always independently wherever you go within the site, and within the given document where exactly.

Thank you in advance for your precious help. (I dont know too much about coding but I am trying hard).

Istvan

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

[Adam7]

Code like you have there can actually be pasted into Settings > SEO > Header Code within the website editor, @Simonovits.

[Bernadette3]

Hi @xd003 Do you have a question about your navigation bar? Can you please post a link to your site? Thanks! 

[SabiJ]

---

@Bernadette wrote:

Hi @xd003 Do you have a question about your navigation bar? Can you please post a link to your site? Thanks! 

---

Hi, here is a link to our website: https://www.kryzradio.org/.

Is there any way to "freeze" the frame (top & sides) around the website, so that both the menu bar at the top as well as the sides are fixed during scrolling?

and is it possible to add content into the right part of the frame, which would be the ideal place to have our audio player, mobile apps, Facebook feed, local weather forecast, etc., that does not move if scrolling down the page. 

However, I'm not sure I know how to do the HTML instructions (i.e. placement?), so more help on that would be much appreciated.

Thanks in advance.

[Bernadette3]

Hi @SabiJ I don't think that would be possible for this older theme. I know a lot of our newer, responsive themes allow the option to make the navigation fixed or sticky. I have not come across a site that has accomplished the side option you are looking for, though. If you do end up updating your theme, I highly suggest making a copy of the site first. You can do this by clicking the three dots to the right of Edit Site on the dashboard. The newer themes do look quite different from the old themes so it may take some time to adjust to the new view. Because of this I think it would be best to practice on a copied version rather than your original site.

[Aageitos]

@Adam

Would you please take a look at my site, https://madelinehartwellportfolio.weebly.com/discussions-5302.

I tried using this code as well.  The problem I am experiencing is the nav menu will appear on the body of the website, but only in some pages; Professional Learning Network and the Discussions. I would like for it to do what its doing in About Me and My Why. 

Could you help me out?

[aao]

Very helpful! Thank you!
- Ashlee

[hugomanaheim]

adam, 

i have yet to subscribe to a plan as i am trying to design as much of it as possible before i get my own domain name and so on, is it possible you could take a look at my site www.pasktranslations.weebly.com as i have tried to recode your code and use all three of your codes, and none of them seem to work

thanks

[BJ5]

Try this code @hugomanaheim:

<style>
    .wrapper
    {
        padding-top: 120px;
    }
    .unite-header
    {
        position: fixed !important;
    }
</style>

[PTiii]

Hi @BJ!

I'm rebuilding nonprofit site and tried your code, and it worked! To be honest, this is the first time I've ever dealt with code. I'm the educator in the org, but am tasked with remaking our website. 

Question: I reduced the padding-top px to make the header narrower and it works on the mobile display but not the desktop display. Any clue why that might be happening? 

[BJ5]

That's great! Sounds like the code might be a little different on your desktop site. I'm not sure without seeing the site, though.

[PTiii]

Hi @BJ! Apparently, all I needed to do was turn on fixed navigation in theme options. duh!!!!!! Thanks for following up!  

[MATL]

Hello @PTiii  

I would like to know, what theme do you use? Thank you

[MATL]

Hi @BJ 

I have same problem with @LarNicole we use same theme it is Cleanlines.

I have tried to find to change the code, but I can not which line and which folder.

I also haven't found the option fixed navigation bar.

Cleanlines has a fixed navigation bar when I open the website on mobile, but not in PC website.

I'm sorry for my broken English.

Thank you in advance  

[laurabernst]

Adam - I'm not able to get this fixed navigation bar code to work.  My site isn't published yet - is that why?

[Bernadette3]

Hi @laurabernst That could definitely be why. A lot of the code overrides will not work in the editor and will only show on the live site.