Put Login Button in main navigation menu

[fersamp]

Hi everyone, I need to put a Login Button in the navigation bar, top right if possible… So users can login or register directly on the right of the menu, clicking a visible button.
I have the shortcode for login button ( even with facebook login ) but I don’t know how to add a button in a menu.
If possible, I need to align all navigation menu on left, instead the login button on the right.
I dind’t find this feature in backend, how can I change align items on the navigation menu and eventually add code to create a button?

Thank you

[sharmstr]

Is there a reason why you need to use a shortcode instead of the built in Login and Registration links? The Kleo login and registration links will hide once a user logs in. The Kleo login link will launch the popup login form. You can stylize the link using css to make it look like a button.

You can have the menu on the left by choosing that layout in Theme Options > Header Options

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[fersamp]

Thank you for answer.
I need to use shortcode only because I’d like to put all menu links on the left near the site logo and only the login-register on the right.

So you mean that I can put login button only using menu “Login” and “Register” that are just in Kleo Theme, I only need to customize their look to button. There is an easy way to do this in css?

Can I align only the register-login button, once I customized it like a button, to the right?

[sharmstr]

You can make it look like a button by putting the button tag around the title. See attached.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[fersamp]

Sorry, last question: in the button class, Can I set the alignment so that the button will be placed on the right of the menu? If yes, how?

I’m not very good with .css, I will write css class in theme.css in the child theme?

[sharmstr]

Putting it as your last items in your menu will put it to the right. No?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[fersamp]

No because I need to put all menu links to the left and only login to the right

[sharmstr]

You can try this

COPY CODE

.kleo-show-login.menu-item.menu-item-type-custom {
    float: right !important;
}

But you cant brake the menu apart. So floating the menu left will still move the login left, but the login would be the last item. You cant even do that the way you wanted to initially.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[fersamp]

I would like to have from left to right:

logo – menu with all link on the left and Login button on the right.

How can I do this?

[sharmstr]

There’s no container to pop your button into that would be separate from the menu. So like I said, if you float the menu left against the logo, the login button will follow.

You can try this, but I cant guarantee that it will be ideal for your site and logo. You’ll need to mess around with the percentages.

COPY CODE

@media (min-width: 991px) {
.navbar-header {
    width: 15%;
}
.collapse.navbar-collapse.nav-collapse {
    width: 85%;
}
.nav.navbar-nav {
    width: 100%;
}
.kleo-show-login.menu-item {
    float: right !important;
}
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[fersamp]

Perfect! it works. Only for knowledge, how does it works the resizing of the logo_img when scrolling?

In the code you posted, Can I eventually use the percentages dinamically changed in base of the resizing of the logo, so that the menu move on left with the image resizing? It would be an amazing effect…I know I ask too much 🙂

[Author]

Posts