Two menu areas in navbar

[minuteworks]

Hello,

I’m working with the X Theme and it’s going great for my simple one page site – www.riotid.com. The site is currently displaying an In Construction page so to see the site you can log in with the username ‘testuser’ and the password ‘cLdyFRopvuA!P7r!hfdU&@Wh’.

I am trying to find the best way to have two sections in the main nav. I would like all of the menu items aligned left as they currently are but I’d like one item on the right ‘#RiotID’ linking to twitter. I’ve currently hidden the logo and floated the main menu left. I now just need to find a way to get the one menu item across to the right.

Can you offer any advice please?

Many Thanks!

[Prasant]

Hello @minuteworks,

Thanks for writing in!

I don’t see an option to enter the password. Can you please share the admin details in secure note so we can take a closer look at the menu setup?

Thanks.

[minuteworks]

Hello, sorry about that, I’ve done that now.

[Prasant]

Hello @minuteworks,

Thanks for updating the thread.

You can add following CSS under X > Theme Options > CSS:

.x-navbar .desktop .x-nav>li#menu-item-52 {
    width: 100%;
    text-align: right;
    position: absolute;
}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[minuteworks]

Thanks for your reply. That’s certainly got it in the correct position. There’s a problem though as it appears that the 100% width makes it appear over the top of the other links. So when I click the other menu items they all take you to the location of the one on the right.

Please can you help?

[jade]

Hello @minuteworks,

Please try to update the code to:

.x-navbar .desktop .x-nav>li#menu-item-52 {
    position: absolute;
    right: 0;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[minuteworks]

Perfect! Thank you!

[lely]

You’re always welcome @minuteworks!

Cheers.