Color of the mobile menu button is almost invisible

Hi, how can I change the color of the button menu to make it more visible?! (the light grey at the bottom)

Screen Shot 2020-11-12 at 11.34.18 PM

And where I can change that greyish background to white?
Thanks

website is www.cleliamattana.com

In addition to that, aso the dropdown menu is not ok,it becomes trasparent. How can I keep it white?

See Below

Screen Shot 2020-11-13 at 12.04.51 AM

Hi @klelietta,

Thanks for reaching out.

To change the submenu background to white, please add this code in your Pro > Theme Options > CSS

.x-navbar .x-navbar-inner .sub-menu {
	background-color: #ffffff;
}

And to change the white navbar to another color, please use the code below.

.masthead-stacked .x-btn-navbar {
    color: #7472b5 !important;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

Thank you.

Thanks it worked perfectly!
I know CSS are not part of your service and I truly appreciate your suggestions. I rarely ask for them because I try to figure it out as much as I can by myself.
I only have a few issues left and one it looks like is related to the theme

  1. I’m desperately trying to change the size of the headers H2/H3 etc because they are super big. There was an option to do so and now I can only change the spacing between the letters… any suggestion on when I might find that option again? It’s only for the headings, the rest is ok.

  2. on the top bar, where there are the social media icons (how do I change the color? it’s basically impossible to see them) I’d like to add some links or a mini menu. Is there a way to do that easily?

022

  1. I have changed the colors on my websites and almost everything is ok, but when I go to the articles, both the title and the categories underneath have the same color and I’d like to have a secondary color for those links (like treating them as normal links would do)how can I do it?

See, the “in evidenza” link was pink because I have hovered over it.

I’ve been up all night trying to fix a few things and I hope you could help with these

For the rest, I will try to figure it out myself or checking here in the forum.
Thanks again for your kind help!

Hi @klelietta,

Please find the pointwise answer to your queries.

Point No.1: Regretfully, there are currently no options available in Theme Options, where you can set the size for the headings. But you can do it by adding these CSS blocks in Pro/X > Theme Options > CSS

header h1, .h1 {
    font-size: 30px;
}
header h2, .h2 {
    font-size: 28px;
}
header h3, .h3 {
    font-size: 26px;
}
header h4, .h4 {
    font-size: 24px;
}
header h5, .h5 {
    font-size: 23px;
}
header h6, .h6 {
    font-size: 20px;
}

The above code will work if copied as it is and doesn’t conflict with any existing code. To make this work only in the Header, you need to add the header selector as a prefix.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Point No.2: The social icon color and hover color can be set from the Theme Options > Typography and then Site Links and Site Links Hover. Please find the screenshot describing the options.

Point No.3: The Post title color can be set from Theme Options > Typography and then Heading Font Color, and the color you mentioned as secondary color can be changed from the option explained in Point No.2.

Hope this helps.
Thanks

Hi
Thank you!

So, here are the issues I’m still experimenting

  1. the code to change the size doesn’t work. I put it on the global CSS and nothing happened (tried different sizes). Weird that such an important feature is not already in the customizer. That would save a lot of time to people, just a suggestion :slight_smile: PS, I don’t think there are plugins or code conflicting with it… it just doesn’t work.

  2. The social icons on the bar: I know they are related to the hover links on the site, that’s why it gets light blue when hovering, but the main color for the link doesn’t change (pink) and what if I want to actually change the color all together? Also what about adding links in that bar? There is a space to add them but it’s blank and I have no idea how to add them.

  3. Yes I know where I can change the color of the title and I did it already, what I was asking is if I could personalize those specific links underneath the title so that they were not the same color, it looks very monotonous like that. What kind of code could i input to change these specific links?

Thanks again for your help

Hi @klelietta,

The code has been provided only for the Header section, to make that work in all section of the page, just remove the header prefix. The following code will look like:

h1, .h1 {
    font-size: 30px;
}
h2, .h2 {
    font-size: 28px;
}
h3, .h3 {
    font-size: 26px;
}
h4, .h4 {
    font-size: 24px;
}
h5, .h5 {
    font-size: 23px;
}
h6, .h6 {
    font-size: 20px;
}

The main color of the Social Icons and the Specific Link under the title are related to the Site Link color, so you need to change the Site Link color inorder to change that, if that conflicting with any other styles of your site, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where the customization questions are answered.

Hope it helps.
Thanks

Thanks, code still not working. I tried to change the h2 and nothing. I really need to solve this. I get the CSS but this should be something available on the customizer already…

Hi @klelietta,

The code given will work if that does not conflict with any existing code and added properly to the Global CSS from Theme Options > CSS. It seems that the given custom CSS is not loaded while investigating the Home Page. Can you please make sure that the code has been added properly?
If that is not the case, and even after adding the code it is not working, please provide login credentials for your site in a secure note to examine it further, including:

– WordPress Site URL & Login URL
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

NOTE: Regretfully, there is no such option in customizer to control the font size of the heading tags.

Thanks

I added the secure note

Hello @klelietta,

Thanks for sharing credentials. I went ahead checked your custom CSS under X/Pro–>Theme option -->CSS there was some syntax error you did not close curly “}”.

Theme-Options-Pro

I have added “!important” in your h2,.h2 CSS to make heigh priority of this style. I have created one page called “Test Themeco” at your server and used “Text element” then added a custom class “h2” in the Text element. The font size is rendering from the custom CSS.

Text Element

Headline Element

Frontend

Thanks

Hi, I have an issue with the button on www.keepcalmandtravel.com.
I used the same CSS to have the mobile button on a different color than white and although I see it on the preview, on mobile even clearing the caches there is no way of seeing it.

PREVIEW

Can you help? I changed the stack from Integrity to ethos and everything else is perfect and as I want it.
We are trying EVERYTHING but to no avail. The same code on the same stack worked perfectly on cleliamattana.com but not on keepcalmandtravel.com.
Why?
Thanks!

Hello @klelietta,

I am another staff checking your thread. When I checked both of your sites, the mobile menu icon is working perfectly fine. I am seeing this:

Kindly clear your mobile phone’s browser cache or use the private browsing mode or (Incognito mode) and test the site again.

Best Regards.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.