Docs

[seanbydesign]

Hello everyone. I have a question regarding customising the top bar toggle.

I have added a login/out widget into one of the header areas. This is a nice ajax modal login. It is the only function of the topbar at this time. I would like to change the + sign toggle into a login button like the one attached.

In the top half of the screenshot I am using the default. In the lower, I want the plus sign to be a btn class with a 1px outline.

I am using the icon stack. I have spent an hour checking this forum but have not found someone trying to replace it entirely.

[Jade]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[seanbydesign]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing back. That would be a bit tricky to achieve. You can add this under Custom > CSS in the Customizer.

.x-btn-widgetbar {
  border: medium none !important;
  font-size: 16px;
  margin-right: 15px;
  margin-top: 15px;
}
.x-btn-widgetbar::after {
  border: 1px solid #f00;
  color: #f00;
  content: "Login";
  padding: 5px 10px;
}
.x-btn-widgetbar .x-icon-plus-circle {
  display: none;
}

Hope this helps.

[seanbydesign]

Hey I figured it was a bit tricky. You did a good job. Thanks so much!!!!!!!!!!!!!!!!!!!

[Joao]

Glad to hear it 🙂

You are welcome,

Joao

[Author]

Posts