New CatchBox Pro 4.3 Mobile Options

This topic has 6 replies, 2 voices, and was last updated 9 years, 1 month ago by Sakin.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
November 17, 2015 at 8:34 am #79742

Edward
Participant

Trying to work with the new options for CatchBox Pro 4.3.
The menu looks very different from 4.2, and all the elements don’t match.
I can get the mobile menu color to change using this:

.mobile-menu {
background-color: #1b4266;
color: #000;
}

I see what the “background-color” does, but not the “color.”

However, I haven’t been able to change the background color of the full width bar to my desired color – 1b4266.

The font on the full witch bar on my iPhone is the correct sans serif, but on a narrow screen on a desktop computer, it’s a serif font.

Other things don’t match too.

I almost wish I could go back to the old mobile menu style.

November 17, 2015 at 9:43 pm #79760
Sakin
Keymaster
@Edward: For mobile menu color, we are working on it and will be release it by tomorrow. So, please wait for that

But I don’t get it which font are you talking about. We use same font for mobile and desktop. There is no changes.
The default font is defined as below:
```
body, 
input, 
textarea {
    font-family:  "Helvetica Neue", Helvetica, Arial, sans-serif;
}
```
Looks like your desktop computer don’t have Helvetica Neue font install so it’s loading Arial font as alternative.
November 19, 2015 at 5:09 am #79857

Edward
Participant

Sakin,
Thanks much. I see the new update and I installed it.
Better than before, but how can I customize the colors on the mobile menu?
I have a custom background color for my website – a little darker than the standard blue color theme. Right now, the theme picks a default blue for the mobile menu, but when I touch one of the options, it shows my darker custom color. What I would like is for the menu and the full-width bar (the one with the navigation icon) to be my custom color, and the button separators a lighter blue. This lighter blue would also occur when I tap on one of the options. I hope you understand what I am trying to do.
Also, it’s extremely difficult to “X out” of the mobile menu if you tap the navigation icon. You can’t see the “X” in landscape mode and you barely see it in portrait mode. You must either touch the left arrow and back up, or choose one of the menu options.
As I implied in my prior post, the old menu style was easier in some ways, but we have no option except to revert to Version 4.2.
Thanks,
Ed
Ed

November 19, 2015 at 8:20 am #79868
Sakin
Keymaster
@Edward: Can you post in your site URL and let me know the color that you want to change it. Then I can check in Custom CSS for you. Also I can check in the issue of your menu. Thanks.

Following is the details of mobile menu color css, you can change it as per your need and then add it in “Appearance => Theme Options => Custom CSS” box:
```
/* Mobile Menu Bar Background Color */
.menu-access-wrap { background-color: #3d3d3d; }
/* Mobile Menu Bar Text Color */
.mobile-menu-anchor a.genericon-menu { color: #ddd; }
/* Mobile Menu Bar Text Hove Color */
.mobile-menu-anchor a.genericon-menu:hover { color: #fff; }
```
```
/* Mobile Menu Items Background Color */
.sidr { background-color: #3d3d3d; }
/* Mobile Menu Items Text Color */
.sidr ul li a, .sidr ul li span { color: #eee; }
/* Mobile Menu Items Text Hove Color */
.sidr ul li a:hover { background-color: #333; color: #fff; }
```
November 19, 2015 at 8:49 pm #79919

Edward
Participant

Sakin,
Thanks much.
Site URL is http://www.zohnlaw.com.
I would like the menu tabs to be the same color as my modified background (#1b4266) and the borders of the menu tabs to be a slightly lighter blue. The hover color would be the same lighter blue. The lighter blue could be perhaps the default blue of the theme.

Regards,
Ed

November 19, 2015 at 9:01 pm #79922

Edward
Participant

Sakin,
Ideally, I would be able to get the mobile menu to adopt the shading and separators (dots) of the regular first-level menu.
Ed

November 19, 2015 at 11:37 pm #79938
Sakin
Keymaster
@Edward: You have already change it.
Replace:
```
/* Mobile Menu Items Text Color */
.sidr ul li a, .sidr ul li span { color: #eee; }
```
with the following:
```
/* Mobile Menu Items Text Color */
.sidr ul li a, .sidr ul li span { color: #255a8c; }
```
Then replace:
```
/* Mobile Menu Items Text Hove Color */
.sidr ul li a:hover { background-color: #1569c7; color: #fff; }
```
With the following:
```
/* Mobile Menu Items Text Hove Color */
.sidr ul li a:hover { background-color: #255a8c; color: #fff; }
```
Author

Posts