Two Small Issues

In my bottom footer, the text is blending in with the background unless highlighted and when hovering over my post links, it shows up. How do I fix this and is there a way to do it without code? If not, that’s fine.

The red arrow is where the link would be, but it’s not showing because I was hovering over it during the screenshot.

Hi @devinnunn,

By default the footer has a dark background in Ethos Stack making the test visible. I can see you have changed the background color of your footer so you need to change the text color as well to make it visible

Please add this in Theme Options > CSS

.x-colophon.bottom .x-colophon-content {
     color:#000;
}
.entry-title a:hover {
     color:#74bd40;
}

Hope that helps

Thanks, Paul. That did the trick. I apologize, but there’s another issue I’m seeing with mobile where the mobile button isn’t showing up.

When searching the website on my phone, it pretty much looks like it does on desktop when you view it from a mobile perspective on desktop through Cornerstone.

There also seems to be a lot of white space between the logo and large slider beneath it as if the slider is lowered on mobile. It’s not too bad from a tablet perspective, but it’s pretty significant through a phones perspective.

I also have another site with X theme that has slight issue with the header menu when in landscape mode but it’s currently not licensed, so I’m not sure if I can get any help with that one, but if not, it’s okay.

Hi Devin,

That is basically the same issue as the footer links, its white on a white background. To change the mobile menu toggle button color, please add this to Theme Options > CSS

.x-btn-navbar,
.x-btn-navbar:hover,
.x-btn-navbar.collapsed:hover {
	color: #5f5d5d;
}

Feel free to adjust the color value.

That is actually the navbar area where the mobile menu toggle is placed. You can adjust that under Theme Options > Header > Navbar Top Height

But you’re planning to buy a license for that site, right? Please provide us the details of the issue and the URL of that site in a separate thread.

Thanks,

Thank you. For some reason, the code didn’t work, even after changing the value to black. Also, for the navbar height, it seemed to make a noticeable adjustment on mobile, but it also changed the desktop version as well. Is there a way I can change the mobile version only?

But yes, I do plan on buying a license for it in the future. It’s just not something I’m currently working on at this point in time, but would still like to fix that small issue so it doesn’t scare tablet users away.

Hi Devin,

If you only need to adjust the navbar height on the mobile, please use this custom CSS instead.

@media (max-width: 979px) {
	/*navbar height on mobile*/
	.x-navbar-inner {
   	 min-height: 60px;
	}
}

Feel free to adjust the min-height value.

Where did you add the code provided? I don’t see it on your Theme Options > CSS

Thanks,

Sorry, I took the code out, but it’s back in now. I also have the new code in which doesn’t seem to be working either. I adjusted the value multiple times on both and nothing changed :disappointed:

Hi Devin,

I checked your code and could see this

@media (max-width:979px) {}

.x-navbar-inner {
    min-height: 97px;
}

Please change it to this

@media (max-width: 979px) {
	/*navbar height on mobile*/
	.x-navbar-inner {
   	 min-height: 60px;
	}
}

Please copy your entire css code and paste it on the link below to check for syntax errors.

http://csslint.net/

Thanks

I’m not sure what I’m doing wrong but I pasted the code into the CSS exactly how it is on here and still nothing. The coding for changing the menu button color for mobile is still not showing up either. I may have to give you my login credentials because I’m not able to figure out what it could be. Actually, I think I’ll just skip on trying to change the navbar height and instead just figure out how to add color to my mobile menu button.

Hi Devin,

I have inspected your site and I could not find any CSS rule related to menu button color on your site’s HTML output.

You need to add your custom CSS rules into your X -> Theme Options -> CSS area.

If you have already added to the correct place, it could be a caching issue as well. Please clear all caches by following this guide (https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/) and re-test your issue again.

If you’re still having issues, please provide us with your WordPress login credentials in a secure note to check your issue further.

Thanks!

Hi Devin,

Thank you for adding back the CSS code, let’s add an !important statement to it.

/*mobile toggle menu color*/
.x-btn-navbar,
.x-btn-navbar:hover,
.x-btn-navbar.collapsed:hover {
	color: #000 !important;
}

Hope it helps,
Cheers!

Finally! That did it :grin: I can now get out of your guys’ hair (for now), lol. Thanks a ton!

You’re most welcome Devin! :slight_smile:

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