Main Navigation Float Right

Hi there,

Thank you for such an amazing theme, I am really having a lot of fun using it! Yet I am struggling with something and I need your help please.

I want my main navigation to float right, but somehow this does not work right.

If I use the below CSS nothing happens:

.main-navigation ul {
float: right;
}

If I target the li instead of the ul (same CSS code as above), then the menu float right but the whole order goes into reverse.

Can you please tell me what I am doing wrong - I don’t understand why it is not working.

The URL: http://glowgear.preferredsolutions.co.za/

Thanking you in advance.

Hello there,

Try with custom css code below:

@media screen and (min-width: 991px) {
    .site-branding {
        float: right;
    }
}

All the Best!

Hi thank you for your reply. I think I was not clear enough with my request. I want the menu items (not the site branding) to be right aligned (or float right).

The site branding must stay on the left.

I hope what I am asking makes sense. Thanks.

Hello again,

I see. Well you can try custom code below:

.main-navigation ul {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

and result should look like this http://screencast.com/t/yXVmg7Cl

Please test in different browsers, because display flex is pretty new.

Best Regards!

Thank you! I was away for a few days so only seeing this now. Will test it and see if it works on all browsers.