Login-register in the navigation menu

Travelify
1

Hello,

Is there any way to include Login and Register buttons on the right of the navigation menu, while the rest of the pages retain their position on the left of the menu? (preferably position-> first login and then register to the right).

[Optionally, it will be nice to include a magnifying glass (or search bar), straight above or to the left/right of login and register buttons]

Thank you!

2
  1. The simplest method would be to create a new menu items called “login” and “sign up” and point them to the right login and registration forms.
    Then style these two buttons to make them different from the rest as you can target your menu items based on their ID. You can inspect your website source to find the right IDs.

Here would be an example from our Theme demo that would style “Contact Us” menu item.

li#menu-item-1042 {
  background: red;
  float: right;
  border-radius: 10px;
}

This code would bring menu item to the right and make it read with rounded corners. But you can go all creative and make other changes. Like I already mentioned, this code is based on specific ID and it won’t do anything unless modified to work for your website.

  1. It is doable but it is out of scope of free support. You can hire someone on oDesk, Freelancer.com or other freelancer website to do this job for you.
    Alternatively you might try to implement search inside header right below social media icons. For that you can follow this tutorial.
3

If you don’t know how to find IDs for menu items, please let me know once you have created two menu items and I will proceed to provide you with exact CSS selector that you can use to further modify these menu items

4

Thanks for quick response!

  1. Not sure how to create those forms you are referring to. I am using Wordpress default pages for login and register (http://www.ecoengineer.gr/wp-login.php? & http://www.ecoengineer.gr/wp-login.php?action=register), so I am adding links (not pages) to the menu in order to show them. That way the problem is that it doesn’t recognize if the user is signed in, in order to change the buttons into log out and profile. Probably I am doing something wrong. Is the method that I am already using for login-logout not recommended? How can I create those forms you are referring to?

  2. I have tried to implement this tutorial already, but I couldn’t make it to put the search box under the social icons. The search bar forced the social icons to move on the left. Maybe because I have decreased the header height?

5
  1. Ok, that make sense. Didn’t think it through.
    The simplest method without messing around code would be to implement regular admin bar for logged out users. Most people are already familiar with it and I think it would work well. It also features search just like you wanted.

Here is one plugin that helps you to always display WordPress admin bar. This plugin haven’t been updated for years but it does work and will work for several years to come because it is a very basic and can’t be broken easily.

  1. It could be that there is no space for search bar inside header but you can use CSS to push social buttons above or below search bar. Could help you with that but for that you need to add search inside your website header, so I can write some CSS.
    But I think that my above mentioned solution with WordPress admin bar will solve both of your problems at the same time. Not the thing you were looking for but it will get the job done. Otherwise you will have to do a heavy modification for this theme.
6

Thank you for the reply.

  1. I have tried this plugin, but made some conflicts with the mobile version (with other plugins that I am using. I have added “get login” plugin which makes the job well with just a little problem, it creates also the buttons within sub-menus (you can check on sub-menu “Άρθρα”). Is there any way to avoid this?

  2. I have added the search bar inside the header as you suggested, with the code from the tutorial. It will be great to provide the CSS code! Thanks!

7

  1. If you want to use plugins like that then it is better to use this one . The thing is with you current plugin that it targets menu but doesn’t limit its targeting to top level menu and It also doesn’t use custom ID for those menu items, so you can’t even target them specifically using CSS either. Above mentioned plugin doesn’t have these problems.

  2. You want to search bar above or below social media icons or in-line with social icons?

8

Hi and thanks for quick reply!

  1. Great this plugin seems to work great.

  2. It would be nice below the social icons without increasing the header height.

Thanks again!

9
  1. Add this code to Theme Options >> Other >> Custom CSS.
.searchform {
    height: 30px;
    z-index: 100;
    float: right;
    margin-top: 70px;
    margin-right: 20px;
    margin-left: -30px;
}

#branding input.s {
    border: 1px solid #D0D0D0;
    width: 120px;
    text-indent: 10px;
    padding-left: 10px;
}

.hgroup-right .social-icons {
    position: absolute;
}

@media only screen and (max-width: 767px) {
    .searchform {
        display: none;
    }
}

Let me know if this helps.

10
  1. Awesome, this exactly what I wanted!

Thank you for great help and support!

Best regards!

11

Hi @ecoengineer,

I had a look at your website and the top nav bar looks awesome. I have been trying to get help to achieve something similar but in vain.

How can i create a similar social icons bar for my website, which will stay just above the Menu bar? I am a complete novice in coding.

Can you help me with custom codes to achieve that?

Thanks.