Secure-Pro – customization colors

[JOEL MULLER]

Hi, I’m using Secure-Pro theme and have those issues :

1) Social media on Topbar
When I put my social media link on Topbar Left Text 1, it make the Topbar almost double size then if I put on Topbar Right Text 1

https://ibb.co/WKP6MLF
https://ibb.co/ZhRGCyY

2) Menu / Submenu customization
I find this code by doing a search on the forum here (I just adapt it to my color and for Menu and Sub-Menu):

#topmenu li a:hover, #topmenu li.menu_highlight_slim:hover {background-color:#E80035 !important;}
#topmenu ul li ul li a:hover { color:#fff !important;}

#topmenu ul.sub-menu li a:hover, #topmenu li.menu_highlight_slim:hover {color:#E80035 !important;}

Since I put this code, the menu goes to uppercase, even if the option Turn Menu Text to Uppercase is unset. When I saw that, I removed the code but seems on computer the option Turn Menu Text to Uppercase doesn’t work anymore, when I click on publish it goes back to uppercase. On mobile is ok.

Can you, please, provide me the CSS code to have my menu / sub-menu look like on both picture below ?

https://ibb.co/wYCh5VK
https://ibb.co/pnQ1qqJ

Is it possible to thave that kind of view for mobile/tablet as well ?

3) Is it possible to make, on computer view, the menu bar bigger ? I would like that the hover background red goes on the red Topbar and not having a small black (background picture) between

Something like that :
https://ibb.co/swRGSf9

4) Page Title background color ?
I’m using a background picture, and sometimes I have the page title in white that goes to a more light part of the color, so the title in white in that case is not so readable. Is it possible to have a specific background color (color I can choose) to avoid that effect ? Maybe it will be nice if there’s a possibility to have like an transparency effect to that background color ?

5) Topbar larger ?
Is it possible to have the color of the Topbar going more on the left/right of the screen on computer view ?
Something like that :
https://ibb.co/XJZmNwg
the Topbar Left / Right Text can stay in place, just the red color.

I look forward to hearing from you.

Best regards.

Joël

[Sonnal S Sinha]

Hi,

1) Social media on Topbar
When I put my social media link on Topbar Left Text 1, it make the Topbar almost double size then if I put on Topbar Right Text 1

And: We did not get any social media issues, please put social media in the left text 1, then we will solve it

2) Menu / Submenu customization
I find this code by doing a search on the forum here (I just adapt it to my color and for Menu and Sub-Menu):

Ans: Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

#topmenu ul li a { text-transform:capitalize !important;}

3) Is it possible to make, on computer view, the menu bar bigger ? I would like that the hover background red goes on the red Topbar and not having a small black (background picture) between

Ans: Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

.header.type1 {
    padding-top: 0 !important;
}

4) Page Title background color ?
I’m using a background picture, and sometimes I have the page title in white that goes to a more light part of the color, so the title in white in that case is not so readable. Is it possible to have a specific background color (color I can choose) to avoid that effect ? Maybe it will be nice if there’s a possibility to have like an transparency effect to that background color ?

Ans: Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

.thn_post_wrap .page-title {
    background-color: rgba(0,0,0,0.6);
    padding: 10px 0;
}

5) Topbar larger ?
Is it possible to have the color of the Topbar going more on the left/right of the screen on computer view ?

Ans: Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

.head-info-area {
    background-color: rgb(232, 0, 53) !important;
}

Regards,
Dave

[JOEL MULLER]

Hi Dave,

Thank you for you quick response.

Solutions for the points 2 to 5 works good.

I’ve moved the social media to the left text 1 with the same code. You can see that the Topbar is bigger now.

I would like also to change have a background color for the active menu, I’ve put this code but it doesn’t work :
/*Active menu background color*/
#topmenu ul li.current-menu-item>a:link, #topmenu ul li.current-menu-item>a:visited, #topmenu ul li.current-menu-parent>a:link, #topmenu ul li.current_page_parent>a:visited, #topmenu ul li.current-menu-ancestor>a:link, #topmenu ul li.current-menu-ancestor>a:visited {
background-color: #E80035 !important;
}

I look forward to hearing from you.

Best regards.

Joël

[JOEL MULLER]

Hi Dave,

In addition to my previous reply.

Is it possible to have for mobile the possibility to change the “Mobile Outer Toggle Bar Background color” ? There is an option on Header for Mobile Outer Toggle Bar Color but not for background color.

Thank you.

Joël

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:1023px) {
.head-info-area .left span{ padding:0 !important;}
.sidr {
    background-color: #282828 !important;
}
.pad_menutitle {
    background-color: #d00433 !important;
}
}

Regards,
Dave

[JOEL MULLER]

Hi Dave,

I suppose the code you gave me is for my post #148155 ?

It doesn’t work. It change the menu color and background color on the mobile, but that’s not I wanted. I wanted the 3 bar from the button, like the picture :
https://ibb.co/cQGdm9g

Can you please also have a look at post #148148 ?

Thank you.

Joël

[Sonnal S Sinha]

Hi,

Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

@media screen and (max-width:1023px) {
#simple-menu .fa-bars {
    background: #fff !important;
    padding: 0 5px !important;
}
}

Regards,
Dave

[JOEL MULLER]

Hi Dave,

It’s working thank you.

Can you please have a look at post #148148, I copy below :

1) Topbar bigger with Social media link at Left text 1
I’ve moved the social media to the left text 1 with the same code. You can see that the Topbar is bigger now.

2) Background color for the active menu ?
I would like also to change have a background color for the active menu, I’ve put this code but it doesn’t work :
/*Active menu background color*/
#topmenu ul li.current-menu-item>a:link, #topmenu ul li.current-menu-item>a:visited, #topmenu ul li.current-menu-parent>a:link, #topmenu ul li.current_page_parent>a:visited, #topmenu ul li.current-menu-ancestor>a:link, #topmenu ul li.current-menu-ancestor>a:visited {
background-color: #E80035 !important;
}

I look forward to hearing from you.

Best regards.

Joël

[Sonnal S Sinha]

Hi,

Kindly send us your URL of the site and WordPress admin details (Username & Password) via email:[email protected] Please mention this forum URL while replying so that we understand what needs to be done.

We’ll check and revert back to you.

Regards,
Dave

[JOEL MULLER]

Hi Dave, done.

Regrds.

Joël

[Sonnal S Sinha]

Hi,

Replied via email.

Regards,
Dave

[JOEL MULLER]

Hi, ok I reply too to the email.

Regards.

Joel

[Sonnal S Sinha]

🙂

[JOEL MULLER]

Hi Dave,

I upload a picture : https://ibb.co/3C4ZXYp

Seems it didn’t go through the email as attached picture.

Best regards.

Joël

[Sonnal S Sinha]

okay

[Author]

Posts