Jump to content

Bi-Lingual Site; Header Problems

Recommended Posts

Site URL: https://www.bridgingfortomorrow.org/give-spanish

I'm working on the Spanish side of our website. I've hidden the footer and just re-created a block that looks just like the English footer on each Spanish page in Spanish (or it will be in Spanish, I haven't translated it all yet). It was laborious, but it worked. 


Fixing the header is not nearly so easy. I hid the normal (English) header, and I've gotten some links to display up top. Currently the links aren't pointed in the correct place, but that's not the problem. When I switch to mobile (or change the size of my screen at all) the new "navigation" that I've cobbled together doesn't move at all. In fact, on mobile, it just... disappears off the screen. The main problem I'm trying to fix is that the English nav points to the English pages. I need a Spanish nav that I can point to the Spanish pages, but not across the whole site. This is just the work-around I've come up with. 

Is this a decent work around? Can someone help me figure out how to make this new nav bar I've created responsive OR suggest a better idea? Open to any suggestions and appreciative of any!! 

Code I'm currently using on the header/nav:

.header-nav {
    display: none;
.burger-box {
    visibility: hidden;
<ul class="kl-topnav">
  <li><a href="abcxyz.com">DAR</a></li>
  <li><a href="abcxyz.com">NOSOTROS  </a></li>
  <li><a href="abcxyz.com">PROGRAMMAS </a></li>
  <li><a href="abcxyz.com">VOLUNTARIO</a></li>
.kl-topnav {
list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
flex-direction: row;
  position: absolute; z-index: 999;
  .kl-topnav { padding-top: 3em; padding-left:33em;}
.kl-topnav a {
  color: #F2F2F2
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;




Link to comment
  • Replies 0
  • Views 230
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.