How can I change the color of portal button

takanori1 · ‎10-17-2018

Hi, expert.

when I change web browser size to small, then 3 lines button display(see attachment).

What I want is change color.

I think it can be changed by CSS in Header Menu widget.

But I don't know what parameter should I change.

If I'm wrong, let me know what parameter in what area(for example, xxx widget) I should change.

I'm not good at CSS.

Aishwarya Puri · ‎10-23-2018

Hi,

Steps -application navigator -> service portal -> Headers & Footers -> Stock Header

For changing the color you have to make changes to the stock header widget

for this first clone that widget

In the Html part, we have button tag

Now for changing color write CSS for the class of buuton "navbar-toggle collapsed"

CSS should be like this:

.navbar-toggle collapsed

{

color : #fff;

width: 20%;

}

I hope it helped you if it did please mark it correct or helpful.

Warm Regards,

Aishwarya Puri

Mike Patel · ‎10-17-2018

Add something like below to header css

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: black;
}

tmiya · ‎10-21-2018

Thank you for your reply.

I can change .navbar-inverse bockground color by adding above in Header Menu widget.

But I can't change the color of 3 lines button.

What is that name?

Mike Patel · ‎10-21-2018

tried below and works fine for me. Make sure you clear cache after change

.navbar-inverse .navbar-toggle .icon-bar {

background-color: yellow;

takanori1 · ‎10-22-2018

Thank you for your reply again.

Is it correct to set it at wieget "Header Menu" ?

(Of course, after clone "Header Menu")

I add it at sp_portal's CSS, but it failed too.

I've added $sp-tagline-color: #ffffff; in sp_portal's CSS, then I can't visible 3 lines button.

If you success to change the color of 3 lines button, could you show me the result and what record did you change.

Regards.