Modify the color of the top bar of the hamburger menu in the mobile view. .

dark-side

Hello pankaj, I request your help to modify the color of the top bar of the hamburger menu in the mobile view.

I want to change the green color to a red color and that when pressing on the bar the current black is kept and red is shown closed.

The color I have chosen is the same as the upload button above that is shown on the right of the screen and at the bottom of the page in the computer version.

The color code is # f44236 and I want to make the change from the server not in the Joomla backend and in the template, in that area I don't handle it well.

Can you tell me the code to insert, the folder where to make the change and the path to follow?

I await your reply and send you my regards.

Ninja

dark-side
Hi
Its default primary button that use same color all over the site
Use this code in custom.css
Path : /templates/socialize/css/custom.css

.btn-primary {
    background-color: #00bbd4;
    border-color: #00a5bb;
}

dark-side

Hello pankj, I made the changes that you indicated and the color changes but there is a problem. Only the color change is shown when loading the page, if a user presses the menu bar it is seen in its default blue, green color.

Can you tell me what is the reason for this behavior?

Ninja

dark-side
Hi
Use this code as well

.btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {
    background-color: #006f7d;}

dark-side

Hi pankaj, insert the code you told me and it doesn't work as it should.

Pressing the hamburger menu bar changes color, from the default green color to the black that I modify but the fixed black color that is my goal is not maintained.

I am attaching the complete code of the custom.css folder and please review it. I don't know if it's my mistake or if I need to add syntax to the code.

.joms-media--image--half {
max-width: 480px;
}
.btn-primary {
background-color: #121212;
border-color: #121212;
}
.btn-primary:active:hover, .btn-primary.active:hover, .open > .dropdown-toggle.btn-primary:hover, .btn-primary:active:focus, .btn-primary.active:focus, .open > .dropdown-toggle.btn-primary:focus, .btn-primary:active.focus, .btn-primary.active.focus, .open > .dropdown-toggle.btn-primary.focus {
background-color: #121212;}`

If you want you can see how the change reacts from the mobile view in the url of my site that I indicated in details.

I keep waiting for your answer,

Ninja

dark-side
Hi
add this code in the last line and all colors will be black

.btn-primary:hover{ background-color: #121212;border-color: #121212;}

dark-side

I made the change and the bar is black with a yellow border. That is correct although my preference is no border or black border.

The problem is that the blue color does not disappear, it is always displayed when the page is first loaded. I have cleared cache three times to check and it doesn't work.

This is the complete code.

.joms-media - image - half {
max-width: 480px;
}
.btn-primary {
background color: # 121212;
border color: # 121212;
}
.btn-primary: active: hover, .btn-primary.active: hover, .open> .dropdown-toggle.btn-primary: hover, .btn-primary: active: focus, .btn-primary.active: focus, .open> .dropdown-toggle.btn-primary: focus, .btn-primary: active.focus, .btn-primary.active.focus, .open> .dropdown-toggle.btn-primary.focus {
background-color: # 121212;}
.btn-primary: hover {background-color: # 121212; border-color: # 121212;}

Can you tell me if it is correct how I inserted it?

Ninja

dark-side

dark-side .btn-primary {
background color: # 121212;
border color: # 121212;
}

this code is wrong
place use correct code

.btn-primary {
background-color: #121212;
border-color: #121212;
}

dark-side

Now if you keep black in the menu bar. The border is still yellow but it is not a problem, I am satisfied with it. I like the change.

You can now close the ticket and mark it as resolved. Thank you very much pankaj for your help, he sent you a greeting.