Some RTL problems

Hi there,

1. This should help: https://docs.generatepress.com/article/customizing-the-google-font-list/#adding-your-google-font-to-the-list

2. Try this CSS:

.rtl .main-navigation:not(.grid-container):not(.mobile-header-navigation) .inside-navigation.grid-container .navigation-branding {
    margin-left: auto;
    margin-right: 0;
}

3. I'm seeing Content/Sidebar right now?

4. CSS in #1 should fix this.

5. Adjust the featured image alignment: https://docs.generatepress.com/article/adjusting-the-featured-images/

6. Fixed in GPP 1.10.0. For now, you can do this: https://generatepress.com/forums/topic/customize-rtl-mobile-and-tablet/#post-1189784

Hi Tom,
Thanks for your prompt reply.

1. Thanks!

2. It worked, but didn't like how it looks. How can we make it look like this? https://imgur.com/a/UEEwnqi

3. Yes, it's showing Content/Sidebar. Tried to change to Sidebar/Content as a workaround and didn't work either.

4. Worked, but didn't like how it looks. How can we make it look like this? https://imgur.com/a/PQ7GWZk

5. Tried, with no avail.
Left: https://imgur.com/a/ZXvhNEW
Right: https://imgur.com/a/zbjPEQr
I'd like the image to be placed exactly as it is in the demo, just from the right side -https://gpsites.co/marketer/

2. Try this:

.navigation-branding {
    order: 10;
}

3. Right now it's set to Right Sidebar. Can you set the blog page to Left Sidebar and save so I can take a look?: https://docs.generatepress.com/article/sidebar-layout/

4. Try this:

@media (max-width: 768px) {
    .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .navigation-branding img {
        margin-right: 0;
    }
}

5. Can you set it to right and then let me know? Might be some broken CSS.

2. It works! Just a little fix needed in the search bar - https://imgur.com/a/9oO9krQ

3. :-)

4. Awesome.
Little fix, how can we center the logo between the edges of the header in mobile? Right now it's shifting a tiny bit to the right.

5. Changed it to Right.

6. When clicking the logo in mobile, the frame is asymmetrical. https://imgur.com/a/alGutsW

7. Desktop - Prev/Next blog post - how can we make it like this? https://imgur.com/a/Xg0MyFS
Mobile - Prev/Next blog post - it looks good the way it is, just the top one needs to be Next, and bottom previous. https://imgur.com/a/KiUr6Cl

Thanks Tom :-)

2. Try this:

.navigation-search input {
    text-align: left;
}

4. Try the adjusted CSS: https://generatepress.com/forums/topic/some-rtl-problems/#post-1202147

5. Try setting a featured image width: https://docs.generatepress.com/article/adjusting-the-featured-images/

6. #4 will fix this.

7. Can we start a new topic for this?

Thanks!

4+6. Since you provided me with the classes, I was able to play with it around till I got the desired result. Could you please review the code and fix wherever needed?

@media (max-width: 768px) {
    .navigation-branding {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .navigation-branding img {
        padding-right: 10px;
	padding-left: 10px;
        margin-right: 0px;			
	  }
	
    #site-navigation .navigation-branding, #sticky-navigation .navigation-branding {
			  margin-left: 0px;
	  }
}/* End GeneratePress Site CSS */

Looks good to me :)