Skip to content
Public Ticket #28251

Right to Left Theme

Conversation thread

PenciDesign Supporter replied

Staff Reply

Hi,

Please add the following CSS class

.penci-image-holder

Regards,
PenciDesign.


Samane Nikookar replied

Customer Reply

Yes, you are right!
but that is because I deactivated WP Rocket lazy load and the load time get more, I need to improve the load speed of my website, as you can see in google page speed, it is 59 score for mobile perfromace but other my website are more that 80 and 90. anyway, I need the css classes you used for featured slider and every post featured image, 
Best Regards

PenciDesign Supporter replied

Staff Reply

Hi,

I've checked your site, and all the featured slider elements are already excluded for lazy loading, so you don't need to add any extra class.

You can double-check in private/incognito mode.

Regards,
PenciDesign.

Samane Nikookar replied

Customer Reply

Hi,
would you please tell me the classes of featured slider, I want to exclude them from lazy load, I used following classes but it did not work.

3241775722.png

PenciDesign Supporter replied

Staff Reply

Hi,

Please add this CSS code:

.penci-go-to-top-floating {
    bottom: 120px;
}

Regards,
PenciDesign.



Samane Nikookar replied

Customer Reply

I added a div under the footer and the problem was that go to top botton was over my bottons, I used following css to move it upper and it worked, the only problem is that at the begging (when the page load) is over the botton and when scrolling put in the right position, what more css should I add?

.penci-go-to-top-floating {
margin-bottom: 40px;
}

6654784778.png

PenciDesign Supporter replied

Staff Reply

Hi,

Please add the CSS code for mobile:

@media only screen and (max-width: 767px) {
    #sidebar-nav ul.menu li.menu-item-1070 ul.sub-menu,
    #sidebar-nav .menu li.menu-item-1070 ul ul.sub-menu {
        background-color: #ff5f15;
    }
}

Regards,
PenciDesign.


Samane Nikookar replied

Customer Reply

Great! it changed background on desktop view, I want to change this menu item background on mobile too.

PenciDesign Supporter replied

Staff Reply

Hi,

Please modify the CSS code:

#navigation.menu-style-2 ul.menu li#menu-item-1070 ul.sub-menu,
#navigation.menu-style-2 .menu li#menu-item-1070 ul ul.sub-menu {
    background-color: #ff5f15;
}

Regards,
PenciDesign.


Samane Nikookar replied

Customer Reply

your code changed the background of a menu item, I want to change the background of its submenu when it drops:

3880589028.png

PenciDesign Supporter replied

Staff Reply

Hi,

Please add the following CSS code:

#navigation.menu-item-padding .menu > li#menu-item-1070 > a:hover,
#navigation.menu-item-padding .menu > li#menu-item-1070:hover > a,
#navigation.menu-style-2 ul.menu li#menu-item-1070 ul.sub-menu:before,
#navigation.menu-style-2 .menu li#menu-item-1070 ul ul.sub-menu:before {
    background-color: #ff5f15;
}

Regards,
PenciDesign.



Samane Nikookar replied

Customer Reply

No, I want to change background of a special submenu not all of them, If I use customization all of them will change.

PenciDesign Supporter replied

Staff Reply

Hi,

Please go to Appearance → Customize → Logo & Header → Colors → Primary Menu:change the following options:

- Dropdown Background Color,

- Dropdown Menu Items Border Color

Regards,
PenciDesign.


Samane Nikookar replied

Customer Reply

I want to change background or drop down of submenu items as following picture.

1754536484.png

I used following code but it did not worked.

.menu-item menu-item-type-custom menu-item-object-custom ajax-mega-menu menu-item-1489 {
background: #000;
}

would you please give me the proper code?

PenciDesign Supporter replied

Staff Reply

Hi,

1. Please go to Appearance → Customize → General → Category, Tag, Search, Archive Pages → turn on the "Enable Left Sidebar On Archives" option,

2. Navigate to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci-slide-overlay .penci-mag-featured-content {
    text-align: right;
}

3. Yes, you can insert custom HTML code into the HTML widget. However, you'll need to apply some custom CSS to ensure it aligns with your design.

Regards,
PenciDesign.



Samane Nikookar replied

Customer Reply

instead of sign up newsletter box in your demo, I want to add a custom HTML, is it possible? Can I make a penciblock and put it there?

4369572520.png

Samane Nikookar replied

Customer Reply

and as my website is RTL I want that post meta (post title) on the slider images be in the right instead of the left, except the center one which is center, how to make them right on desktop?

9650779822.png

Samane Nikookar replied

Customer Reply

Thank you,

I moved every pages and posts sideabr to the left (to be RTL) but in archive pages it is in the right, how to move to to the left?

5398976692.png

PenciDesign Supporter replied

Staff Reply

Hi,

This is the latest news section. This area will get all the latest posts on your site so you can't pick the custom categories.

In case you need to modify the query, please build the homepage with the Elementor Page Builder:


Regards,
PenciDesign.


Samane Nikookar replied

Customer Reply

ok

in your demo, you have a widget (latest education news) which is not among featured categories, how can I change the category of this part?

8076433550.png

PenciDesign Supporter replied

Staff Reply

Hi,

Please check the screenshot image below:

6DQQeSv.png

Regards,
PenciDesign.


Samane Nikookar replied

Customer Reply

In your video there is no links for image megamenus. would you please explain about creating links for mega menu?

PenciDesign Supporter replied

Staff Reply

Hi,

1. I can't log in because your site shows the "You have been locked out of this site" notice,

2. In general, please follow the video document below to understand how to create mega menu content:


Regards,
PenciDesign.


PenciDesign Supporter replied

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

#navigation.header-6 .container {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
#navigation.header-6 .pcheader-icon,
#navigation.header-6 .menu {
  margin-right: 0;
}
#navigation.header-6 .pcheader-icon {
  margin-left: 15px;
}

Regards,
PenciDesign.



Samane Nikookar replied

Customer Reply

Thank you, it was because of menu setting and now everything works well.
I use header 6 and I want to row reverse logo and main menu 

5343960219.png

I want that logo goes to left exacltly like your demo

7363096190.png

would you please guide me to write proper css code?

PenciDesign Supporter replied

Staff Reply

Hi,

Please edit the menu item name "بریم مالزی مدرسه", and remove the "#" character. Please enter the valid URL.

Regards,
PenciDesign.


PenciDesign Supporter replied

Staff Reply

Hi,

Please expand all the menu settings and then send me a screenshot.

Regards,
PenciDesign.


Samane Nikookar replied

Customer Reply

I checked all the menu items and all links are correct, what else can I do?
can I export customization, import demo again and then import setting?

PenciDesign Supporter replied

Staff Reply

Hi,

Please go to Appearance → Menus and ensure that you've entered a valid URL for all the menu items. Afterward, please check again.

The issue is that the menu contains errors, causing all the theme features to not work properly.

Regards,
PenciDesign.


Samane Nikookar replied

Customer Reply

acctually, the problem is that more than hamburger menu, no meta on images, no autoplay, nothing works like last night, I dont know what to do?
and when I go to customize every thing is like before

PenciDesign Supporter replied

Staff Reply

Hi,

All the demos are working correctly.

The issue lies in the incorrect menu item URL entered at Appearance → Menus, causing the JavaScript code to not function properly. Please review all menu item URLs, clear all site caches, and then check again.

Regards,
PenciDesign.


Samane Nikookar replied

Customer Reply

Is there any bug in you demo?
I cant belive 
All metas for featured slider vanished. All autoplay widgets disappered. nothing is like last night.

Samane Nikookar replied

Customer Reply

Unfortunately, I can't.
one more problem, I changed header 3 to header 2 and now hamburger menu on mobile does not open.How to solve it?

PenciDesign Supporter replied

Staff Reply

Hi,

For this case, please send me your WordPress admin account in a PRIVATE reply.
I'll log in and create a demo menu for your site.

Regards,
PenciDesign.



Samane Nikookar replied

Customer Reply

I saw the video before and I could make mage menu with image, the problem is that I cant create links (primary, secondary, highschool) in the left side as in the image, I want to make a mega menu exactly like the image 

PenciDesign Supporter replied

Staff Reply

Hi,

About the mega menu, please watch the document below:

Regards,
PenciDesign.


Samane Nikookar replied

Customer Reply

Great!
Now, I need to create a mega menu like following demo image with 3 categories and links exactly like the image. how to create it?

9029766833.png

PenciDesign Supporter replied

Staff Reply

Hi,

In this case, you need to create a custom header layout by following the video document provided below:


The pre-built header doesn't support the layout you desire.

Regards,
PenciDesign.


Samane Nikookar replied

Customer Reply

No, You misunderstand!
I want logo and banner on mobile too.

 I just need to show social icons when the hamburger menu is fixed and then (when scrolling) in sticky mode instead of social icons I can see the logo. I talk about following image (fixed mode (social icons) and sticky mode (logo))

6914825466.png

PenciDesign Supporter replied

Staff Reply

Hi,

1. Please go to Appearance → Customize → Logo & Header → Main Bar & Primary Menu: turn off the "Hide Social Icons on Main Bar for Mobile" option.

2. Navigate to Appearance → Customize → Custom CSS then add the following custom CSS code:

@media only screen and (max-width: 767px) {
    .penci-header-second {
        display: none;
    }
}

Regards,
PenciDesign.

Samane Nikookar replied

Customer Reply

Hello
On mobile view, I want to see social icons near hamburger menu and when scrolling, it convert to logo, now it shows logo in both cases, other option is social icons in both cases, would you please the proper code so that I can see social icons at first and when scrolling logo appears? as following image

6584123088.png

PenciDesign Supporter replied

Staff Reply

Hi,

In this case, you should turn off the JS  optimization options on the WP-Rocket plugin and then check again.

Regards,
PenciDesign.


Samane Nikookar replied

Customer Reply

thanks, one more question, I use WP-Rocket plugin for caching, the problem is that featured slider and featured images of each post are lazy load and they dont show before scrolling. I excluded following classes from being lazy load but they still lazy load, what classes or css id should I exclude instead?

.post-image
.featured-area
.swiper-slide

PenciDesign Supporter replied

Staff Reply

Hi,

1. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.header-banner {
  display: flex;
}

2. Go to dashboard → Posts → Categories: click Edit the category name that you want to change the layout → Select Featured Layout for Magazine Layout → Style 8 - List Layout.

Regards,
PenciDesign.



Samane Nikookar replied

Customer Reply

Great, the only problem is that there is no space between header banner and logo as following image. I also need if the first two featured categories "دبستان" and "دبیرستان" be beside each other (exactly like your demo style "primary" and 'secondary" are near each other) but they are under each other. how to set them in two columns near each other?

9739224449.png1548945993.png

PenciDesign Supporter replied

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.header-style-header-3 #header .inner-header .container {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

Regards,
PenciDesign.



Samane Nikookar started the conversation

Conversation Start

Dear PenciDesign team
I installed soledad theme and chose education news demo https://soledad.pencidesign.net/soledad-education-news/
As my website is in Persian, I need if logo goes to left and header banner goes right and also sidebar goes to the left instead of right. 
So, please give me the rtl.css or a guide that I can make the home page right to left direction.
Best Regards
Nikookar

5140305147.png

Want to join this conversation or access attachments? Sign in first.