Put Login Button in main navigation menu

This topic has 10 replies, 2 voices, and was last updated 8 years by fersamp.

Author

Tagged: button navigation bar
December 2, 2015 at 17:23 #90646

fersamp
Participant

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

December 2, 2015 at 18:17 #90663

sharmstr
Moderator

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

December 2, 2015 at 18:31 #90667

fersamp
Participant

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?

December 2, 2015 at 18:48 #90670

sharmstr
Moderator

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.

December 2, 2015 at 19:36 #90692

fersamp
Participant

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?

December 2, 2015 at 19:43 #90695

sharmstr
Moderator

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

December 2, 2015 at 19:51 #90701

fersamp
Participant

No because I need to put all menu links to the left and only login to the right
December 2, 2015 at 21:09 #90728

sharmstr
Moderator
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
December 2, 2015 at 22:26 #90763

fersamp
Participant

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?
December 2, 2015 at 23:07 #90774

sharmstr
Moderator
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
December 2, 2015 at 23:38 #90789

fersamp
Participant

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