Docs

[ljuan_80]

Hi
I would like to know if it’s possible to add a log in/sign up CTA button to the right hand corner on my header/menu bar.
I have added a screenshot of an example page with a similar button.

Thanks very much in advance for any help you’re able to provide.

[Darshana]

Hi there,

Thanks for writing in! Follow the example here (https://community.theme.co/forums/topic/add-a-login-button-to-my-header/#post-659167).

Hope that helps.

[ljuan_80]

Hi
That really helped. I’ve managed to get a log in/log out button on my header. I was just wondering if you could help me position it better. I’ve attached a screenshot of the position I’d like it to be in.

Also, if you could help me make it ‘flatter’, I’d be really grateful. Right now it’s got shading/shadow and is too ‘3D’ for the style of my website. I’d like it to look the same as the other CTA buttons on my site.

Thanks very much for all the help!

[Rupok]

Hi there,

Thanks for updating. It would be a bit difficult to position this outside of the menu container as it’s actually belongs to the menu. You might need to use a couple of media query to adapt this for all screen size. I ma pointing you with few examples :

You can use this custom CSS :

@media only screen and (min-width:1024px) {
.menu-item.x-menu-item-custom-login {
  position: absolute;
  right: -115px;
  top: 13px;
}
}

@media only screen and (min-width: 1399px) {
.menu-item.x-menu-item-custom-login {
  right: -150px;
}
}

@media only screen and (min-width: 1400px) {
.menu-item.x-menu-item-custom-login {
  right: -300px;
}
}

To make it more flat, you can remove the x-btn-real class. If you are using shortcode then remove type=”real” or replace with type=”flat”.

Hope this helps.

Cheers!

[ljuan_80]

Thanks that has worked perfectly! You guys are great.
Thanks so much for all the support. I really appreciate it.

[Paul R]

You’re welcome! 🙂

[ljuan_80]

Hi
I’ve just noticed one tiny detail with the log in/on button that you helped me configure for my site. When you hover over the button the Word ‘example’ appears in a grey box above it.
Can you help me remove this please.
Thanks very much!

[Paul R]

Hi,

Please remove title="Example" in your button shortcode.

Thanks

[ljuan_80]

That worked. Thanks very much!

[Lely]

You’re welcome!

Cheers!

[Author]

Posts