Thanks. I understand how to change the text itself in the top bard. Trying to understand how to make that text color white. On the CSS code you sent, do I add that to the Global CSS or to the Additional CSS at the bottom of the Customizer?
Thanks.
Hi there,
You need to add the code to X > Launch > Options > CSS section. To make the text color white you simply need to add the code below:
.masthead-inline .x-navbar .desktop .sub-menu span {color: white;}
Thank you.
Chris, X>Launch>Option>does not have an option for CSS. The only way to get to CSS is Appearance>Customize and then either Custom>Global CSS or Additional CSS. I have pasted the code above and neither turns the text to a solid white. It remains a light screen of white(that looks like a tint of the background color) on the solid background. Hard to read. I have tried puting the code you provided for making the drop down boxes in the nav flushed left, and that has not worked either. Am I in the right place?
Hi There,
On Theme Options, on the very left tab you will find CSS.
Please provide your URL so we can take a look.
Thank you
Hi There,
Please add the following CSS to Theme Options CSS
.x-topbar .p-info, .x-topbar .x-social-global a i {
color: white;
}
.masthead-inline .x-navbar .desktop .sub-menu {
left: 0;
right: initial;
}
Hope it helps!
Thank you. That did it.
Sorry, just a follow up. Based on what you sent (that worked for topbar) I did this to change the footer text white:
.x-footer .p-info, .x-footer .x-social-global a i {
color: white;
It did not work. What did I miss?
Hi There,
Please use this instead:
.x-colophon.bottom .x-colophon-content p , .x-colophon.bottom .x-social-global a {
color: white;
}
To find the correct selectors you can use the right button of your mouse and inspect the element you are targeting.
Hope it helps!
Thanks for all your help on this. One more question and I should be out of your hair. Right below my header on the interior pages there is a gray band of color. I cannot figure out how to get rid of it. Here is a page where you can see it.
http://grinleycreativedevsite.com/x/#/options
Sorry, ignore my last question on the gray bar. I solved it. There is one last item that I am trying to try to figure out. I have a lot of white space between my header and the start of my content below it. I have looked through all of the locations, I have my sections set with 0 margins and padding but cannot tighten up this spacing. Is this in the CSS. Can you send me the fix?
http://grinleycreativedevsite.com/skilled-nursing-and-rehab/
Hello @grinley_creative,
Thanks for writing in!
You can add following CSS to remove spacing between header and content:
header.x-header-landmark.x-container.max.width {padding-bottom: 0;} .offset.cf {margin-top: 0;}
Please add class mtn to the first custom headline to remove the margin on top of it. You can find more info about the css classes available to use here.
Thanks.
I have an interesting problem going on that I do not see anything on in existing posts. When I look at my site’s pages on an iphone (with the exception of the home page), it displays the title of the page in large headline font below my header and above my actual content. It does not do this when I look at it on my desktop computer and shrink the screen to mobile size, just when I actually look at it on the phone. Is there a fix for this?
Hi again,
Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript
function stop_jumps() {
jQuery('header.masthead.masthead-inline').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function(){
stop_jumps();
});
jQuery(window).resize(function(){
stop_jumps();
});
Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!
Hi, No, this is not solving the issue. I have pasted exactly as you described and cleared cache but page titles still appear.
Hey there,
I checked your page’s source code and there is no code in there (see screenshot)
Please make sure to add it in your Customizer via Appearance > Customize > Custom > Edit Global Javascript
Let us know how this goes!
I had deleted it because it was not working. I just put it back in and still does not resolve the issue. It is in there now if you’d like to check.
Hi again,
The script is working as expected, do you want to hide the top page title? if this is the case then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:
header.x-header-landmark.x-container.max.width {
display: none;
}
Hope this helps!
Thank you!
You’re welcome!