Header Breaks in RTL

Thanks for using Shift!

I’m sorry for these issues with the header design. Please add the following CSS to your site to correct this:

#menu-primary {
  padding-right: 0 !important;
}
.social-media-icons {
  text-align: left !important;
}

You can copy and paste that code into the Additional CSS section in the Live Customizer (Appearance > Customize), and it will take effect right away.

Social icon and nav menu is fixed in position.. But search icon and search form still not in the right position. Also I want to keep everything in vertically middle (in a straight line, middle of top and bottom). When I try to click menu item, i get clicked inside search form container. cannot click menu items. please check.

Please do check what happens to mobile toggle menu also when the fix is applied.

• This reply was modified 3 years, 3 months ago by jomv.
• This reply was modified 3 years, 3 months ago by jomv.

Okay I see. Please add this code in addition to what you already have:

@media all and (max-width: 899px) {

  .site-header .search-form-container button.open + form {
    left: 0 !important;
  }
}
@media all and (min-width: 900px) {

  .search-form-container {
    right: auto !important;
    margin-top: 3px;
  }
}

That should address the remaining layout issues, but let me know if there’s anything else.

I kindly appreciate your help. But this is not working as it has to be..! Search icon is now in the left side but, check the search form pls, as it goes out of the page from left and overlaps the search icon when clicked.

Still cannot click any of the menu item in web view. It also looks like the alignments of header items are not really smooth.

I found the problem only with the header and its elements in RTL, other parts are looking fine.
Please do review the rtl.css header parts and please provide a full fix.

I checked by placing the LTR header in RTL other parts of css, and it looks fine. But when I put RTL header css parts, it breaks and after inserting the codes you provided also, its not fully fixed. Thank you

Please provide a fix soon. I have a very little time for this project.

Hello

Sorry this is taking more customization. Please add the following code to fix how the search bar opens:

.site-header .search-form-container button.open + form {
    left: 0 !important;
}

After adding this code, it will only expand out to the right. It is normal for it to expand over top of the social icons, as you can see in the demo site here: https://shift.competethemes.com/

This code will make the menu items clickable:

#menu-primary {
  position: relative;
  z-index: 9;
}

Lastly, this code will correct the menu so that it displays below the site title in the mobile menu:

@media all and (max-width: 899px) {

  .menu-primary-container {
    clear: both;
  }
}

Thank you for the reply.. Now I can click the menu items. But there are still more issues. Cannot click social icons in web view, and in mobile view when I try to click social icon, I cannot click that icon but inside a hidden text input. ?? Mobile menu (header) layout is now broken. I request you to visit my site and check the issues from desktop view and mobile view. Click all the items / elements in header. Then you will see the errors. May be I am not able to explain the issues correct way. so for a complete fix please do visit the page and provide a fix.

Any hope?

I’ve added a few more lines and removed one previous snippet I sent you. I think it will be easiest to delete all the code you’ve added so far and then replace it with this code:

#menu-primary {
  padding-right: 0 !important;
  position: relative;
  z-index: 9;
}
.social-media-icons {
  text-align: left !important;
}
.site-header .search-form-container button.open + form {
    left: 0 !important;
}
@media all and (max-width: 899px) {

  .search-form-container {
    left: auto;
  }
  .menu-primary-container {
    clear: both;
  }
}
@media all and (min-width: 900px) {

  .menu-primary {
    display: inline-block;
  }
  .search-form-container {
    right: auto !important;
    margin-top: 3px;
  }
}

Once added, the social icons will be clickable in the mobile and desktop menus. That’s the only remaining bug I found. The menu layout on mobile is correct already and looks like the Shift demo site: https://shift.competethemes.com/

I am sorry but no luck at all. Now the desktop view menu is again moved to left and messed up. And when I try to click social icon in mobile view, i get clucked into hidden search form.

I think you need to rewrite the header css part.

Can you please fix it! One of the main reason I choosed this theme is that, this theme have a header style as I want. I was hoping it will be all okay in RTL also. Most of the themes that claims to be RTL support has some layout issues. If header is fine, than @font-face wont work. Elese there will b rtl layout issue. Tired of this, I have tested many themes that claims rtl support. I think they all generate rtl css us8ng online ltr to rtl converter.

I’m sure you are not a newbie like me and you can simply fix the rtl css header part or provide a total fix. This will improve your theme and fix the bugs I have found. May be helpful to pro version too. I think same issue will be there in pro version too.

I’m sorry this has been such an ordeal. I’m not sure why Shift is having these issues now since RTL compatibility was added years ago, but I will address this more thoroughly in a future update.

For now, I did some more testing and have prepared a new snippet for you to use. Please replace the previous code with the code below. I have tested it on an RTL site and can confirm that the desktop and mobile menus are functioning properly with this added:

#menu-primary {
  padding-right: 0 !important;
  position: relative;
  z-index: 9;
}
.social-media-icons li:first-child {
  margin-right: 0;
}
.site-header .search-form-container button.open + form {
    left: 0 !important;
}
@media all and (max-width: 899px) {

  .site-header .search-form-container {
		bottom: 12px;
  }
	.social-media-icons {
		margin-bottom: 38px;
	}
	.social-media-icons.fade {
		opacity: 1;
	}
  .menu-primary-container {
    clear: both;
  }
}
@media all and (min-width: 900px) {

  .menu-primary {
    display: inline-block;
  }
  .search-form-container {
    right: auto !important;
    margin-top: 3px;
  }
	.social-media-icons {
		text-align: left;
	}
}

Thank you very much for the kind support and time to fix this. by adding the last snippet you provided, It fixed mobile view issues. but in desktop view, menu was moved to left and messed up. search icon was not showing. I added the following code in addition to the snippet you provided and now the problem is solved. But I don’t know why it needed this code too :O
Thank you very much!

#menu-primary {
  padding-right: 0 !important;
  position: relative;
  z-index: 9;
	display: inline-block;
}

• This reply was modified 3 years, 3 months ago by jomv.
• This reply was modified 3 years, 3 months ago by jomv.
• This reply was modified 3 years, 3 months ago by jomv.