How to move some menu items to the right side?

Hi there,
Please provide us your siteurl for site inspection so that we can inspect your site.
Thanks,

Hi, the site is currently under development and restricted by IP.

Here’s a screenshot of the menu: .

Could you suggest how can I move “Log In” and “Register” menu options to the right?

Regards,
Shyam

Your image didn’t come through, but you could try adding a class to each of menu items that you want to move. If you don’t see the class field,this post shows you how to enable the field.

https://sevenspark.com/how-to/how-to-add-a-custom-class-to-a-wordpress-menu-item

From there you can add css selectors that target the classes you added and float them to the right.

.menu li.myClass {
    float: right;
}

Your menu might be in a container, so you will have to expand the width of that as well.

.container {
    width:100%; // maybe smaller depending on your site
}

It’s hard to say without seeing your design, but that should get you started.

I tried that, but looks like I may be doing something wrong.

I’ve given the two menu items the class called “Login”.

And then I added this to custom css:

.menu li.myClass{
  float: right;
}

Didn’t work so I even tried

.Login li.myClass{
  float: right;
}

Doesn’t work. By the way, here’s the screenshot again: https://i.imgur.com/RZ2sWSE.png

Regards,
Shyam

Are you familiar with the Chrome inspector? You can right click on any element in your site and choose inspect to get more information about that element. If you’re not using Chrome, most modern browsers have this built in.

You may see something like this:

<nav id="site-navigation" class="main-navigation" role="navigation">
   <div id="primary-menu" class="menu sf-js-enabled sf-arrows" style="touch-action: pan-y;">
        <ul aria-expanded="false" class="nav-menu">
            <li class="page_item page-item-2"><a href="https://wp-themes.com/?page_id=2">About</a></li>
            <li class="page_item page-item-46 page_item_has_children"><a href="https://wp-themes.com/?page_id=46" class="sf-with-ul">Parent Page</a></li>
         </ul>
    </div>
</nav>

This is from the theme demo. See how your .nav-menu is surrounded with div#primary-menu and nav#site-navigation? That’s where you would need to add extra width.

#site-navigation,
   #primary-menu{
    width:100%; // maybe smaller depending on your site
}

Keep in mind this will most likely effect any responsive code. So you could wrap it in a media query.

@media (min-width: 900px) {
      #site-navigation,
      #primary-menu{
          width:100%; // maybe smaller depending on your site
      }
}

Hi Shyamraj.

Did the code work as suggested by Justin?

And also many thanks to Justin for helping in.

THanks