Join the Soledad Facebook Users Group here
for Share, assistance, discussion, and Updates related to Soledad WordPress Theme.

If you can't create a new ticket - you can send us an email via our contact form and we will get back to you.

Okay
  Public Ticket #3625018
Right to Left Theme
Open

Comments

  • Samane Nikookar started the conversation

    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
  •  2,247
    PenciDesign replied

    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 replied

    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.png
    1548945993.png
  •  2,247
    PenciDesign replied

    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

    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

  •  2,247
    PenciDesign replied

    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

    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
  •  2,247
    PenciDesign replied

    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

    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
  •  2,247
    PenciDesign replied

    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

    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

  •  2,247
    PenciDesign replied

    Hi,

    About the mega menu, please watch the document below:

    Regards,
    PenciDesign.


  • Samane Nikookar replied

    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 

    Attached files:  9029766833.png

  •  2,247
    PenciDesign replied

    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

    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?

  • Samane Nikookar replied

    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.

  •  2,247
    PenciDesign replied

    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

    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

  •  2,247
    PenciDesign replied

    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

    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?

  •  2,247
    PenciDesign replied

    Hi,

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

    Regards,
    PenciDesign.


  •  2,247
    PenciDesign replied

    Hi,

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

    Regards,
    PenciDesign.


  • Samane Nikookar replied

    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?

  •  2,247
    PenciDesign replied

    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 privately
  •  2,247
    PenciDesign replied

    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.


  • Samane Nikookar replied

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

  •  2,247
    PenciDesign replied

    Hi,

    Please check the screenshot image below:

    6DQQeSv.png

    Regards,
    PenciDesign.


  • Samane Nikookar replied

    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
  •  2,247
    PenciDesign replied

    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

    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
  • Samane Nikookar replied

    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

    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

  •  2,247
    PenciDesign replied

    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

    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?

  •  2,247
    PenciDesign replied

    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

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

  •  2,247
    PenciDesign replied

    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

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

    3880589028.png




  •  2,247
    PenciDesign replied

    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

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

  •  2,247
    PenciDesign replied

    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

    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


  •  2,247
    PenciDesign replied

    Hi,

    Please add this CSS code:

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

    Regards,
    PenciDesign.



  • Samane Nikookar replied

    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
  •  2,247
    PenciDesign replied

    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

    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

  •  2,247
    PenciDesign replied

    Hi,

    Please add the following CSS class

    .penci-image-holder

    Regards,
    PenciDesign.