[Support request] Aligning mobile navigation to the right

Home Forums Support [Support request] Aligning mobile navigation to the right

Home Forums Support Aligning mobile navigation to the right

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #233039
    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!

    #233062
    Tom
    Lead Developer
    Lead Developer

    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?

    #233117
    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

    #233173
    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

    #233221
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #233900
    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!

    #233940
    Tom
    Lead Developer
    Lead Developer

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

    Thanks! ๐Ÿ™‚

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.