Aligning mobile navigation to the right

[Sim]

Hi Tom
Really love GeneratePress, thank you for this great theme 🙂
I’m using it in an RTL site and would like to know how to make the menu items be aligned to the right (now they’re aligned to the left)
I would really appreciate if you could add it to the rtl.style file so it will be a default
I would also like to ask you to add this to rtl.style file:
.grid-33 {float: right;}
In RTL website the first widget should be on the right
Thanks a lot!

[Tom]

Hi there,

You can align the menu items inside “Customize > Layout > Primary Navigation” either using the Navigation alignment setting or the Navigation position setting.

Which first widget do you mean?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sim]

The Navigation Alignment set to the right and it’s ok on desktop, it aligned to the left only in tablet/ mobile and I can’t figure out how to fix it

[Sim]

I meant the footer widget
Footer widget 1 should be on the right side of the page, and footer widget 3 should be on the left side
Because RTL website you read from right to left

[Tom]

Got some of this sorted in the next version.

For now, add this to the rtl.css file:

.menu-toggle,
.nav-search-enabled .main-navigation .menu-toggle {
	text-align: right;
}

.main-navigation .mobile-bar-items {
	float: left;
}

.main-navigation li {
	text-align: right !important;
}

@media (min-width: 768px) {
	.inside-footer-widgets > div {
		float: right;
	}
}

And this to your custom CSS:

@media (max-width: 768px) {
    body:not(.mobile-header-logo) .mobile-header-navigation .mobile-bar-items {
        position: absolute;
        right: 0;
        top: 0;
    }
    body:not(.mobile-header-logo).rtl .mobile-header-navigation .mobile-bar-items {
        left: 0;
        right: auto;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sim]

I added the codes but I don’t see any difference
I’ll send you print screens to support@generatepress.com, maybe you’ll understand more what I meant
Thanks!

[Tom]

If you could send a link to your site it would help a lot .

Thanks! 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts